Digitales Buch // Screen Typografie

Aufgabe

Es soll eine digitale Fassung Ihres Lieblingsbuches gestaltet werden. 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 mindestens vier Screens in zwei verschiedenen Formaten vorgestellt werden - mindestens zwei horizontale Screens im Format von 1024 x 768 Pixeln (XGA) und mindestens zwei vertikale Screens im Format von 240x320 Pixeln (QVGA).

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.

Konzeption und Umsetzung

Als Vorlage diente das Buch „Crafted Meat: The new meat culture: craft and recipes“ von Hendrik Haase aus dem Gestalten Verlag. Das Buch setzt sich mit der nicht-kommerziellen Schlachtung von Tieren und der Weiterverarbeitung von Fleisch auseinander. Großer Schwerpunkt liegt inhaltlich dabei auf dem bewussten Umgang mit dem Produkt Fleisch und dem Handwerk der Metzgerei.

Bei der Umsetzung musste also darauf geachtet werden, dass besonders dieser Aspekt nicht verloren geht.

Begonnen wurde mit der Umsetzung der mobilen bzw. kleinformatigen Screens. So wurde sichergestellt, dass die unterschiedlichen Seiten in der Tablet- bzw. Medium-Skalierung ebenso funktionierten.

In der Tablet-Ansicht kamen noch ein größeres Inhaltsverzeichnis hinzu, dass sich an dem aus der Buch-Vorlage orientierte. Der Schwerpunkt lag hierbei auf den Vielfalt des Inhalts.

Als grundlegendes Gestaltungsmittel wählten wir große Bilder und minimalistische Type-Fonts, um den Fokus nicht vom Handwerk und den Prozessen zu nehmen.

Die Farben bleiben zurückhaltend. Schrift und Navigationselemente sind in schwarz, weiß und grau gehalten. Die Farbwelt wird vom jeweiligen Inhalt bzw. der jeweiligen Bildwelt bestimmt.

Klangbild // Datenvisualisierung

Aufgabe

Es soll eine aufgezeichnete akustische Begebenheit 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. Die Audio-Dateien für die akustischen Begebenheiten werden im Kurs zufällig verteilt und sind offen für inhaltliche und visuelle Interpretation

Konzeption und Umsetzung

Den Klang analysiert ich zu Beginn analog. Durch Skizzen versuchte ich den Charakter des Tons zu erfassen. Schnell wurde deutlich, dass es große Unterschiede zwischen Nähe und Ferne bzw. lauteren und leiseren Tönen gab. 

Dieses Attribut verwendete ich als Grund-Idee für die Visualisierung des Klangbildes.

Die Spitzen der Lautstärke filterte ich händisch mit der Hilfe von Adobe Audition heraus.

Die Minute bzw. 60 Sekunden wurden mit einer Wand aus Zylindern in Cinema 4D visualisiert. Eine senkrechte Reihe steht für eine Sekunde und ein Zylinder für ein Zehntel einer Sekunde. Somit ergab sich ein Objekt aus 60 mal 10 Zylindern.

Die herausgefilterten Daten konnten so aufgrund des Koordinaten-Systemaufbaus im Programmes auf die Zylinderwand übertragen werden.

Jeder hervorstehender Zylinder stellt somit ein Lautstärken-Maximum dar. Je weiter der Zylinder von der Wand entfernt ist, desto lauter der Ton in der Aufnahme. Um diesen Wert noch mehr hervorzuheben, wurden die Werte mit einem glänzend chromartigen Material versehen.

GUI // Graphic User Interface

Aufgabe

Es soll ein Inspirations-App für das iPhone realisiert werden. Das App soll also eine Gruppe von Designern / Entwicklern bei der Generierung von Ideen, Einfällen und Entwürfen unterstützen. Dabei können assozia tive Ansätze genauso verfolgt werden wie strukturelle und systematische. Die genauen Funktionalitäten können in der Konzeptphase entwickelt werden. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr.

Das Ziel ist, einen Entwurf zu erarbeiten, der sowohl den üblichen UI- Standards (iOS oder Android / Material Design) entspricht, aber trotzdem individuelle Züge trägt. Es ist sinnvoll, sich für den Entwurf auf eine Bildschirm-Aufösung festzulegen. Zusätzlich zum Entwurf soll ein Programmablaufplan (Bewegungspfade durch die App) skizziert werden.

Konzeption und Umsetzung

Die App sollte bei der Sammlung von Ideen und Informationen helfen. Schnell entwickelte sich die Idee zu einer Kunstsammler-App für Kulturinteressierte.

Die Grundidee lehnt sich dabei an das „Shazam-“ bzw. Musikerkennungsapp-Prinzip. Will der User mehr über ein Kunstwerk und dessen Künstler erfahren, kann er das durch die Bilderkennung der Anwendung. Es kann ein Foto vom jeweiligen Werk gemacht werden, die Software erkennt das Bild und erstellt eine Liste mit Informationen, die dem User zur Verfügung gestellt wird.

Die Idee wurde im Laufe des Produktionsprozesses noch weiter vereinfacht. Die Bedienung sollte simpel und übersichtlich sein ohne allzu viele Elemente oder unnötige weitere Unterseiten.

Als vorherrschende Farbe entschieden wir uns für ein Violet, welche durch ihren Charakter den kreativen Grundgedanken der Applikation unterstützt jedoch weitestgehend in den Hintergrund rückt und den Fokus nicht von den Werken und ihren Künstlern nimmt.

Die Bilder verteilen sich im Layout großflächig, da sie als Hauptattraktion im Zentrum der Anwendung stehen. 

Der Schriftcharakter in der gesamten App ist einfach, schlicht und geradlinig. Nur der Startscreen sollte einen ersten Eindruck für den User bereithalten und wurde aus diesem Grund mit einer Variation einer klassizistischen Antiqua gestaltet.

1000 Wörter // Semiotik

Aufgabe

Es soll ein komplexer Sachverhalt gesucht und in einem Schaubild 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 es 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.

Konzeption und Umsetzung

Ich versuchte den Prozess der Setzling-Vermehrung eines Chinesischen Geldbaumes (lat. Pilea peperomioides) in einem Schaubild zu illustrieren.

Da das Thema der Pflanzenvermehrung eher niederkomplex schien, wurden noch weitere Infos zur Pflanze allgemein recherchiert.

Mit ersten Skizzen versuchte ich mich dem Thema und den darzustellenden Sachverhalten zu nähern.

Die größte Herausforderung bestand darin, Kausalitäten wie die Länge eines Tages bzw. eines Monats, Temperatur, Wassermengen etc. darzustellen. Zudem musste entschieden werden, wie der Prozess allgemein dargestellt werden sollte.

Schlussendlich fiel die Entscheidung auf ein extremes Querformat. In einer Legende werden Monate und Größen zunächst erklärt. So konnte im unteren Bereich der Grafik eine Zeitachse eingefügt werden, welche einen genauen Überblick über den Pflanzenzyklus gibt.

Um dem Betrachter einen Referenzwert für die Größenverhältnisse und Entwicklungsschritte zugeben, sind die ersten drei Wachstumsphasen in jeweils drei gleich großen Töpfen. Wurzeln und Setzling entwickeln sich jedoch weiter. Der Betrachter bekommt einen genauen Einblick in Wurzelwerk und die äußere Entwicklung der Pflanze.

Setzlinge bzw. junge Pflanzen werden in helleren Grüntönen dargestellt, um sie zeitlich und optisch besser abzuheben. 

Am Ende steht der Setzlinge wie zu Beginn des Zyklus'. Verdeutlicht wird somit der erneute Beginn einer Wachstumsphase.