1. Digitales Buch

In einem Team aus zwei Personen erarbeiten wir anhand von zwei unterschiedlichen Bildschirmformaten 1024 x 768 px und 240 x 320 px ein Konzept, um ein Buch unserer Wahl auf die digitale Ebene zu übertragen. Eine besondere Herausforderung stellt dabei, die uns zur Verfügung stehende Fläche der anzulegenden Formate und deren visuell erkennbare Grenze dar. Ein weiteres und wichtiges Element ist die Schriftgestaltung und deren Wirkung auf den Betrachter. Ist sie harmonisch? Passt sie zum Thema und ist sie gut lesbar?

Unter diesen Gesichtspunkten entwickeln meine Team-Partnerin und ich eine Struktur, wie das Kochbuch Goodbye Zucker von Sarah Wilson, digital ansprechend und gut gestaltet funktionieren kann. Kann man Haptik ersetzen? Kann ein digitales Buch durch Interaktion vielleicht viel reizvoller sein? Diese Frage stellte ich mir persönlich, während dieser Aufgabe.

Was macht das Buch aus?

Bei der ersten Präsentation zeigen wir grobe Skizzen und Elemente aus dem analogen Buch. Unser Ziel war es das bestehende freundliche Design und den Charakter der filigranen Illustrationen zu erhalten. Bei der Schriftwahl haben wir uns für die klare und gut lesbare Fira Sans entschieden. Sie wirkt harmonisch und ist auch auf dem kleinen Format am Bildschirm gut zu erkennen. Hier bestand die Aufgabe aus den Inhalten einen Schwerpunkt zu entwickeln, der die Vielfältigkeit des Buches widerspiegelt.

Vom Analogen ins Digitale

Für einen Eindruck der Struktur, welches uns das Buch vorgibt, legen wir jeweils mindestens drei Screens an.

1. Den Startscreen vergleichbar mit dem Buchcover,
2. ein Screen zur bestehenden Rezeptauswahl, dem Inhaltsverzeichnis nahe liegend und
3. ein Screen mit einem ausgewählten Rezept mit allen notwendigen Zutaten und deren Zubereitung, welches einer aufgeschlagene Doppelseite im Buch entspricht.

Der Fokus liegt hier bei den gestalterischen Elementen und deren harmonische Wirkung im Zusammenspiel mit dem Bildschirmformat, weniger auf Funktionalität der Navigation.

Herausforderung und Wirkung

Am Ende erwies sich das kleine Bildschirmformat als komplex heraus, weil die Darstellung visueller Elemente hier schwierig war und eine klare typografische Lösung mit weniger Inhalt für den Betrachter angenehmer ist. Reduktion und eine klare typografische Linie sind aber für beide Formate notwendig.

Ein Kochbuch digital zu gestalten und nutzbar zu machen stellt andere Vorraussetzungen, als ein gedrucktes Buch im Bücherregal. Für das Interface Design ist eine benutzerfreundliche Gestaltung und die intuitive Nutzung eine optimale Chance neue Wege des Kochens zu gehen.

2. Graphical User Interfaces (GUIs)

Welches Tool kann für Designer als Mobile Application hilfreich sein? Mit dieser Frage müssen sich alle Teilnehmer des Kurses vorab auseinandersetzten. Ziel ist es Benutzeroberflächen so zu gestalten, so dass diese intuitiv genutzt und verstanden werden.

Meine Team-Partnerin und ich hatten sofort eine Idee. Farbharmonien sind in der täglichen Arbeit als Designer wichtig. Oft werden schnell Farben gebraucht, die zu einer bestimmten Leit- bzw. Hausfarbe passen. Farbinspirationen holen wir uns aus der Natur, unserer Umgebung, mit unserer emotionalen Stimmung – einfach aus unserem Alltag. Eine schnell zu bedienende App für mobile Geräte kann hier Abhilfe schaffen und auch für den (Nicht)Designer sehr nützlich sein.

