Aufgabe 01 - Digitales Buch

Aufgabenstellung

Die erste Aufgabe bestand darin, ein schon publiziertes Buch zu zweit in eine digitale Anwendung zu übersetzen. Die Bildschirmgröße war auf 240px x 320px und auf 1024px x 768px vorgegeben. Der Fokus lag auf einer adäquaten Gestaltung von typografischen Elementen.

Bearbeitung

Zusammen mit Benjamin Cierpiol fiel die Entscheidung schnell auf das Design-Sketching Buch «How to Draw» von Scott Robertson.

In dem Buch erhält der Leser Kapitel für Kapitel kleine Aufgaben, um am Ende perspektivisch korrekte Sketchings erstellen zu können. Die App soll vor allem den Charakter eines Tutorials stärker in den Vordergrund rücken, sodass eine Aufgabe erst erledigt werden muss, bevor die nächste beginnt. Elemente wie Fortschrittsbalken, Hinweise auf bereits bearbeitete Aufgaben in Kombination mit einem sehr reduzierten Design waren das definierte Ziel.

In dem Buch wird die «Futura» verwendet. Für die digitale Übersetzung wird sie wegen ihrer breiten Laufweite durch die «DIN 2014» ersetzt. Sie bleibt auch auf kleinen Bildschirmen gut lesbar und besitzt eine präzise Formensprache, die einerseits zu dem reduzierten Design passt, aber auch das Thema des Buches typografisch unterstützt.

Die rote Linie, die im Buch als grafisches Schmuckelement auftaucht, erhält in der App eine Funktion. Sie zeigt zum Einen den bisherigen Verlauf des Nutzers an und wenn sie innerhalb der Lektionen nach oben gezogen wird, erhält der Nutzer die nächste Aufgabe angezeigt.

Fazit zu Aufgabe 01

Das zuvor definierte Ziel wurde mit «Sketch» unter formal ästhetischen Gesichtspunkten zu einem Großteil erreicht. Allerdings hätte der Mikrotypografie mehr Beachtung geschenkt werden müssen. So erscheint in dem Menü der kleinen Bildschirmgröße die «DIN 2014 Italic» sehr pixelig und damit unleserlich. Auch die Absätze und Abstände zu grafischen Elementen sind zu unregelmäßig und hätten harmonischer gestaltet werden müssen.

Aufgabe 02 - Klangvisualisierung

Aufgabenstellung

In Einzelarbeit sollte eine zufällig zugewiesene Tonaufnahme in ein Klangbild umgesetzt werden. Wichtig dabei war, keine generative Gestaltung zu erzeugen, sondern die Daten zu analysieren und in einen nachvollziehbaren Kontext zu setzen. Nach der bearbeiteten Aufgabe wurde bekannt, dass alle Aufnahmen dem Projekt «Firenze Sound Map» von der Künstlerin Dr. Antonella Radicchi zuzuordnen ist.

Bearbeitung & Fazit

«Titel 65» wurde auf einem Markt aufgenommen. Es fand eine intensive Auseinandersetzung mit allen identifizierbaren Geräuschen statt, um die Töne in der Visualisierung in einen sinnvollen Zusammenhang zu bringen. So zeigen abgerundete Ecken der schwarzen Balken an, wann ein Geräusch beginnt oder aufhört. Hat ein Balken ein spitze Ecke, so wird dasselbe Geräusch wenig später weitergeführt, da es zu diesem Zeitpunkt von etwas anderem übertönt wird. Übersteuerungen des Mikrofons nehmen die ganze Fläche der Grafik ein und sind farblich anders gekennzeichnet. Der mittlere durchgängige Balken repräsentiert Hintergrundgeräusche, die nicht näher identifiziert werden können. Oberhalb sind unterschiedliche Stimmen und Stimmlautstärken dargestellt, während unterhalb des Mittelbalkens anorganische Geräusche zu sehen sind.

Fazit zu Aufgabe 02

Ohne Legende lassen sich die verwendeten Sounds visuell nicht gut voneinander unterscheiden, weshalb eine weitere Abgrenzung zum Beispiel in der Lautstärke gut getan hätte. In der Gesamtbetrachtung wird jedoch ein genaues Bild der unterschiedlichen Tonabfolgen ansprechend dargestellt. Für die Analyse der Aufnahme und die Gestaltung des Klangbilds wurde «Adobe Audition» und «Adobe Illustrator» verwendet.

Aufgabe 03 - Graphical User Interface (GUI)

Aufgabenstellung

