Die Dokumentation kann man auch mit mehr Interaktivität auf http://julianstahnke.com/fhp/ia/anschauen. Sie funktioniert im Moment nur in Safari 4 und Firefox 3.6.
1. Matrix
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.
2. Referat
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.
R. Buckminster Fuller war ein Architekt, Ingenieur und Designer, der von 1895–1983 lebte. Er entwickelte neuartige Häuser und Autos, eine auf Basis eines Polyeders, geodätische Kuppeln und neue geometrische Ansätze. Er machte sich viele Gedanken über die Zukunft der Menschheit und gerechte Verteilung von Ressourcen, die er in mehreren Büchern niederschrieb.
3. Textvisualisierung
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 verschiedenen Farben anzeigen zu lassen. Da der Benutzer die Anzahl der Zeilen bis auf 600 vergrößern kann, ergeben sich so viele Bilder.
Anwendung zum Herunterladen: Mac | Windows | Linux
4. Prozessvisualisierung
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. Die Aktionen des Benutzers sind dabei durch verschiedene Symbole dargestellt.
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 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).
5. Generatives Logo
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.
Im ersten Versuch zeichnete ich viele kleine Dreiecke. Die Kantenlängen der Dreiecke basierten auf den RGB-Werten der Pixel eines Bildes aus dem Projektarchiv. Die Dreicke waren in der entsprechenden Farbe gefärbt und ein wenig transparent. Beim Bewegen der Maus änderte sich die Transparenz verschiedener Dreiecke.
In einer Abwandlung des ersten Versuches waren die Dreiecke nicht mehr transparent und chaotischer angeordnet. Das ganze sah ein wenig poppiger und nicht mehr ganz so nach Kindergarten-Aquarell, aber immer noch nicht besser aus.
(Die Typografie ist nur Platzhalter.)
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.
In dieser statischen Ansicht sieht das ganze nicht sehr berauschend aus, im Prototypen kommt es durch die Dynamik ein wenig besser rüber.
Prototyp zum Herunterladen: Mac | Windows | Linux
6. Navigation
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.
Heraus kam eine Web-Anwendung, die meine Arbeiten auf einzelnen Seiten darstellt, die gezoomt und verschoben werden können.
Ein weiteres Ziel war es, den Zufall einzubauen; daher gibt es 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, so dass man sich die Seiten auch als Dateigröße, Text- oder Farbvisualisierung anschauen kann.
Die Dokumentation kann man auch auf http://julianstahnke.com/fhp/ia/anschauen. Sie funktioniert im Moment nur in Safari 4 und Firefox 3.6.
