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 Die erste Aufgabe bearbeitete ich zusammen mit Ariane Marilyn Ecker. Wir entschieden uns für die Kindergeschichte Der Kleine Prinz von Antoine de Saint-Exupéry. Zwar bot das Buch typografisch keine Highlights, jedoch ließen die stilprägenden Illustrationen und der häufige Wechsel zwischen Erzähler und direkter Rede eine gute Umsetzung zu.

Im zweiten Schritt beschäftigten wir uns mit der Wahl eines passenden Fonts. Da der Aufgabenschwerpunkt auf der Auseinandersetzung mit Screentypografie lag, investierten wir viel Zeit in die Suche nach einer Schrift, die gleichzeitig optimale Lesbarkeit bot und eine passende Stimmung transportierte. Studios wie FontFont bringen gerade viele screenoptimierte Schriften auf den Markt, jedoch fehlte uns leider der Zugang zu entsprechenden Lizenzen. Wir einigten uns letztendlich auf die TheSans von Lucas de Groot. Zwar mussten wir im Kerning ein wenig nachhelfen, jedoch funktioniert sie als guter Kompromiss. Die Kriterien nach denen wir die Fonts überprüften sind hier zu finden.

Neben dem Buchinhalt sollten die gestalteten Screens auch die Navigationskonzepte präsentierten. Für die digitale Fassung wählten wir ein blaues Cover, statt des uns vorliegenden weißen. Diese Entscheidung trafen wir, um einen farblichen Kontrast zwischen Lesefläche und Navigationselementen herszustellen und um ein verträumteres Gesamtbild zu schaffen.

Die Umsetzung begonnen wir mit dem kleineren Format 240x320 (vertikal). Die Navigationsleisten erscheinen im Lesemodus durch antippen des Screens und zeigen den Buchtitel sowie das Kapitel an. Durch einen Swipe am oberen bzw. unteren Bildschirmrand gelangt man zum Inhaltsverzeichnis, von welchem aus die Kapitel gewählt werden können.

Nach der ersten Korrektur von Prof. Boris Müller waren wir mit dem Ergebnis sehr zufrieden und führten nur noch einige Anpassungen durch. Das Feedback hat mir persönlich sehr geholfen, da die Kritik an Details einleuchtend war und das Endergebnis deutlich verbessert hat.

Das große Format 1024x768 (horizontal) setzten wir im Stil der kleinen Version um, jedoch wird hier das Inhaltsverzeichnis durch einen Swipe von links nach rechts neben dem Text angezeigt. Zusätzlich verbauten wir eine weitere explorative Navigation, welche mir im Nachhinein jedoch als überflüssig bzw. als zu platzraubend erscheint. Am unteren Bildschirmrand ist ein Hügel zu sehen, der je nach Lesefortschritt immer weiter von Blumen überwuchert wird. Ich denke, dass die Hauptnavigation gereicht hätte.

Eine kleine Herausforderung war der Textsatz, da schon in der vorliegenden Printversion nicht ordentlich gearbeitet wurde. Um die Texte weiter zu strukturieren, hoben wir direkte Rede in blauer Farbe hervor und vermieden so einen Kursivschnitt, da dieser auf Bildschirmen schlechter lesbar ist.

“)

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 Bei der Umsetzung der zweiten Aufgabe habe ich wahrscheinlich am meisten gelernt. Ich hatte mich zuvor nie intensiv mit der iPhone-UI auseinandergesetzt, da ich kein Smartphone besitze. Für mich war es also der Start, um Designpattern und einige UI-Elemente näher kennen zu lernen.

Mein Ziel für die Brainstorming-App war das schnelle Generieren von Ideen mit Unterstütztung durch das Smartphone. Die Grundidee basiert auf dem Ideenfächer, der dem Nutzer ungewöhnliche Fragen zu seinem Projekt stellt und ihn so zu neuen Denkwegen anregt. Dieses Prinzip nahm ich auf und ließ dabei als Besonderheit Siri die assoziierten Stichwörter im Diktat aufnehmen.

Auf Grundlage dieser Stichwörter werden im zweiten Schritt Synonyme abgerufen und in einer Wolke um das Original-Stichwort angeordnet. Die zusätzlichen Synonyme erweitern den Horizont der Stichwörter und geben Anregungen zum Denken und Assoziieren in anderen Kontexten.

Die dadurch entstehenden Tags werden anschließen für eine Bildersuche verwendet, welche die Assoziationsketten weiter vertieft. Die Bildauswahl geschieht durch swipen der einzelnen Bildstreifen. Durch Druck auf das Bild wird verstärkt nach entsprechenden Tags gefiltert.

