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 Dokumentation des Kurses Basics Interface Design im WS 2011 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.
Umsetzung
Das Buch „Lost Moon“ von Jim Lovell und Jeffrey Kruger erzählt die Reise der Apollo 13, ein Raumschiff auf der Reise zum Mond, und wie eine Explosion an Bord, das Leben der Raumfähre und der Astronauten gefährdet. Wir haben versucht bei der Umsetzung des Ebooks den Stil der damaligen Zeit, an Beispiel des Bordbuchs, und den Stil des Buches, in Form der blauen Umrandung, widerzuspiegeln. Das Ebook entstand in Zusammenarbeit mit Thomas Petrach.
Als Navigation fungiert einzig eine Leiste am unteren Bildschirmrand. Hier zeigt ein blauer Slider die aktuelle Position im Buch an und durch verschieben des Sliders kann zu anderen Seiten oder Kapiteln gewechselt werden. Sobald der Slider „gegriffen“ wird zeigen blaue Stellen an der Leiste die nächsten Kapitel an, zusätzlich erscheint darüber eine Kapitelanzeige und die aktuelle Seitenzahl. Rechts oben können Bildschirmhelligkeit und Schriftgröße verändert werden. Fotos und die dazu gehörige Bildunterschrift füllen im Buch immer eine komplette Spalte aus. Durch doppeltippen auf das Bild wird es bildschirmfüllend angezeigt. Als Schrift diente uns die PT Serif, für Bildunterschriften wurde die Courier 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 Kon- zeptphase entwickelt werden. Die Applikation kann unter Umständen über das technisch Machbare hi- nausgehen - 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 wer- den. Die Entwürfe sollen 320 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle. Zusätzlich zur GUI soll ein Programmab- laufplan (Flowchart) skizziert werden.
Umsetzung
Die App legt den Fokus auf Brainstorming unterwegs. Der Ausgangspunkt ist eine Mindmap. Diese kann über den „Share“ Button mit anderen Mitgliedern des Brainstorms geteilt werden. Somit haben alle Mitglieder Zugriff auf die Mindmap, können sie verändern oder über Video/Text direkt in der App in Verbindung mit ihren Kollegen bleiben.
Die App besteht aus einer Tableiste mit vier Optionen. Mindmap, Chat, Skype und Settings. Hinter dem Ersten verbirgt sich die Liste aller Mindmaps. Durch antippen können diese verändert werden. Der Blaue Punkt zeigt Veränderungen an, die durch andere Mitglieder der jeweiligen Mindmap getätigt wurden. Oben rechts können Neue angelegt werden und oben links können durch „Edit“, Mindmaps gelöscht oder verschoben werden.
Innerhalb der Mindmap können neue Blasen über Doppeltippen auf eine schon vorhandene Blase erstellt werden. Mit Drag&Drop können die Blasen angeordnet werden. Pinch & Zoom verschafft mehr übersicht. Durch schütteln des Gerätes wird in der Mindmap-Hierachie um einen Schritt zurück gegangen.
Durch Tap & Hold auf eine Blase erscheint das Kontextmenü. Hier können einzelnen Blasen bestimmte Farben zugeordnet werden. Über den „Share“ Button oben rechts wird das Share-Menü aufgerufen. Hier können Mitglieder zum Brainstorm hinzugefügt werden. Alle Mitglieder können die Mindmap nach belieben verändern oder erweitern.
Im Chat können die Mitglieder des jeweiligen Brainstorms in Kontakt bleiben. Zugehörig zu jeder Brainstorm Session gibt es einen Nachrichten Thread. Alle Mitglieder können Nachrichten an die Gruppe versenden. Neben dem Titel des Threads werden die Personen, die zu diesem Chat gehören angezeigt, oder wenn nicht genug Platz ist, die Personenanzahl.
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
Wie auch schon im der Ebook Aufgabe greift das Klangbild wieder die Reise der Apollo 13 auf. Der Soundclip zeigt den Zeitpunkt an dem an Bord des Raumschiffs die Explosion eines Sauerstofftanks stattfindet. Zuvor kommuniziert die Crew mit Huston. Ich habe das Audio in 3 verschiedene visuelle Spuren aufgeteilt: Houston (die Mannschaft am Boden), Odyssey (die Kommandokapsel der Apollo 13, und ihre 3 Astronauten: Jim Lovell, Fred Haise und Jack Swigert) und Hintergrundgeräusche (Explosion und Rauschen in der Leitung). Houston wir rot dargestellt, die Odyssey blau und die Hintergrundgeräusche weiß in der Mitte.
Hier der dazu gehörige Soundclip: (ab 0:45)
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
Dieses Projekt entstand in Zusammenarbeit mit Henrik Hagedorn. Gemeinsam entschieden wir uns für das Thema Pubertät. Jeder Mensch muss irgendwann einmal durch. Körperliche und geistige Entwicklung mit Hochs und Tiefs zwischendurch.
Wir beschrieben 3 Wege, wie eine Pubertät verlaufen kann.
Einmal der Musiker: Nachdem er über Videospiele hinweg ist kommt er über die Liebe zur Musik zu seinem eigenen Instrument hin zur eigenen Band, die Frauen liegen ihm zu Füßen, doch plötzlich passiert ein Schicksalsschlag: seine Mutter stirbt. Er fällt in ein Loch, versucht sich an Zigaretten und stirbt schlussendlich an Drogen.
Der Zweite ist eher ein Langweiler. Im Alter zwischen 12 und 16 passiert nichts nennenswertes, mit 16 hat er aber endlich seinen ersten Kuss. Kurz darauf besteht er die Führerscheinprüfung und hat dann sein erstes mal.
Der dritte Weg fängt schlecht an. Nachdem er wegen Videospielen die Schule vernachlässigt, bekommt er Hausarrest. Bald jedoch hat seinen ersten Kuss und mit knappen 15 sogar schon sein erstes Mal. Doch er fängt alsbald an mit Alkohol, Zigaretten und Drogen zu experimentieren und bald stirbt auch er.