Aufgabe 01 - Digitales Buch

Aufgabenstellung

Die erste Aufgabe bestand darin, ein bereits publiziertes Buch in einem Zweierteam in eine digitale Anwendung zu übersetzen. Die Bildschirmgröße war vorgegeben: ein kleines Format (240px x 320px) und ein mittelgroßes Format (1024px x 768px). Besonders wichtig war hier die Gestaltung der typografischen Elemente.

Bearbeitung

Zusammen mit Pauline Cremer fiel die Entscheidung auf die Gedichtsammlung «Regentonnenvariationen» von Jan Wagner.

Das Buch ist ein Gedichtband ohne Illustrationen. Es enthält 57 Gedichte in 5 Abschnitten. Das Besondere der Typografie: Alle Buchstaben sind Minuskeln.

Das Hauptaugenmerk des Buches liegt auf den Gedichten. Für die Navigation brauchten wir ein bestimmtes Ordnungsschema. Da die Gedichte dies im Buch nicht hatten, entschieden wir uns für eine alphabetische Ordnung. Wichtig war uns, dass die Anwendung ein möglichst kreatives und außergewöhnliches Menü bietet, um spielerisch die Gedichte entdecken zu können. Unwichtig hingegen war es, die Gedichtreihenfolge des Buches einzuhalten.

Das größere Format erlaubte mehr spielerische Möglichkeiten, weshalb wir hier die einzelnen Buchstaben des Alphabets verstreut auf die Fläche der ausgeklappten Navigation verteilten. Sobald einer der Buchstaben angeklickt wird, vergrößert sich der Buchstabe und um ihn herum verteilen sich so viele Punkte, wie Gedichte mit diesem Anfangsbuchstaben vorhanden sind. Es gibt drei Punktgrößen, die für die Länge des Gedichts stehen: klein – kurz, mittelgroß – mittellang, groß – lang.

Auf dem kleinen Format dient der dünne Balken als Orientierung. Ganz einfach scrollt der User runter und gelangt direkt zum alphabetisch sortierten Menü. Auch hier werden die Gedichte in kurz, mittel und lang unterteilt, visualisiert durch die Länge der horizontalen Balken unter dem Gedichtnamen. An der rechten Seite der Anwendung erscheint ein vertikales Mini-Alphabet für eine schnellere Navigation (angelehnt an die Kontakt-App des iPhones).

Für die digitale Übersetzung des Buches haben wir die Schrift «Adobe Garamond Pro» gewählt, da sie der Schrift im Gedichtband ähnlich sieht und sowohl auf großen, als auch auf kleinen Bildschirmen gut lesbar ist.

Fazit zu Aufgabe 01

Diese Aufgabe hat mir die Wichtigkeit einer durchdachten Screen-Typografie gezeigt und wie die Schriften auf unterschiedlich großen bzw. kleinen Formaten wirken. Außerdem habe ich gelernt, dass die App-Entwicklung nicht immer den visuellen App-Standard bedienen muss. Kreativität ist in einem gewissen Maße angebracht, solang die Funktionen noch leicht verständlich sind.

Aufgabe 02 - Klangvisualisierung

Aufgabenstellung

In Einzelarbeit sollte eine zufällig zugewiesene Tonaufnahme in ein Klangbild umgesetzt werden. Die Klänge entstanden alle in einem Alltagsmoment (z.B. auf der Straße). Wichtig dabei war, keine generative Gestaltung zu erzeugen, sondern die Daten zu analysieren und grafisch in einen nachvollziehbaren Kontext umzusetzen. Der zeitliche Ablauf der Begebenheit soll für den Betrachter nachvollziehbar sein

Bearbeitung

