Basics Interface | Ulrike Thierbach
Der Kurs behandelte die Grundlagen des Interfacedesign.
Jede Aufgabe wurde im zufällig ermittelten Zweierteam bearbeitet.
(In Zusammenarbeit mit Janine Hofmann)
Aufgabenstellung
Hierbei ging es um die Gestaltung der digitalen Fassung eines Buches.
Dafür sollten exemplarisch zwei Screens im Format 1024x768 und zwei weitere im Format 240x320 angefertigt werden.
Layout und Navigation sollten benutzerfreundlich sein und zum Buch passen. Es wurde besonderen Wert auf den richtigen Umgang mit Typographie gelegt.
Umsetzung
Wir entschieden uns für das Buch »Die Kinder- und Hausmärchen der Gebrüder Grimm«.
Das Buch besteht aus vielen Märchen, die in beliebiger Reihenfolge gelesen werden können.
1024x768
Der Nutzer startet im Inhaltsverzeichnis, indem er auf ein Märchen klickt.
Die Märchen werden nach rechts, also in Leserichtung fortgesetzt. Zum Weiterlesen verschiebt sich alles nach links, solange man mit der Maus den rechten Bildschirmrand berührt.
Außerdem befindet sich am oberen rechten Bildschirmrand eine Miniaturansicht der ganzen Geschichte. Sie bewegt sich nicht mit. Durch Hineinklicken gelangt man an die entsprechende Stelle im Märchen.
Um ins Inhaltsverzeichnis zurückzukommen, klickt man auf den kleinen Pfeil unter der Miniaturansicht. Er ist dem bekannten Icon von Audio-/Videowiedergabegeräten nachempfunden.
240x320
Bei der kleinen Auflösung verzichteten wir auf ein Inhaltsverzeichnis.
Es gibt stattdessen eine Suchfunktion.
Die Kinder- und Hausmärchen der Brüder Grimm
(In Zusammenarbeit mit Mischa König)
Aufgabenstellung
Wir sollten ein digitales Musikinstrument mit einem analogen Interface entwerfen.
Dabei sollte die Musik nachvollziehbar dargestellt werden.
Umsetzung
Auf der Suche nach einer verspielten und unkomplizierten Lösung dachten wir zunächst an Sand.
Um dauerhaftere Formen zu ermöglichen, entschieden wir uns letztendlich für Lehm.
Der Nutzer kann Landschaften formen, die nach einfachen Regeln Musik erzeugen, nachdem ein Scanner die Oberfläche erfasst und weitergegeben hat.
Hügel und Täler
bestimmen die Tonhöhe.
Je höher ein Berg, desto höher der erzeugte Ton.
Die Reihenfolge der Töne erfolgt von links nach rechts, also in Leserichtung.
Akkorde sind möglich.
Die horizontale Ausdehnung von Hügeln und Tälern entscheidet über die
Tonlänge.
Der Lehm-Sequenzer
(In Zusammenarbeit mit Mischa König)
Aufgabenstellung
Es sollte eine akustische Begebenheit in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit sollte für den Betrachter nachvollziehbar sein.
Erste Erfahrungen mit Datenrettungs-Software…
Ironischerweise verschwinden viele Dinge für immer, wenn man aufräumt.
Unser Klangbild sowie sämtliche Entwürfe und Noten fielen der Ordnungsliebe zum Opfer.
Wir hatten die teilweise extrem kurzen Notenwerte des ursprünglichen Stücks durch langwieriges Heraushören und Nachbauen der einzelnen Tonspuren in GarageBand ermittelt.
Beim zweiten Mal beschränkten wir uns deshalb auf Titel, deren Noten uns bereits vorlagen.
Die Wahl fiel auf den schmissigen, allseits bekannten Titelsong der TV-Serie »MacGyver«. Eine zugehörige Midi-Datei fanden wir im Internet.
Umsetzung
In unserem Klangbild werden unterschiedliche Tonhöhen durch unterschiedliche Schraffuren dargestellt.
Bei mehrspurigen Passagen kommt es zu Überlagerungen der Schraffuren.
Das genaue Prinzip wird in der folgenden Diashow erläutert.
Klangbild der MacGyver-Titelmelodie
(In Zusammenarbeit mit Inka Plöger)
Aufgabenstellung
Ein möglichst komplexes Thema sollte ohne Worte kommuniziert werden.
Umsetzung
Unser Thema: eine Strickanleitung für Anfänger.
Wichtig war uns ein greifbares Ergebnis mit Nutzwert.
Als schnelles erstes Projekt, das jeder gebrauchen kann, wollten wir deshalb eine Anleitung zum Stricken einer Handy-Socke liefern.
Das Ergebnis kann hier heruntergeladen werden.
Wir entschieden uns für eine fotografische Lösung.
Für mehr Klarheit beschränkten wir uns auf schwarz-weiß-Fotos und färbten lediglich den Faden rot ein.
In der Anleitung sind die einzelnen Schritte vom Maschenaufnehmen bis zum Abketten beschrieben, sowie deren Reihenfolge.
Letztere wird am oberen Rand ersichtlich: Die Icons stehen stellvertretend für Arbeitsschritte, wie z.B. linke Masche.
Sie werden von links nach rechts ausgeführt, wobei die Pfeile verdeutlichen, wann Schritte mehrmals ausgeführt werden sollen oder mehrere Schritte sich abwechseln.
Die Icons sind gleichzeitig Navigator, der anzeigt, wo der Nutzer sich im Dokument befindet.
Stricken
