Informationsarchitektur und -Visualisierung, SS10, Moritz von Volkmann
Vermittelt werden Grundlagen zur Analyse von Informationsaufnahmeprozessen und Strukturierung komplexer Informationszusammenhänge unter didaktischen, logischen und ergonomischen Gesichtspunkten.
1. Namensschild
Aufgabe:
→ Erstellen Sie ein Namenschild mit Ihrem Namen
→ Visualisieren Sie sich selbst mit frei wählbaren Kriterien
→ Der Name muss typografisch leserlich sein
→ Das Namensschild muss benutzbar sein
→ Die visualisierten Kriterien müssen verständlich sein
→ Format: A4 geknickt = A5
→ Die Umsetzung kann digital oder manuell sein
Umsetzung:
Zugegeben, für mich stand bei dieser Aufgabe nicht die Funktionalität an aller erster Stelle. Ich wollte eine kreative Lösung finden, die meine Persönlichkeit ein Stück weit widerspiegelt.
Ich wählte also eine Lösung, die im Prinzip Produkt- und Screendesign kombiniert. Für die Darstellung meines Namens wählte ich mein iPhone. Ich schrieb eine iPhone-App, die im Prinzip nichts mehr kann, als meinen Namen darzustellen (als kleine Spielerei habe ich da noch für den Portrait-Modus einen Twitter-Stream zu meinem Namen [Moritz] hinzugefügt).
Nachdem man die App gestartet hat und das iPhone in den Landscape-Modus "gedreht" hat, musste man es in einen von mir aus Pappe gebauten Träger stellen, auf den dann ein Papier aufgelegt wurde.
Das iPhone ist als solches nicht mehr direkt erkennbar und das Namensschild kann als einheitliches, homogenes Produkt wahrgenommen werden. Klarer Vorteil: Auch im Dunkeln lesbar ;)
2. Matrix
Aufgabe:
Erstellen Sie eine 10 x 10 grosse Matrix. Kombinieren Sie die visuellen Variablen der Spalten und Zeilen.
Erweitern Sie die Aufgabe in dem Sie die Darstellungsart in ihrer Abstraktion verstärken/abschwächen.
3. Plakat, Tascheninhalt
Aufgabe:
→ Jeder Teilnehmer legt einige Gegenstände aus seiner Tasche auf den Tisch.
→ Gemeinsam sortieren wir diese nach diversen Kriterien, zum Beispiel: Farbe, Wichtigkeit, Größe
Die Ergebnisse werden fotografisch dokumentiert und in einem Plakat visualisiert.
Umsetzung:
Ich entschied mich für eine Aufteilung der Gegenstände nach Farbe. Dazu erstellte ich zwei vertikal nach unten verlaufende Bildreihen, wobei die rechte Spalte von hell (oben) nach dunkel (unten) verlief. Links waren die farbigen Gegenstände nach Anordnung auf dem Tisch abgebildet.
4. Kurzaufgabe: Farbe
Aufgabe:
→ Es ist Frühling!
→ Erstellen Sie eine Infografik, die die Farbzusammenstellung der Kleidung Ihrer Kommilitonen (oder die eigene) visualisiert.
→ Untersuchen Sie einen frei wählbaren Sachverhalt.
→ Die Art der Infografik kann frei gewählt werden.
→ Die Daten können subjektiv erhoben werden.
Umsetzung:
Innerhalb einer sehr kurzen Zeit sollten wir zum Thema "Farbe" eine Infografik erstellen. Ich entschied mich für ein Plakat, welches exemplarisch die Filmposterfarben zweier Jahrzehnte (in meinem Beispiel 1940-1949 und 2000-2009) darstellte.
Hier wählte ich die Top 4 der IMDB-Filmcharts des jeweiligen Jahrzehnts. Mittels Adobe Kuler erstellte ich zu jedem Filmplakat ein Farbklima und ermittelte die jeweils hellste und dunkelste Farbe (Schwarz und Weiß ausgenommen) des Plakats. Visualisiert wurde das ganze mittels eines radialen Farbverlaufs.
Am Ende ermittelte ich die Filmplakat-Farbe des Jahrzehnts, indem ich die Durchschnitts-RGB-Werte der dunkelsten und hellsten Farben errechnete. Neben den Jahreszahlen wird die Farbe des Jahrzehnts dann in einem horizontalen Farbverlauf abgebildet.
5. Referat
Aufgabe:
→ Erarbeiten Sie einen Vortrag (ca. 10 Minuten) über folgende Gestalterpersönlichkeiten.
→ Visualisieren Sie den Lebenslauf mit den wichtigsten Stationen.
→ Erarbeiten Sie ein Handout für alle Studenten.
Umsetzung:
Ich wählte, auf eigenen Wunsch hin, Dieter Rams. Für die Präsentation baute ich eine Flash-Anwendung, die die Ästhetik der von Rams entwickelten und gestalteten Braun-Geräte etwas aufgreifen sollte.
Die Lebenslaufgestaltung lehnte ich ebenfalls an die Bildsprache der Anzeigen diverser Braun-Anlagen (vgl. siehe Bilder).
Das User-Interface habe ich in Photoshop und Illustrator gezeichnet und dann in Flash programmiert (Flash IDE + FDT). Als Schriftart wählte ich selbstverständlich die Berthold Akzidenz Grotesk, ebenfalls an die alten Braun-Geräte angelehnt.
6. Piktogramm
Aufgabe:
→ Entwickeln Sie ein (modernes) Piktogramm.
→ Es kann sich um eine Tätigkeit oder ein Vorgang handeln.
Umsetzung:
Als Piktogramm-Thema wählte ich den Stierkampf. Für dieses sehr komplexe Piktogramm erstellte ich ein Raster und wählte eine frontale Darstellung.
Kritisch bleibt jedoch hierbei die Dynamik, weshalb ich mich weitestgehend an geschwungene Linien gehalten habe, um selbige zu fokussieren.
7. Handlungsablauf
Aufgabe:
→ Stellen Sie einen Handlungsablauf über einen gewissen Zeitraum dar.
Umsetzung:
Als Handlungsablauf wählte ich die Rallye Dakar 2007. 2007 deshalb, da die Rallye Dakar dort zum letzten Mal in Afrika stattfand und ich die Strecke einfach ansprechender fand.
Ich teilte die Streckenabschnitte in ein Raster und abstrahierte die Darstellungsform ähnlich wie bei einem U-Bahn-Plan. Um den Informationsgehalt weiter auszubauen fügte ich als Infos zu den Abschnitten ein paar Aspekte hinzu: Gewerte- und ungewertete Kilometer, Einwohnerzahl der jeweiligen Stadt, länge des Streckenabschnitts, Geo-Koordinaten und natürlich den Namen der Stadt. Als weitere Information fügte ich eine Tortengrafik zu den Teilnehmerklassen hinzu.
8. Zeitungsartikel
Aufgabe:
→ 2 Gruppen
→ 2 Zeitungsartikel
→ ca. 1,5 Std Zeit den Informationsgehalt zu visualisieren
→ ohne Computer
→ Beide Gruppen präsentieren sich die Inhalte gegenseitig
9. Wasseraufbereitung in der DDR
Aufgabe:
→ Analysieren Sie die dargestellte Grafik im zweier Team.
→ Finden Sie eine moderne neue Übersetzung des dargestellten Wasserkreislaufes.
Umsetzung:
Für die Übersetzung der Trinkwasseraufbereitungs-Grafik in eine moderne Bildsprache wählten wir eine Visualisierung in 3D-Form. Inspiriert durch Tilt-Shift, Computerspielen und Modell-Landschaften, erstellten wir eine extrem detailreiche Infografik.
Wir wollten allerdings den DDR-"Charme" beibehalten und lediglich die Ästhetik "moderniesieren". Angeordnet auf einen zweiachsigen Landschaftsschnitt stellten wir die einzelnen Stationen der Wasseraufbereitung dar.
Verwendet haben wir vorwiegend Cinema 4D und Photoshop. Die Beschriftungen wurden in Illustrator gestaltet und die Texturen haben wir teilweise selbst fotografiert. Also: Modelling und Rendering in C4D, Texturen und Compositing in Photoshop, Labels und Typo in Illustrator.
Arbeit und Nachtschichten teilten sich hierbei mit mir Philipp Datz und Konstantin Datz.
Die finale Grafik ist in voller Auflösung im Materialordner zu finden.