Es entsteht eine Mindmap, die Stränge aus schnell assoziierten Ideen darstellt, wobei der Prozess im Endeffekt wichtiger ist. Spannend wäre hier die Möglichkeit, das entstandene Netz exportieren zu können, mit anderen zu kombinieren und auszudrucken.

Die Gestaltung ist schlicht und dunkel und soll die Fokussierung auf den Inhalt fördern. Durch den Namen Wolke gab ich der App ein eigenes Vokabular, führte mich dadurch aber auch in einige unnötig schwierige Situationen. So wurde mir z. B. berechtigt die Frage gestellt, warum meine Mindmaps nicht aus Wolken bestünden. Würde ich noch einmal von vorne beginnen, würde ich die Metapher konsequenter im Interface durchziehen bzw. einen anderen Namen wählen, da die Cloudtechnologie dieses Sinnbild eigentlich schon füllt.

“)

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. [12](http://Ich_bin_der_Text_für_die_Marginalspalte.png „12“)

Umsetzung Das KlangBild hat mir – wie wahrscheinlich den meisten Anderen auch – die größte Herausforderung geboten. Um ein gutes Ergebnis zu erreichen, mussten wir uns eine eigene Sprache ausdenken, in der wir das Muster unserer Klangreihe zum Ausdruck bringen konnten. Ich wählte den Sound einer Situation an der Supermarktkasse (siehe Klangbild.zip) und suchte mir hierfür mögliche Ausdrucksarten.

Am Ende entschied ich mich für eine typografische Lösung im Stil eines Comicpanels. Im Klang lassen sich mehrere Ebenen erkennen, welche ich durch Größe und Anordnung in ihrer Eindringlichkeit und Abfolge beschrieben habe. Die verwendeten Schriften und Farben stellen dazu den Charakter der jeweiligen Klänge dar.

Das Ergebnis gefällt mir im Nachhinein gut, wobei ich beim bearbeiten der Aufgabe fast durchgedreht wäre. Nächstes mal würde ich wahrscheinlich eher Walgesänge bevorzugen. Im Endeffekt eine tolle Aufgabe, um den eigenen Stil genauer kennen zu lernen.


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 Die letzte Aufgabe war wieder eine Gruppenarbeit. Diese mal arbeitete ich zusammen mit Debora Ledesma.

Wir entschieden uns für eine Anleitung zum Zubereiten von Maki Sushi. Schnell war uns klar, dass wir die Grafiken nicht zu nüchtern darstellen wollten. Wir probierten durch Skizzen einen verständlichen und nicht zu reduzierten Stil zu finden. Während Debora sich mit den einzelnen Arbeitsschritten auseinandersetzte, probierte ich mich daran, unsere Skizzen am Kawaii-Stil auszurichten. Der Kawaii-Stil ist [kindlich, schrill](http://kawaiiuniverse.com/ „und ein bisschen gruselig“) und unglaublich verspielt. Wir inspirierten uns zwar daran, setzten uns aber ab, indem wir z. B. die Gesichter wegließen und die Farbwelt ruhiger gestalteten.

Als Format wählten wir eine A4-Seite, da wir uns vorstellten, dass es praktisch wäre, wenn man das Rezept problemlos auf dem hauseignen Drucker ausdrucken könnte. Die Anleitung ist an einem 2x6 Raster ausgerichtet, sodass sie durch Falten unterteilt und in Hosentaschenformat gebracht werden kann. Die Vorderseite ist in diesem Zustand ein Bild vom Ergebnis, die Rückseite eine Checkliste für den Einkauf.

Die Aufgabe war arbeitsintensiv, hat aber Spaß gemacht. Ich musste feststellen, dass ich mich in perspektivischen Zeichnungen üben sollte. Prof. Boris Müller kommentierte dies jedoch gütig mit „Das ist so falsch, dass es wieder funktioniert“.


Mein Lieblingskurs im ersten Semester. Wir haben viel gelernt und tolle Korrekturen bekommen. Einziger Kritikpunkt ist die Gruppenarbeit, welche meiner Meinung nach bei der KlangBild-Aufgabe mehr Sinn machen würde, als beim digitalen Buch. Da das Thema Screentypografie elementar ist, sollte diese Aufgabe jeder für sich selbst bearbeiten. Das KlangBild könnte durch Diskussionen und Arbeitsteilung bestimmt etwas entstresst werden.