Wir entschieden uns für die Gestaltung einer Android App. Bestimmte systemrelevanten Funktionen und Benutzereigenschaften sind dabei zu berücksichtigen. Wir setzen dabei das Interface Design unter Berücksichtigung von Material Design Vorgaben für Android und bedingt durch unterschiedliche Betriebsysteme in unterschiedlichen Programmen um. Ich arbeite mit Sketch, meine Partnerin in Adobe XD. Zur Arbeitsaufteilung setzten wir die Elemente und Screens getrennt voneinander um, was aus organisatorischer Sicht für mich am Besten funktionierte, aber nicht den Idealfall entspricht. Zuerst skizzieren wir unsere Screens und entwickeln erste Ideen für die Icons. Später erstelle ich die Icons in Illustrator für die App und optimiere diese für das Material Design von Android in Sketch. Außerdem entschieden wir uns für ein User App Manuel in Form von fünf Screens. Sobald die App das erste Mal geöffnet wird, kann der Benutzer sich kurz über die Funktionalitäten der App informieren. Meine Team-Partnerin erstellt alle anderen notwendigen App-Oberflächen. In gemeinsamen Treffen und Absprachen führen wir unsere Arbeiten zusammen. Wir nennen unsere App Paletti.

Diese App sollte folgende Möglichkeiten der Erstellung von Farbpaletten beinhalten:

Durch Inspiration

Mit der Installation der App werden eine Auswahl an Abbildungen als Datensatz mitgeliefert. An dieser Stelle kann der Nutzer sich ein bestimmtes Motiv aussuchen und auf die dazugehörige Farbpalette zugreifen.

Vom Foto und Kamera

Ist man unterwegs und benutzt die Fotofunktion eines Smartphones, kann die App Paletti auf die Kamerafunktion zugreifen und sich aus den erstellen Fotoaufnahmen mit Hilfe einer Pipette bestimmte Farbbereiche auswählen. Es stehen dabei mindestens fünf Farbfelder zur Verfügung, die bis zu zehn Farbfelder erweitert werden können.

Aus Materialfarben

Ein sehr wichtiges Tool für den professionellen Umgang mit Farben, ist die Möglichkeit aus Materialfarben auszuwählen. Aus den wichtigsten Spektralfarben kann eine Farbe ausgewählt werden, die dann in Form von linearen Helligkeitsstufen mit dem entsprechenden Hexadezimalwert dargestellt wird und auswählbar ist. So kann der Benutzer sich verschiedene Farben zusammenstellen.

Vom Farbwähler

Eine integrierte Farbpalette ist der einfachste Weg eine persönliche Farbpalette zu kreieren. Aus einem Farbspektrum kann der Benutzer mit Hilfe der Farbpipette einen Farbbereich auswählen und sich die entsprechende Farbmodi HEX, RGB und CMYK anzeigen lassen.

Durch Zufall

Durch zwei Symbole kann ich mich entscheiden, ob ich die Farbe zu meiner Farbpalette hinzufügen möchte oder mir eine neue zufällige Farbe anzeigen lasse. Mittelachsig im Screen wird dabei die entsprechende Hexadezimale Farbdefinition des Farbtons angezeigt.

Außerdem ist vorgesehen, sich über die Toolbar der App ein eigenes Profil anlegen zu können. Hierzu zeigen wir eine Möglichkeit eines beispielhaften Benutzerprofils. In ihm sind persönliche Angaben, wie Name, Lieblingsfarben und Favoriten des Benutzers zu erkennen. Farbpaletten mit anderen zu teilen macht den großen Vorteil einer schnellen gemeinsamen Arbeit im Team oder unter Freunden möglich.

3. 1000 Worte

Mit Hilfe von Schaubildern werden oft auf internationalem Wege komplexe Abläufe erklärt, ohne dabei Schriftzeichen zu verwenden. So können auch Menschen ohne das Alphabet zu verstehen den Abläufen folgen. Inhaltsvermittlung ohne Schriftzeichen war unsere dritte Aufgabe, einen komplexen Sachverhalt aus dem Alltag, der Umwelt oder aus einem anderen Bereich in Form einer Grafik darzustellen. Ohne erklärbare Beschreibung, Ziffern oder anderen unterstützenden Zeichen sollte die Grafik selbsterklärend sein. Interessant war, wie viele Teilnehmer sich dem Umweltthema widmen, aber auch so komplexe Abläufe, wie der Käseherstellung ließen die Präsentationsrunden der Teilnehmer spannend werden. Das Thema Verschmutzung der Meere durch Plastikmüll und deren vielfältige Auswirkungen auf das so sensible Ökosystem für unzählige Lebewesen, war gleich mehrmals vertreten.

