Basics Interface 14

Arbeiten aus dem Kurs Basics Interface betreut von Prof. Boris Müller, entstanden im Sommersemester 2014. Der Kurs stellt eine grundlegende Auseinandersetzung mit den zentralen Themen des Interface Designs dar.

01_Digitales Buch

Zu dieser Aufgabe sollte ein Buch nach Wahl digitalisiert werden. Dazu wurden der bunt zusammengewürfelt und in 2er Gruppen aufgeteilt. Ich bin gemeinsam mit [Tito](https://incom.org/profil/5608 „Tito“) in eine Gruppe gewählt worden. Wir haben uns dann direkt zusammengesetzt und uns auf ein Buch geeinigt, welches uns beide interessierte. Das Buch handelte von Edward Hopper und wurde geschrieben von Ivo Kranzfelder. Danach arbeiteten wir zunächst auf Skizzen-Ebene und haben versucht ein Navigationskonzept zu entwickeln, welches auf beide Größen adaptier war. Wir einigten uns auf verschiedene Gästen, wie z.B. den Links-/ Rechts-Swipe über ein Bild in der Hauptübersicht. Hiermit ruft man auf schnellem Wege alle wichtigen Informationen über ein Gemälde auf, gleichzeitig wird ein Highlight auf das Kapitel gelegt, in welchem dieses zu finden ist.

Es sollte einmal für die Größe 1024x768 (iPad mini & iPad 2), und 360x640 entwickelt werden. Uns war wichtig von Anfang an gemeinsam an dem Konzept und Design zu arbeiten, um zur finalen Präsentation eine Einheit aus iPad und iPhone bilden zu können. Im weiteren Prozess arbeiteten wir direkt auf dem iPad mini, mit Tools, wie z.B. [LiveView](http://www.zambetti.com/projects/liveview/ „LifeView“) um ein echtes Feeling zu bekommen. Das Tool generiert einen Rahmen mit den Seitenverhätnissen des Endgerätes über welches die App gestartet wurde. Diesen kann man dann frei über seinen Screen setzen und loslegen. Die App ist kostenlos.

Rückblickend schaue ich auf ein tolles Projekt und eine sehr lustige und spannende Zusammenarbeit mit Tito, wir verstanden uns auf anhieb und vor allem haben wir noch mal viele Erfahrungen zum Thema Typography im digitalen Universum sammeln können. Aus dem Projekt ist im Nachhinein ein kleines Side-Project geworden. Wir arbeiten weiter daran den kompletten Umfang der Interaktionen zu definieren und sichtbar zu machen.

02_GUI Mind Mapping App

Hier ging es darum ein GUI für eine Mind Map App zu entwickeln. Ich machte mich also auf in die Welt der Mind Maps und habe mir überlegt, welche Informationen von all den diversen Möglichkeiten die angeboten werden die relevantesten für einen Nutzer sein könnten. Ich entschied mich also für eine geordnete Darstellung von Begriffen, die auch etwas länger sein dürfen und erstellte dazu ein Raster. Zusätzlich dazu soll es die Möglichkeit geben Bilder zu einem Thema hinzuzufügen und Team-Mitglieder zu einem Projekt einzuladen, welche die Liste ebenfalls überarbeiten bzw. erweitern können. Damit wollte ich einen klaren Fokus aufs wesentliche erzielen und Überladungen durch zusätzliche Funktionalitäten vermeiden.

Die Liste an Ober-/ und Unterpunkten sollte innerhalb eines Projektes unendlich erweiterbar sein. Bei mehr als 20 Oberbegriffen, diese wiederum weitere 20 Obergriffe beinhalten können, könnte der Weg zurück zum Anfang jedoch ziemlich Mühselig werden. Hierzu habe ich mir ein kleines Konzept überlegt: Sobald man tiefer in die Begriffe eines Projekts eintaucht, erscheint ein Block im Screen, der sich den zuletzt angewählten Begriff merkt und schrumpft entsprechend mit, je nachdem, wie tief man geht. Durch das Swipen des Oberbegriffes nach rechts bzw. links, gelangt man Schrittwiese nach vorne bzw. hinten. Das „H“ steht für Home und bringt einen immer direkt in die Projektübersicht. Die App merkt sich beim verlassen, wo man zuletzt stehen geblieben ist.

03_Klangbild

Eine Konversation zwischen zwei oder mehreren Menschen sollte visualisiert und mit Soundfile präsentiert werden. Hier hatte ich anfangs etwas Schwierigkeiten, ich konnte mich nicht entscheiden und fand es generell nicht einfach Geräusche oder Wörter aus einem Gespräch auf visueller Ebene zu deuten. Schließlich entschied ich mich für eine der legendären Steve Jobs Reden, die ich persönlich immer sehr Humorvoll fand. Ich wählte als Soundclip den Moment als Steve der Welt das aller erste iPhone präsentierte. Man kann sagen dies war in vielen Wegen ein „Revolutionärer“ Moment. Mir ging es in meinem Klangbild um Emotionen und prägnante Momente die ich festhalten wollte. Die lockere Art und Weise wie Steve mit seinem Publikum interagiert fand ich beeindruckend. Er spielt mit dem Publikum und bringt es zum lachen, indem er den Moment der Enthüllung auf seine humorvolle Weise unnötig in die Länge zieht. Ich entwickelte hierfür eine Reihe von Piktogrammen die die Situation annähernd festhalten sollen. Da das Bild ziemlich lang geworden ist, wird es ohne ein permanentes Durchscrollen im Vorschau-Programm nicht wirklich verständlich. In der Feedbackrunde wurde mir vorgeschlagen das Bild in einen kleinen Film zu übersetzen. Dieser ist nun auch in Planung.

(Das komplette Klanbild mit Sound befindet sich oben unter „Material“)

1000 Worte

Zur letzten Aufgabe entschieden [Tito](https://incom.org/profil/5608 „Tito“) und ich uns für das Thema „Die Domestizierung des Feuers“. Das Ziel war stark vereinfachte Piktogramme zu entwickeln, die die Entstehung und Entwicklung des natürlichen und künstlichen Feuers verdeutlichen. Um die Idee auf eine eindeutige Weise transportieren zu können, planten wir eine Gestaltung von ca. 15 Piktogramme ein. Leider ist es uns nicht gelungen die Skizzen-Phase zu überschreiten und ein finales Projekt abzugeben.