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 - Gitarrenbuch (Zusammenarbeit mit Corvin Weber)

Die Ergebnisse entstanden in Zusammenarbeit mit Corvin Weber.

Bei der Aufgabe ein Buch „app-tauglich“ zu gestalten, entschieden wir uns für ein Gitarrenbuch. Durch die ständige Kombination von Instrument und Gerät/Anwendung, die hier gefordert wird, setzten wir die Messlatte in den Punkten Klarheit, Flexibilität und Anregung von Anfang an hoch. Um diesen Anforderungen gerecht zu werden, rückten wir das Liederbuch-Verzeichnis und die Liedtexte in den Vordergrund und die Anwendungsfunktionen und -optionen etwas mehr in den Hintergrund.

Die Typografie war ein großes Thema bei unserer Arbeit, da uns schnell klar wurde, dass sich ein Scrollen während des Gitarrespielens als hindernd erweist und der Gitarrenspieler das gesamte Lied auf einmal einsehen können sollte. Nach langem Ausprobieren, wurde dem die Myriad Web Pro in 13 Pt. am meisten gerecht, da sie eine Schrift ist, welche man sowohl auf einem großen als auch auf einem kleinen Screen gut lesen kann. Um die Griffe vom Fließtext abzuheben, entschieden wir uns für die Seriefenschrift PT Serief in fett und 16 Pt., da der Gitarrenspieler seinen Fokus meist mehr auf die Griffe legt. Die Abstände zwischen Griffen und Liedtext und Strophe zu Strophe, mussten auch perfekt angepasst werden. Gerade auf dem kleinen Screen gab es das große Problem, dass der Fließtext niemals ganz ohne Versumbrüche auskommen würde, was wir allerdings durch einen Scrollbalken etwas besser lösen konnten. Da die Liederüberschriften in ihren Längen stark variieren können und wir Platz für Fließtext und Griffe sparen wollten, wählten wir bei der großen Variante den Condensed-Schnitt der Myriad Pro in 30 Pt. Wir konnten schnell feststellen, welch große Bedeutung Typografie, in einem Interface wie diesem, haben kann.

Uns hat es großen Spaß bereitet, über die verschiedenen Variaten der Nutzung eines Gitarrenbuches nachzudenken und somit haben wir recht schnell beschlossen, dass es für uns 3 wichtige Modi geben soll, welche dem Gitarrenspieler Flexibilität in der Nutzung seiner App gewährleisten soll. Die Auswahl dieser 3 Modi (Üben, Lagerfeuer und Straßenmusik), brachten wir beim großen Screen, rechts neben dem Lied an. Eine Grifftabelle und ein Metronom unterstützen den Gitarrenspieler wann immer er sie braucht und passen sich jedem Lied von selbst neu an.

Darüber hinaus war es uns sehr wichtig, das Design des Interfaces dem Design unseres Gitarrenbuches zu entnehmen. Somit ist es auf ruhigen und klaren Farben aufgebaut und bringt einen Ringbuchcharakter mit sich, indem beim großen Screen „Alphabetreiter“ und beim kleinen Screen eine Ringbuchbindung vorzufinden sind.

Die Navigation geht ganz klar von den Icons (in beiden Versionen vorhanden) und den Reitern (große Version) aus und erschließt sich dem Nutzer somit leicht.

Copyright

©Marie-Luise Schade

Große Version (1024 x 768)

Copyright

©Marie-Luise Schade

Kleine Version (240 x 320)

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 – Wolke

Das Konzept der „Wolke“ basiert darauf, Ideen, Wörter, Gedankenansätze etc. zu notieren und später daran weiter zu arbeiten. Interessant dabei ist, dass man schnell und einfach alle Einfälle aufgelistet hat und diese immer wieder abrufen kann. Die Idee zu einem neuen Thema wird mit dem Erstellen einer neuen Wolke im Anfangsscreen begonnen und dann innerhalb der Wolke durch hinzufügen von neuen Wörtern vervielfacht. Hierzu kann der User auch ins Internet gehen und sich neue Ideenansätze holen um diese dann in seiner Wolke abzuspeichern oder durch einen Klick Wörter hinzuzufügen. Es ist ein recht einfach gehaltenes Konzept, was jedermann bedienen können soll. Es war mir wichtig die Ideen in Form von Listen niederzuschreiben, denn meine Erfahrung mit Mindmaps sind weniger gut und ich denke in einer Liste kommt weniger Verwirrung von Anfang und Ende der jeweiligen Wolke auf. Ich habe bewusst einen leichten blau-grün Ton gewählt, da eine Wolke etwas leichtes und freies für mich darstellt und das Suchen und Finden von neuen Ideen nichts beschwerliches mit sich bringen sollte. Ich finde eine Brainstorm-App muss einen offenen Charakter haben und es sollte Spaß machen sie zu benutzen.