Thematische Auseinandersetzung

Grundlage die Aufgabe zu lösen, ist eine umfangreiche Auseinandersetzung mit dem Thema. Verläufe und Prozesse müssen klar verstanden werden, um diese in eine grafische Abbildung zu transformieren. Auch alternative Wege sollten dabei in Erwägung gezogen werden, um den Betrachter in eine bestimmte Richtung zu lenken, um ihm die Orientierung zu erleichtern.

Umsetzung und Intentionen

Meine Illustration zeigt einen vertikalen Ausschnitt von der Landoberfläche bis zu den verschiedenen Ebene der Meerestiefen und deren Lebewesen. Als linearer Verlauf wird der Weg der für Pflanzen, Tieren oder Menschen schadender Stoff Plastik bis in die untersten Zonen im Meer anschaulich gemacht.

Die globale Plastikverschmutzung hat verschiedenste Auswirkungen auf marine Organismen. Einmal als physikalische Belastung durch mögliches Verheddern und orale Aufnahme, zweitens aber auch als Veränderung des Lebensraums. Des Weiteren kann das Absinken von Plastikmaterial auf den Meeresboden enorme Konsequenzen mit sich bringen.

Mein Ziel ist es eine ansprechende Illustration zu schaffen, die in ihrer Ästhetik, die Schönheit des Meeres und deren Lebewesen den Betrachter einfängt und doch die Zerstörung durch das Verenden der Tiere durch Fischnetze und den Prozessen, wie das Zersetzen in Mikroplastik ect. sichtbar macht.

Welche Folgen das am Ende für die Menschen hat, lasse ich dabei bewusst offen. Das Schaubild soll zum Nachdenken anregen und logische Schlüsse durch die eigene kognitive Verarbeitung erzeugen und nachhaltig unser Verhalten mit Plastik hinterfragen.

Das die größte Fläche in meiner Grafik die Unterwasserwelt zeigt, spiegelt auch die Verhältnismäßigkeit zwischen dem Lebensraum oberhalb und unterhalb des Meeresspiegels wider.

Einschätzung

Insgesamt war die Herstellung der Grafik so zeitintensiv, dass das ein oder andere Detail nicht optimal umgesetzt ist und damit nicht einfach zu erkennen ist. Außerdem bietet sich eine Unterteilung der Grafik in mehreren Teilen an, damit der Betrachter alle Zusammenhänge zugleich gut erfassen kann.

Fazit

Der Kurs hat ein breites Spektrum der digitalen Gestaltung und deren Einsatzmöglichkeiten aufgezeigt. Die Gruppenpräsentationen haben eine große Auswahl an unterschiedlichen Ideen hervorgebracht. Das besonders Schöne für mich war, sich auszuprobieren, sich inspirieren zu lassen und Feedback zu erhalten. Außerdem ist mir klar geworden, wie wichtig gute Gestaltung im gesellschaftlichen Kontext ist. Als Designer hat man auch eine Verantwortung inhaltlich und kompetent zu agieren, das heißt auch gut zu präsentieren. Nicht gute Gestaltung kann im schlimmsten Fall zu Unfällen oder Fehleinschätzungen führen. Wie wichtig es ist die Komplexität von Schriftgestaltung, Form-, Flächenwirkung und Kontrast zu verstehen – ein gutes Auge für Gestaltung zu entwickeln, die optimale visuelle Sprache zu finden. Ich finde es eine wundervolle Aufgabe. Als Studentin der Medienwissenschaft schaue ich gerne hinter die Kulissen, aber unabhängig von den Projekten war der Austausch untereinander der größte Gewinn. Ich würde diesen Kurs daher sehr empfehlen, um sich ein Bild über die Vielfältigkeit des Interface Design zu verschaffen.