IA / IV 01: Matrix

Als Einstieg in die Welt der Informationsarchitektur und -visualisierung bekamen wir die Aufgabe eine 10 x 10 Felder umfassende Matrix mit einfachen grafischen Symbolen zu füllen, die anhand von 10 verschiedenen Parametern gestaltet werden sollten. Die Parameter lauteten: Punkt, Linie, Kurve, Umriss, Kontrast, Progression, Schraffur, Struktur, Unordnung, Prägnanz.

MatrixFIN.jpg

Nachdem man zunächst eine Skizze angefertigt hatte wurde der entgültige Entwurf digital in Illustrator umgesetzt.

Matrix_Digital.png

Im letzten Schritt wählte ich mir eine Zeile aus der Matrix und suchte in meinem Regal nach Reminiszenzen an diese 10 Grafiken in der Zeile. Für diesen Vorgang nahm ich die Zeile Schraffur.

FotomatrixB.png

IA / IV 02: Referat

Als Vorbereitung auf die nächste Aufgabe sollten wir uns nun eine bekannte Persönlichkeit aussuchen, die in irgendeiner Weise dem Thema Informationsarchitektur und -visualisierung nahe steht oder in jedem Fall gestalterisch tätig ist. Zu dieser Person sollten wir Recherchen anstellen um am Schluss ein Referat über sie zu halten. Ich bearbeitete in diesem Kontext den Grafiker Herbert W. Kapitzki. Kapitzki beschäftigte sich ausführlich mit der programmierten Gestaltung, mittels der aufgrund von mathematischen und geometrischen Operationen zu neuen Formen findet. Dabei hält er sich an ganz bestimmte Gesetze und Regeln. Zu seinen bekanntesten Arbeiten zählen die Gestaltung des deutschen Pavillons auf der Expo Montréal 1967 und seine langjährige Tätigkeit im Landesgewerbeamt Baden - Württemberg.

Ausführliche Informationen zu Herbert W. Kapitzki sind im Materialordner im PDF Handout_Kapitzki_HDettmann.pdf zu finden.

Kapitzki.jpg

IA / IV 03: Textvisualisierung

Als Grundlage für diese Aufgabe diente uns das zuvor gehaltene Referat. In meinem Fall der Stichpunktzettel für meinen Vortrag. Die Herausforderung bestand darin, einen Text visuell umzusetzen und zwar so dass er nachher auch noch lesbar ist. Man musste also eine Art visuellen Code für die Zeichen entwickeln. Ich entwickelte dazu eine Idee, den Text und seine Zeichen nicht direkt visuell neu zu interpretieren, sondern mich vor allem auf die Verteilung der Prioritäten auf die einzelnen Wörter und Textabschnitte zu konzentrieren. Genauer bedeutet das, dass ich meinen Stichpunktzettel dahingehend untersuchte, welche Wörter wie ausgezeichnet sind, also ob sie kursiv oder fett geschrieben sind oder ob es Zahlen sind. Dazu entwickelte ich eine einfache Visualisierung für den Text und trennte die Auszeichnungen farblich voneinander. Zusätzlich koppelte ich die ganze Visualisierung mit dem Parameter Zeit und ordnete das ganze auf einer Zeitleiste an.

Zeitleiste.jpg
TextVisual_Erläuterung.jpg

Nach einer ersten groben Skizze machte ich mich daran das ganze digital umzusetzen und dabei die Darstellung noch weiter zu entwickeln. Um ein schnelleres Verständnis für die Visualisierung zu fördern fügte ich noch einige Parameter wie Zeilen und Sätze hinzu, die ich ebenfalls abstrakt darstellte aber so eine gewisse Ordnung innerhalb der Wörter erreichte. Die Länge des gesprochenen Wortes berücksichtigte ich ebenfalls und streckte daher die Rechtecke, die die einzelnen Wörter symbolisierten, auf einer Sekundenskala. Somit konnte ich nun auch darstellen wie lange es braucht dieses Wort laut zu sprechen.

TextVisual_Erläuterung_Seite_08.jpg

