Copyright

©Robert Steinmüller

Aufgabe: Gestalte eine digitale Fassung Deines Lieblingsbuches. Das Buch kann ein Roman, ein Sach-, Koch- oder Fachbuch, oder auch ein Gedichtband sein. (Keine Comics!) Die digitale Fassung des Buches soll exemplarisch anhand von vier Screens in zwei verschiedenen Formaten vorgestellt werden – zwei horizontale Screens im Format von 1024 x 768 Pixeln und zwei vertikale Screens im Format von 240 x 320 Pixeln. Die Screens sollen nicht nur die Inhalte des Buchs wiedergeben, sondern sollen auch das Navigationskonzept verdeutlichen, mit dem die Inhalte des digitalen Buches erschlossen werden können. Lesbarkeit und Klarheit der Darstellung sind die wichtige Kriterien bei der Bearbeitung der Aufgabe. Die Aufgabe soll in Zweierteams bearbeitet werden.

Umsetzung: Diese erste Aufgabe habe ich gemeinsam mit Nicole Schimkus bearbeitet. Wir haben uns dabei für das Buch „Kreislauf 4+5 – Design und Mode rund um die Langstraße 2010“ entschieden. Das Buch ist der Begleitkatalog zur gleichnamigen Veranstaltung, die jährlich in Zürich stattfindet und Shops, Ausstellungen und Events der besagten Stadtquartiere vereint. Durch die kataloghafte Auflistung, die Hintergrundinformation, nützlichen Tipps und die Ausrichtung als gestaltungsaffines Buch, ist das Exemplar somit bestens geeignet in der gestellten Aufgabe von uns digitalisiert zu werden.

Die größte Hürde lag dabei ein gemeinsames Navigationskonzept zu finden, was die Fülle an Informationen und gleichwertigen Shops zusammenführt und gleichzeitig einen Buchcharakter behalten sollte. Wir entschieden uns somit für ein Shop-Listing als Übersicht, sowie scrollbare Direktansichten. Die Hauptnavigation erfolgt dabei „swipeartig“ von links nach rechts und geht dabei immer mehr ins Details der gewünschten Information. Man kann dies auch als übergroße Seite verstehen, durch diese man sich mit dem swipen bewegen kann.

Auf der Tabletgröße wird der Buchcharakter noch deutlicher, da dort durch Bild und Texthälften auf dem Screen die Logik eines Buches gewahrt wird. Die Navigation lässt sich dabei durch die Headernavigation einblenden.

Als „Hintergrund-Navigation“ der Bereiche, Orte, Karte und Zsuatzinformationen haben wir uns für einen Balken am oberen Rand entschieden, im kleinen Format einklappbar, im großen Format dauerhaft präsent.

Als Farben dienten uns die aktuellen Farben der Veranstaltung „Kreislauf 4+5 – Design und Mode rund um die Langstraße“.

Copyright

©Robert Steinmüller

Aufgabe: Es soll ein Brainstorm-App für das iPhone realisiert werden. Das App soll also eine Gruppe von Designer / Entwicklern bei der Generierung von Ideen unterstützen. Die genauen Funktionalitäten können in der Konzeptphase entwickelt werden. Die Applikation kann unter Umständen über das technisch Machbare hinausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr. Das Ziel ist, einen möglichst iPhone-konformen Entwurf zu erarbeiten. Daher soll weitesgehend die standardisierte iPhone-GUI eingesetzt werden. Die Entwürfe sollen 320 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle. Zusätzlich zur GUI soll ein Programmablaufplan (Flowchart) skizziert werden.

Umsetzung: Die Aufgabe war für mich sehr anspruchsvoll, da es das erste Mal war, dass ich mich mit Userinterfaces eines Handy auseinandersetzen musste. jedoch war dabei die Vorgabe der Iphone Gui eine Hilfestellung, da man hier auf fertige Elemente zurückgreifen konnte und somit richtungsorientiert arbeiten konnte. Ich entschied mich für das System eines Whiteboard auf der der Nutzer Keywords in Clouds zusammenfassen kann, und sich somit mehr und mehr eine Mindmap generiert. Als zufallsbasiertes Gimmick habe ich eine „Shake-It“ Funktion vorgesehen, welche die zugeordneten Begriffe komplett durcheinander würfelt und so neue Sinnverbindungen schafft und somit ideengenerierend wirken kann.

