In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Die Zusammenfassung meiner im Wintersemester 12/13 entstandenen Arbeiten für den Kurs Basic Interface bei Prof. Boris Müller.
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.
Was haben wir gemacht?
Die Aufgabestellung löste ich zusammen mit Kevin Zeller. Als Basis für das digitale Buch wählten wir „So wird's gemacht- Mercedes 200D/220D/240D/300D“. Es handelt sich dabei um eine ausführliche Anleitung zur Wartung, Pflege und Reperatur der alten Mercedes E-Klasse.
Die Aufgabe gliederte sich in drei Schwerpunkte: Erstens musste der Inhalt des Buches (Beispielhaft) in ein für ein digitales Medium sinnvolles Layout verpackt werden. Dann musste man darüber nachdenken wie man die neu aufbereiteten Inhalte, durch eine sinnvolle Navigation miteinander verknüpft und zu guter Letzt - aber mit am wichtigsten, sollten die Textteile mit einer bildschirmtauglichen Typografie versehen werden.
Für den ersten Punkt haben wir die Inhalte wie bei einer Website in eigenständige Unterseiten aufgeteilt und in einem vierspaltigen Raster neu angeordnet. Für den zweiten Punkt wurden diese in Kapiteln zusammengefassten Inhalte dann über eine jederzeit aufrufbare Navigationsleiste am linken Bildrand miteinander verknüpft. Um eine gute Lesbarkeit zu erzielen wurden die ursprünglich in der Helvetica gesetzten Texte in den Android-Font „Roboto“ übertragen und auf einem Grundlinienraster von 16Pt in 12Pt neu gesetzt.
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.
Als Vorlage für meine Brainstorm-App diente mir das klassische Ideenfindungskonzept der Morphologischen Matrix. Gedacht ist sie für wichtige Menschen, die aus verschiedenen Richtungen zu einem Meeting unterwes sind und schon vorher mit dem Ideenfindungsprozess beginnen wollen.
Zunächst startet ein Telnehmer ein neues Projekt zudem er die anderen via Telefonbuch einlädt. Sobald die gruppe fest steht startet ein gemeinsammer Chat. Ab diesem Punkt sind auch die zwei weiteren Ebenen der App aktiv - der Stichwortsammelabschnitt, sowie die Matrixübersicht. Die Teilnehmer fangen nun an, gemeinsam Oberkategorien zu entwerfen die in Hinsicht auf ihr Projekt sinnvoll sind. Im nächsten Schritt werden diese Oberbegriffe dann mit weiteren Stichwörtern gefüllt. Das geht so lange weiter bis man in der Gruppe der Meinung ist geügend Material gesammelt zu haben. An diesem Punkt kann das Ergebnis dann in diversen Formaten (bsw. PDF) ausgespielt werden und wenn man dann zusammen am Zielort eingetroffen ist, für den weiteren Kreativprozess verwendet werden.
Aufgabe
Es soll eine akustische Begebenheit (kein Musikstück!) 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. Einzige Einschränkung: es soll keine Bildschirmorientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.
Für diese Aufgabe wählte ich als Klang das Einfahrtsgeräusch einer S-Bahn. Das Kreisförmige Bild ist horizontal geteilt, wobei die obere Hälfte der Atmo (also den Umgebungsgeräuschen) und die untere Hälfte den Geräuschen der S-Bahn zuzuschreiben ist. Es ist eine Katastrophe und ich würde es hier gerne überspringen...
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 kommuniziert 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.
Bei dieser Aufgabe entschieden sich men Teamkollege Ron Leisner und ich dazu, ein Problemthema aufzugreifen. Wir analysierten den Ablauf der Palmölproduktion und der damit einhergehenden Problematiken. Das resultat unserer Recherchen brachen wir auf 6 Schritte runter und stellten es in einer dimetrischen Perspektive dar.