«Titel 31» (die Datei ist diesem Projekt hinzugefügt) spielt die Klänge einer belebten Stadtsituation. Es sind innerhalb der 120 Sekunden Straßengeräusche/Motoren, ein regelmäßiges Ticken, ein Chor, einige Stimmen, ein dumpfer Schlag (Herzschlag) und ein Donnern zu hören. Ich hatte von Anfang an die Idee, die Geräusche in einem Graphen darzustellen. Dafür habe ich bei Adobe Illustrator ein gleichmäßiges Raster erstellt, bei dem jede Sekunde einem vertikalen Strich zugeordnet ist (120 Teile). Da es so viele verschiedene Klänge sind, habe ich erst einmal jeden Klang einzeln in den Graphen eingezeichnet. Dabei habe ich jede Sekunde markiert, in der der jeweilige Klang zu hören war. Je lauter er war, desto höher habe ich die Markierung gesetzt. Auch die Gesamtlautstärke habe ich analysiert und im Raster markiert. Die Klang-Punkte habe ich dann verbunden, sodass mehrere eckige Linien dabei entstanden. Sobald ein Ton verstummt, ist die Linie unterbrochen.

Das Ticken und der Herzschlag stachen in ihrer Form heraus, weil sie punktuelle Töne sind und so eine heftige Zick-Zack-Linie entstand. Da ich sie von den anderen Klängen abgrenzen wollte, habe ich sie mit einem vertikalen Strich mit einem Kreis am oberen Ende übersetzt, um die Tonart besser zu visualisieren. Um diese Linien nun zusammenzuführen, diente der Graph der Gesamtlautstärke als Basislinie, an der ich alle anderen Linien ausrichtete. Um die Tonhöhen zu wahren, zeichnete ich für die langen Töne den jeweiligen Abstand zur Null-Linie (Lautstärke = 0). Dies hatte den schönen Nebeneffekt, dass die Töne eine Dichte bzw. Fläche bekamen, wodurch man sie besser erkennen kann. Damit man sie auch abgrenzen kann, habe ich jedem Ton eine andere Farbe gegeben. Einige Töne überschneiden sich natürlich, weshalb ich auch hier ein System finden musste: Die Töne, die ich mehr im Vordergrund wahrgenommen habe, stehen auch farblich im Vordergrund und überdecken die anderen Klänge und andersherum.

Fazit zu Aufgabe 02

Am Ende ist eine übersichtliche und systematisch durchdachte Klangvisualisierung entstanden. Aus dem Feedback des Kurses konnte ich keine Verbesserungsvorschläge entnehmen und bin insgesamt sehr zufrieden mit diesem Projekt.

Aufgabe 03 - Graphical User Interface

Aufgabenstellung

Die dritte Aufgabe wurde wieder in Zweier-Gruppen bearbeitet. Es sollte eine Benutzeroberfläche für eine App zum Thema «Inspiration» gestaltet werden. Im Vordergrund stand hier die Interaktion des Users mit der App.

Bearbeitung

Die App von Paul Kasperski und mir soll es dem Nutzer ermöglichen, schnell eine passende Visualisierungsform für eine Infografik zu finden und mit den Ausgangsdaten direkt eine Infografik zu generieren und herunterzuladen. Der erste Teil des Namens «Infofux» impliziert das Thema „Infografik“ und der zweite Teil ist eine Mischung aus dem Fuchs («schlaustes Tier») und aus der Variablen x, die für die Ausgangsdaten steht.

Wir haben uns bei der Gestaltung an den iOS Guidlines von Apple orientiert, wollten aber auch noch zusätzlich unseren eigenen Stil mit einbringen. Am Anfang haben wir bewusst auf eine Anmeldung verzichtet, da die generierten Infografiken am Ende sofort heruntergeladen werden können. Nach Öffnen der App gelangt man also direkt zum Startscreen. Hier sind alle Infografik-Kategorien in Kärtchen-Optik aufgelistet. Es wird sofort deutlich, dass man durch Scrollen nach unten weitere Kategorien sieht. Wenn man auf der Suche nach einer bestimmten Infografik ist, dann kann man diese auch über die Filterfunktion suchen. Es kann nach Familie, Funktion und Form gefiltert werden. Die Visualisierung der Filter haben wir mit Bubbles gelöst, so können sie jederzeit wieder einzeln gelöscht werden. Klickt man auf eine Kategorie, erscheint ein untergeordneter Screen mit einer genauen Beschreibung der Kategorie, dem Konfigurator und Beispiel-Visualisierungen. Den Konfigurator kann man über das Stift-Icon öffnen. Hier erscheint in einem kleinen Popup nach unten eine Tabelle, in der man seine eigenen Daten eingeben kann. Die Anpassung erfolgt natürlich live auf der oben dargestellten Infografik. Man kann die konfigurierte Grafik dann herunterladen oder teilen.

