IA/IV

Erste Aufgabe war die Erstellung einer 10×10 Felder großen Matrix, in der die folgenden visuellen Variablen kombiniert werden sollten: Punkt, Linie, Kurve, Umriss, Kontrast, Progression, Schraffur, Struktur, Unordnung und Prägnanz.

Im zweiten Teil der Aufgabe sollte die Darstellung der Matrix bzw. einer Reihe durch die Verwendung von Fotos statt Illustrationen verändert werden. Dazu machte ich nach einigen erfolglosen Versuchen in Küche und Bad einen Spaziergang durch meine Nachbarschaft, um Zäune zu fotografieren.

Matrix als PDF herunterladen
Fotomatrix etwas größer bei Flickr

Die zweite Aufgabe war es, ein Referat über eine bekannte und für den Kurs relevante Persönlichkeit halten. Dazu gab es eine Liste mit Vorschlägen. Ich entschied mich für R. Buckminster Fuller, da ich öfters seinen Namen gehört hatte und etwas mehr über ihn erfahren wollte.

Für die dritte Aufgabe sollte ein Text oder dessen Inhalt visualisiert werden. Ich entschloss mich, die Eigenschaften der Zeichen im Text zu visualisieren. Hierzu berechnete ich für jedes Zeichen das Verhältnis der schwarzen und weißen Pixel, die Höhe, Breite und die Fläche.

Dann ordnete ich den Text so an, wie er auch im Buch steht: 60 Zeichen pro Zeile, 30 Zeilen. Für jede Zeile gibt es ein Liniendiagramm, für das die Zeichen die X-Achse bilden. Der Benutzer kann nun auf die Y-Achse und/oder die Transparenz des Diagrammes alle oben genannten Werte legen.

Außerdem besteht die Möglichkeit, sich die Art des Wortes mit den folgenden Farben anzeigen zu lassen: Verb, Adverb, Adjektiv, Substantiv, Interpunktion, Leerzeichen, sonstiges Zeichen.

Da der Benutzer die Anzahl der Zeilen bis auf 600 vergrößern kann, ergeben sich so viele Bilder.

Die Anwendung zum Herunterladen und Ausprobieren:
Mac | Windows | Linux | Processing-Quelltext

Für die vierte Aufgabe sollte ein beliebiger Prozess möglichst abstrakt visualisiert werden. Meine erste Idee war es, das Schmieren von Nutellabroten mit einer abgewandelten Minard-Grafik zu visualisieren. Letztlich entschied ich mich jedoch dafür, das Anlegen und Abspielen einer Wiedergabeliste in iTunes, WinAmp und dem Windows Media Player vergleichend zu visualisieren.

Als Abstraktion wählte ich die Methode, nur die Eingaben des Benutzers über Maus und Tastatur darzustellen. Im ersten Schritt protokolierte ich alle Mausbewegungen und -klicks, um sie räumlich darzustellen.

Der nächste Schritt war das Abstrahieren der ersten, räumlichen Grafik, in eine lineare Form. Die Reihenfolge und Dauer der Aktionen wird so besser ersichtlich.

Im letzten Schritt wird die lineare Darstellung nach Aktion geordnet. So wird quantitativ ersichtlich, welche und wie viele Aktionen ausgeführt werden müssen, um in den verschiedenen Programmen eine Wiedergabeliste zu erstellen und Abzuspielen.

Die Aktionen des Benutzers sind durch folgende Symbole dargestellt:

• Linksklick
• Rechtsklick
• Drag-and-drop
• Tastendruck

Die letzten vier Grafiken zeigen das Arbeiten in Illustrator (einen Ausschnitt aus der Erstellung der Matrix in Aufgabe 1) in verschiedenen räumlichen Darstellungsformen; z.B. mit Abweichungen der Mauspfade von den gedachten, optimalen Mauspfaden zwischen zwei Positionen; oder mit den älteren Pfaden langsam verblassend.

Die Programme zum Protokollieren der Mausbewegungen und Erstellen der Grafiken gibt es als Quelltext zum Herunterladen (nur für Mac; Xcode und Processing erforderlich zum Kompilieren und Ausführen).

Bei der fünften Aufgabe sollte ein generatives Logo für die Homepage des Fachbereichs Design erstellt werden. Wenn möglich, sollte das Logo auch irgendwie interaktiv sein.

Zuerst wollte ich das Logo aus etwas generieren, dass die Studenten repräsentiert. So entschloss ich mich, als Eingabe Bilder der Studentenprojekte aus dem Incom-Projektarchiv zu nehmen. Diese analysierte ich dann auf ihre Farben, die ich als Grundlage fürs Logo nahm. Letztlich wurde ich mit diesem Ansatz in verschiedenen Ausführungen jedoch nicht glücklich.

Das finale Logo wird nun vollständig vom Besucher der Seite generiert. Bewegt er die Maus, wird zum Logo ein Kästchen mit der Farbe des Pixels beim Mauszeiger hinzugefügt. Je mehr Kästchen es gibt, umso kleiner werden sie. Besonders glücklich bin ich auch mit diesem Ansatz nicht geworden, aber mehr war in dieser Zeit nicht mehr drin.

Der Logo-Prototyp zum Herunterladen und Probieren:
Mac | Windows | Linux

Die letzte Aufgabe war die Erstellung eines Navigationskonzeptes, um die Ergebnisse unserer Mühen angemessen zu präsentieren.

Mein Ziel war es, dem Benutzer komplett frei zu lassen, wie er sich die Dokumentation anschaut. Dabei wollte ich unbedingt die Möglichkeit schaffen, alles auf einen Blick zu sehen, um sich nur die – subjektiv – interessanten Dinge herauszupicken. Andererseits sollte sich der Benutzer aber auch alles in der richtigen Reihenfolge anschauen können.

Ein weiteres Ziel war es, den Zufall einzubauen; daher die Möglichkeit, die einzelnen Seiten verschieden anzuordnen. Wenn der Benutzer dann von einer Seite zur nächsten fliegt, stößt er unterwegs vielleicht auf etwas anderes, das ihm gefällt, und kann stoppen, um es anzuschauen.

Schließlich wollte ich noch dem Thema des Kurses Rechnung tragen. Dazu baute ich ein paar Meta-Visualisierungen ein.