Für eine neue Session können Basisdaten wie Teilnehmer, Zeit und Name eingeben werden. Sind mehrere Teilnehmer involviert arbeiten diese virtuelle alle auf dem selben Whiteboard und können die Clouds ergänzen. Teilnehmer können auch später noch hinzugefügt werden. Zudem kann man in den Kontaktdaten sehen, wer bei welchem Brainstormprojekt schon mitgemacht hat.

Für eine bessere Übersicht sind die Clouds kompakt dargestellt, sodass sich die Begriffe unter dem Haupttitel verbergen und so einen wahren Wolkenhaufen bilden. Bei Antippen des Hauptbegriffs aktiviert sich die Wolke und die Begriffe treten ringförmig lesbar hervor.

Nach Ablauf der Session, oder auch früher, kann man in den Listenmodus wechseln, wo man alle Haupttiel und Begriffe „bewerten kann“. Dazu einfach den Haken antickern. Diese gefilterte Ergebnisübersicht lässt sich dann einfach per Medienverbindung via Internet oder andere Dienste verschicken, und pdf-aufbereitet ausdrucken.

Copyright

©Robert Steinmüller

Aufgabe: Es soll eine akustische Begebenheit (kein Musikstück!) in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll also für den Betrachter nachvollziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Einzige Einschränkung: es soll keine Bildschirmorientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.

Umsetzung: Als abwechlungsreiches und anspruchsvolles Klangstück entschied ich mich für die Startsequenz des Films „Der Soldat James Ryan“. Das entstandene Plakat zeigt die visualisierte Darstellung der bekannten ersten 45 Sekunden des Films – die Landung in der Normandie. Unter Vereinfachung pausenhafter Lücken oder Stille habe ich dabei ein komplexes Klangmuster zusammen geschnitten.

Aufgrund von abrupten und kurzen Tonabfolgen entschied ich mich für eine bildhafte schematische Darstellung und entwarf dabei eine symbolhafte Darstellung des Gehörten. Die zugeordnete Symbole differenzieren dabei Geräusche, Klänge und akustische Reize der komplexen Kriegsszene, welche durch die schematische anschaulische Darstellung für den Betrachter stark vereinfacht wird. Trotzdem bekommt einen Eindruck des Inhaltes und eine Vorstellung der Kriegsmaschinerie, die zu hören ist. Als visuelle Umrahmung dient die Simulation von Karton- bzw. Holzpappe mit schwarzem Druck.

Copyright

©Robert Steinmüller

Aufgabe: Es soll ein komplexer Sachverhalt gesucht und in einem Schaubild oder in einem interaktiven Film dargestellt werden. Die Darstellung darf keinerlei Text enthalten. Der Sachverhalt soll möglichst deutlich und klar kommuniziert werden.

Bei der Auswahl eines Themas sollte drauf geachtet werden, dass das Thema hinreichend komplex ist. Naturwissenschaftliche Themen sind z.B. gut geeignet. Es können aber auch Alltagsthemen genommen werden wie z.B. die Zubereitung eines Essens.

Die Aufgabe soll in Zweierteams bearbeitet werden.

Umsetzung: Diese Aufgabe habe ich zusammen mit Cecile Zahorka bearbeitet. Nach gemeinsamen Überlegen eines aussagekräftigen Sachverhaltes, entschieden wir uns die „Waffenexporte Deutschlands innerhalb eines Jahres“ als Thema zu nehmen. Nach ausführlicher Recherche musste mit den gesammelten Informationen ein darstellbares System gefunden werden, welches ohne Worte funktionert. Das Ergebnis war eine schematische Darstellung mit proportionalen Pfeilen zur Kenngröße des Wertes. Die Größeneinheit der grafischen Umsetzung entsprach so dem zahlenmäßigem Wert. Für die Länder und Produkte dienten die Umrisse als Vektorgrafiken der Erkennbarkeit.

Die Basis des Schaubildes bildet der Mittelbalken (Dtl.) mit der Summe des Exportvolumens, dass sich nach oben und unten in zwei Informationsgrafiken aufteilt, diese aber beide aufgrund selber Größenverhältnise zusammen funktionieren und so interessante vergleichbare Rückschlüsse zulassen.

Die Farbgebung dient dabei lediglich zur besseren Unterscheidbarkeit der Pfeile.