Fazit zu Aufgabe 03

Die Aufgabe war eine gute Übung, um unsere Fähigkeiten in Sketch auszubauen. Wir haben außerdem gelernt, wie aufwendig das Konzipieren und Gestalten einer App ist und dass die Vorstellungen zweier Designer nur mit Kompromissen zusammenzuführen sind.

Wir konnten uns schnell auf ein Thema einigen. Die konzeptionelle Phase hat sehr lang gedauert, da wir das Grundgerüst selbst erst einmal verstehen mussten. Für die grafische Umsetzung haben wir uns zusammengesetzt, da wir durch den direkten Austausch am schnellsten vorankamen. Hier war unser Problem, dass wir zwischendurch etwas zu weit in die individuelle Gestaltung gerutscht sind und wir uns durch das Feedback im Kurs eingestehen mussten, dass einige Standard-Icons immer noch am besten zu verstehen sind. Insgesamt sind wir mit dem Ergebnis und unserer Teamarbeit zufrieden. Allerdings könnte man über weitere Funktionen der App diskutieren und sie noch weiter ausbauen.

Aufgabe 04 - Informationsvisualisierung zu einem komplexen Sachverhalt

Aufgabenstellung

Bei dieser Aufgabe sollte in Einzelarbeit eine Visualisierung ohne Wörter und Zahlen für einen komplexen Sachverhalt erarbeitet werden. Wichtig war es also, die Grafiken so selbsterklärend wie möglich darzustellen.

Bearbeitung

Ich wollte ein aktuelles Umweltthema visualisieren, weshalb meine Wahl am Anfang auf „Palmölproduktion und die Auswirkungen auf die Umwelt“ fiel. Ich recherchierte viel zu dem Thema und begann ein komplexes Schaubild zu zeichnen. Da dies allerdings der Aufgabe nicht gerecht wurde, kreierte ich in der nächsten Woche eine Flowmap, zuerst mit Worten gefüllt. Dabei fand ich kein Ende, weil jede Folge eine weitere Auswirkung mit sich brachte. Ich musste also das Thema weiter eingrenzen. Die finale Ausarbeitung zeigt den Anbau einer Monokultur (am Beispiel von Ölpalmen) und seine Auswirkung auf den Boden. Da ich keine einfachen Icons verwenden wollte und diese auch nicht wirklich zum Thema passen, entschied ich mich für eine aufwendigere Gestaltung mit einem immer gleichen Boden-Ausschnitt, der sich im Laufe der Zeit sichtlich verändert.

Fazit zu Aufgabe 04

Insgesamt war die Aufgabe sehr herausfordernd, aber durch das Kursfeedback lösbar. Wichtig hierbei ist es Außenstehende zu befragen, da man seine eigenen Ideen natürlich immer versteht, aber Betrachter z.T. eine andere Interpretation der Dinge haben. Die grafische Darstellung ist leicht verständlich, was besonders durch den immer gleich bleibenden Ausschnitt gewährleistet wird. Ein einheitlicher Stil rundet das Design ab. Für die Gestaltung wurde ausschließlich Adobe Illustrator verwendet.

Persönliches Fazit zum Kurs

Kurz gesagt: Ein toller Grundlagenkurs, der einen vielfältigen Einblick in die Welt des Interface Designs gibt. Er ist sehr bereichernd und interessant gestaltet. Vor allem die Feedbackrunden und die Zwischenpräsentationen waren hilfreich. Mir persönlich haben die Aufgaben 2 und 4 besonders gut gefallen, weil sie für mich ganz neu und außergewöhnlich waren.