Mit dieser Visualisierung ließen sich nun verschiedene Informationen zu meinem Text auslesen: Textlänge, Wort -, Satz - und Zeilenanzahl, Länge des gesprochenen Wortes oder Satzes, Auszeichnung und damit einhergehend die Priorität des Wortes im Text. Um diese Informationen nun sinnvoll einsetzen zu können überlegte ich mir wie man das Ganze in einem Interface umsetzen könnte und entwickelte hierzu einen Entwurf und einen Prototyp. Dieses Interface ist eine Software - Oberfläche für den heimischen PC. Die Software ist eine erweiterte Aufnahme - Umgebung mit der ich einen Text einsprechen und danach analysieren kann. Zusätzlich zu den gesprochenen Aufnahmen wird der Text als Datei in das Programm geladen und diese Datei auf Auszeichnungen untersucht. Die gebündelten Informationen aus der Aufnahme und der Textdatei fließen nun in die Visualisierung ein. Der Beutzer kann nun mittels der Software sehen, wo man vielleicht Teile im Text kürzen oder gar weglassen könnte oder die Formulierung ändern könnte um Zeit zu sparen. Diese Art der Textanalyse kann vor allem bei der Vorbereitung auf eine Rede oder Präsentation von großem Nutzen sein.

Bild 1.png

IA / IV 04: Prozessvisualisierung

Da die grafische Aufarbeitung von Daten oder Informationen in diesem Kurs ein sehr zentrales Thema ist ging es in der folgenden Aufgabe wieder um eine Visualisierung, jedoch mit höherem Abstraktionsgrad. Es sollte ein Prozess visualisiert werden also ein Handlungsablauf mit einem Start und einem Ende. Nachdem ich mich zunächst einmal rein theoretisch dem Thema Prozessvisualisierung näherte, um überhaupt zu wissen um was es sich dabei handelt, entschied ich mich dazu die Erstellung einer Ebay - Auktion zu visualisieren. Auch hier fertigte ich zunächst eine Skizze an um die wesentlichen Merkmale der Darstellung zu umreißen. Diese Merkmale waren zum einen die unterschiedlichen Operationen, die dargestellt werden mussten, und zum anderen der zeitliche Ablauf selbiger.

ProzessSkizze.jpg
HermannDettmann_Prozess_Seite_3.jpg

Um nun auch hier wieder von der Skizze zu einem ersten Entwurf zu kommen setzte ich meine erste Idee digital um und entwickelte sie weiter. Dabei überarbeitete ich die bisher entwickelten Symbole für die Operationen oder entwckelte sie gänzlich neu. Zudem unterteilte ich den Ablauf in dem ich die einzelnen Seiten berücksichtigte, die man durchläuft um die Auktion online zu stellen. Diese Seiten stellte ich in Form von gelben Flächen dar, mit der der Prozessstrang hinterlegt ist und ihn so in Abschnitte gliedert.

HermannDettmann_Prozess_Seite_4.jpg
TextVisual_Erläuterung_Seite_13.jpg

Weil der erste Entwurf der Prozessvisualisierung noch nicht so recht den Nagel auf den Kopf traf machte ich mich noch einmal daran und überarbeitete ihn. Dabei reduzierte ich die grafischen Elemente auf die Wichtigsten und ließ einige Dinge ganz weg. Die Flächen reduzierte ich auf Rahmen und der blaue Strang, der die verschiedenen Operationen miteinander verband, nahm ich komplett raus. Das Prinzip der Darstellung blieb jedoch erhalten und wurde nicht verändert. Im Anschluss an diese Arbeit entwickelte ich aus dem nun finalen Entwurf noch eine interaktive Umsetzung, die Materialordner zu finden ist.

TextVisual_Erläuterung_Seite_14.jpg

IA / IV 05: Generative Grafik

Für die Webseite des Fachbereichs Design der Fachhochschule Potsdam sollte eine generative Grafik für den Header entwickelt werden. Die Herausforderung bestand darin, dass die Grafik nur ein Größe von 720 x 20 px haben durfte. Man musste also für eine sehr kleine Fläche eine möglichst prägnante Grafik entwickeln, die mit einfachsten grafischen Mitteln auskommt. Als Grundlage für meinen Entwurf nahm ich mir die 5 Menüleisten, die den Nutzer durch die Seite führen und unterteilte die Headerfläche in 5 Zeilen. Ich übertrug die Buttons der einzelnen Menüleisten ebenfalls als farbige Rechtecke auf die jeweiligen Zeilen in meiner Headergrafik. Dahinter stand die Idee, dass sich die Grafik je nach Verhalten des Users verändert und die Wege durch die Website anhand der angeklickten Buttons visualisiert werden. Je öfter ein Button angeklickt wird umso mehr wird er eingefärbt und tritt hervor.

Versuch-17.png

Ich fertigte nun verschiedenste Varianten bezüglich der grafischen Darstellung und vor allem der Farbe an.

Entwurf_GeneGrafik-22.png

Schlussendlich kam ich zu diesem letzten Entwurf.

FInal_GeneGrafik.png
Browser_Ansicht_Entwurf.png