Aufgabe

Es soll eine akustische Begebenheit (kein Musikstück!) in einem Zeitra- ster 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 Bildschirm- orientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.

Umsetzung - Spülmaschinentöne

Für die Visualisierung meines Klangbildes wählte ich die Aufnahme einer Spülmaschine zu Beginn eines Spülgangs. Es beinhaltet unter anderem das Einlaufen des Wassers und das Drehen des Zahnrads hinter der Anzeigetafel einzelner Waschstufen. Ich habe versucht mein Klangbild formal so einfach wie möglich zu gestalten, da das Waschen einer Spülmaschine ebenfalls durch sehr eindeutige Töne geprägt ist. Bewusst wählte ich klare und gerade Formen, wie zum Beispiel einen gerade länglichen Strich für das Einlaufen des Wassers oder ein abfallender Strich, als Symbol für den Wechsel zu einer neuen, aber dennoch ähnlichen Tonebene innerhalb des Wasserrauschens. Das Klicken und somit Drehen des Zahnrads hin zum nächsten Waschgang, ist durch Punkte gekennzeichnet, welche zur gleichen Zeit mit dem Rauschen des Wassers wahrzunehmen sind. Ein kleiner waagerechter Stich symbolisiert eine kurze Unterbrechung im Waschgang. Auf ihn folgt eine ansteigende Verbindungslinie hin zu weiterem Einlaufen von Wasser. Dieser Wasserton am Ende, ist bewusst durch zwei zueinander parallel verlaufende Linien gekennzeichnet, da der Ton an dieser Stelle durch sehr viel stärkeres und lauteres Rauschen geprägt ist. Die Farben Weiß und Blau habe ich gewählt, da sie meiner Meinung nach gut zu dem Klangbild und der Formsprache passen.

Zusatz: es ist mir leider nicht möglich, die akustische Begebenheit zu präsentieren.

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 kommu- niziert 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 Herstellung von Whisky (Zusammenarbeit mit Sebastian Maschner)

Wir entschieden uns für die Herstellung von Whisky. Dabei mussten wir in zwei verschiedene Visualisierungs- beziehungsweise Inhaltsebenen unterteilen: Zum einen in die Mikroebene (biochemische Abläufe – obere Visualisierungsebene) und zum anderen in die Makroebene (Produktionsabläufe – untere Visualisierungsebene). Es war eine große Herausforderung, die biochemischen Abläufe verständlich darzustellen, denn dafür gibt es keine bereits bekannte oder gängige Symbolsprache. Jeder einzelne Schritt der biochemischen Abläufe, ist in der oberen „Zeile“ verdeutlicht und den Produktionsschritten übergeordnet. Wir haben in unserer Grafik bewusst darauf geachtet, die Mikroebene in der Vordergrund zu rücken, da wir schnell erkannten, dass hier der Fokus liegen sollte.

Der Kurs von Prof. Boris Müller nimmt einen weit über die Grundlagen des Interfacedesigns mit hinaus. Es gilt gestalterische Fragen und Probleme im digitalen Raum anzugehen, was für mich als Produktdesignerin ein ganz neues, aber auch sehr spannendes Feld ist. Die Diskussionen und wöchentlichen Präsentationen haben mir geholfen anfängliche Hürden überwinden zu können. Für den Aufbau des Kurses stelle ich mir vor, dass es vielleicht sogar interessant wäre, würde man nur zwei, statt vier große Kursaufgaben bearbeiten müssen. Somit hätte man mehr Zeit tiefer in ein Thema eintauchen zu können. Mich persönlich hat die Aufgabe „Klangbild“ am meisten interessiert und ich war von den Arbeitsergebnissen in der Gruppe fasziniert, sie hat mir aber auch die meisten Probleme bereitet, da sie ein völlig neues Denken von mir forderte.

Zusammengefasst ist es ein sehr bereichernder und lernintensiver Kurs, den ich jedem ans Herz legen möchte.