Die dritte Aufgabe wurde wieder zu zweit bearbeitet. Es sollte eine Benutzeroberfläche für eine Inspiration-App gestaltet werden. Im Vordergrund stand hier ein leicht zu verstehendes Interaktionskonzept.

Bearbeitung

Jede Internetseite, jedes Onlinevideo und jeder Blogartikel bekommt Metadaten - die Tags. User sammeln für sich über Jahre hinweg wertvolle Informationen in Playlisten oder durch Likes in sozialen Netzwerken. Die Idee bestand darin, mittels Tags nach schon gespeicherten Informationen aus den eigenen Kanälen zu suchen. Diese werden im Anschluss durch den User gefiltert, um die Ergebnisse mit anderen auszutauschen. Dadurch wird eine gemeinsame Basis durch Bekanntes und Unbekanntes geschaffen, um neue Ideen zu generieren.

In der Konzeptionsphase zusammen mit Stefanie-Jane Apitz wurden Ideen und Papierentwürfe schnell diskutiert und es fand ein reger Austausch statt. Aufgrund zunehmender zeitlicher Dissonanzen, wurde die Aufgabe vor der Zwischenpräsentation in Einzelarbeit fortgesetzt.

Fazit zu Aufgabe 03

Die Umsetzung fand zum ersten Mal in «Adobe XD» statt und war auf iOS ausgelegt, auch wenn sich im Nachhinein betrachtet, die meisten grafischen Elemente von den Guidelines lösen. Der Schwerpunkt wurde zu sehr auf den Funktionsumfang der App gelegt als auf die Gestaltung der Funktionalität und der Optimierung der User Journey.

So war die Ideenphase zwar sehr explorativ, jedoch fehlte anschließend die Fokussierung auf bestimmte Steuerelemente, um den Kern der App darzustellen. Die Ergebnis- und Teilen-Screens hätten viel mehr Aufmerksamkeit gebraucht, da sie nicht herausstechen und so grafisch ein Ende des Suchprozesses einleiten. Die App bleibt erklärungsbedürftig.

Aufgabe 04 - 1000 Worte

Aufgabenstellung

Die Herausforderung bei dieser Einzelaufgabe bestand darin, eine Visualisierung für einen komplexen Sachverhalt zu erarbeiten, der ohne Worte erklärt werden soll.

Bearbeitung

Die Wahl fiel aufgrund der medialen Präsenz auf Bitcoin Transaktionen. Allerdings bestand die meiste Zeit darin, die Richtigkeit durch die häufig widersprüchlichen Quellen auf YouTube, Wikipedia und in anderen Blogartikeln zu bestätigen, da das Thema doch komplexer war als angenommen.

Ständig wurden beim Gestaltungsprozess missverständliche Darstellungen erzeugt und mussten dahingehend neu evaluiert werden. Schlussendlich war eine Reduktion und damit ein Verlust von Informationen unumgänglich.

Fazit zu Aufgabe 04

Insgesamt war es eine sehr herausfordernde Aufgabe, die nochmal mehr zeigt, dass selbst das Wissen über einen Sachverhalt nicht ausreicht, um ihn auch richtig darzustellen, denn jeder Mensch interpretiert Dinge anders. Die wiederholte Befragung von Unbeteiligten ist ein wichtiges Kriterium für eine erfolgreiche Infografik.

Die grafische Leistung ist dennoch gut gelungen, da sie einem einheitlichen Stil folgt. Die Leserichtung bleibt auch ohne Pfeile verständlich und die einzelnen Schritte behalten ihren eigenen Betrachtungsraum, ohne mit anderen Elementen zu interferieren. Für die Gestaltung wurde ausschließlich «Adobe Illustrator» verwendet.

Persönliches Fazit zum Kurs

Den Kurs fand ich im Rückblick sehr bereichernd, vor allem die eigenen Feedbackrunden und die Zwischenpräsentationen der anderen Kursteilnehmer waren hilfreich für das eigene methodische Vorgehen und das konzeptionelle Gestalten.

Die größte Herausforderung des Kurses war für mich die dritte Aufgabe, in die ich jedoch gerne viel Zeit und Kraft investierte. Rückblickend betrachtet, beschäftigen mich hierzu auch die meisten Fragen. Ich würde zum Beispiel gerne mehr darüber erfahren, welche UX/UI Parameter eine sehr gute User Journey ausmachen, sodass der Nutzer eine enge emotionale Beziehung zu einem Produkt und der entsprechenden Marke aufbaut?

Der Kurs bietet also eine sehr gute Grundlage, um sich nun über die reine Gestaltung von Interfaces hinaus mit diesem Thema zu beschäftigen.