Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Kursdokumentation Basic Interfacedesign

12FOId-XD Interaction Design 1.151 Grundlagen Interfacedesign WS 2015/2016 Dozent: Prof. Boris Müller

01 – Digitales Buch

buch-desktop-1.pngbuch-desktop-1.png

Aufgabe Es soll eine digitale Fassung Ihres Lieblingsbuches gestaltet werden. 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 minde- stens vier Screens in zwei verschiedenen Formaten vorgestellt werden - mindestens zwei horizontale Screens im Format von 1024 x 768 Pixeln (XGA) und mindestens zwei vertikale Screens im Format von 240x320 Pixeln (QVGA). 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.

Dieses Projekt entstand in Zusammenarbeit mit Theodor Hillmann.

Bearbeitung Für die Umsetzung dieser Aufgabe haben wir uns das Kammerspiel „12 Angry Men“ von Reginald Rose ausgewählt. Kurz gefasst geht es um zwölf Geschworene, die sich in der kompletten Handlung nur in einem Raum befinden und über das Urteil diskutieren. Da das Buch nur aus Dialogen und einer Erzähler-Stimme besteht, haben wir den Buchinhalt im Stil eines modernen Messengers dargestellt, um den Gesprächsverlauf in einer durchgängigen Konversation sichtbar zu machen. Dabei sind die Personen, die für ein Todesurteil stimmen, auf der linken Seite und Personen, die für einen Freispruch stimmen, auf der rechten Seite angeordnet. Gelegentlich ist auch ein Bild im „Chat-Verlauf“ zu sehen, welches wichtige Elemente in der Diskussion besser darstellt. Außerdem haben wir uns dafür entschieden, nur die Personenerklärung und den reinen Erzählstrang abzubilden, damit der Fokus nicht auf unwichtige Dinge fällt.

buch-desktop-4.pngbuch-desktop-4.png
buch-desktop-3.pngbuch-desktop-3.png
buch-desktop-2.1.pngbuch-desktop-2.1.png
buch-desktop-6.pngbuch-desktop-6.png
buch-mobil-3.pngbuch-mobil-3.png
buch-mobil-4.pngbuch-mobil-4.png
buch-mobil-5.pngbuch-mobil-5.png

02 – Klangbild

Passwort BasicInterfaceMoritz

Aufgabe Es soll eine akustische Begebenheit (Gespräch, Klangaufzeichnung, Filmausschnitt, Musik, etc.) in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll also für den Betrachter nachvoll- ziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Die akustische Begebenheit soll aufgezeichnet und auch präsentiert werden und darf nicht länger sein als eine Minute.

Bearbeitung Für diese Aufgabe habe ich mich für die erste Minute des Liedes „Awake“ von Tycho entschieden.

Das Grundprinzip besteht darin, dass sich an jeder Seite des Quadrates zwei imaginäre Tonleitern befinden. Gegen den Uhrzeigersinn bilden sich nun Dreiecke mit verschiedenen Mustern, die vom ersten Ton (Untere Seite) zum zweiten Ton (Rechte Seite), usw.. Das wiederholt sich als Kreislauf immer wieder. Die Hauptmelodie habe ich mit spitz zulaufenden Dreiecken dargestellt, da die Töne angeschlagen werden und dann ausklingen, bis der nächste Ton angeschlagen wird.

Klangbild Aufschlüsselung Töne.pngKlangbild Aufschlüsselung Töne.png
Klangbild Übersetzung-1.pngKlangbild Übersetzung-1.png
Klangbild Übersetzung-2.pngKlangbild Übersetzung-2.png

03 – Graphical User Interface (GUI)

Brainstorming App Café Hand.pngBrainstorming App Café Hand.png

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 und Entwürfen unterstützen. Die genauen Funktionalitäten kön- nen in der Konzeptphase 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 iOS 8-konformen und gleichzeitig individuellen Ent- wurf zu erarbeiten. Es soll die standardisierte iOS 8-GUI eingesetzt wer- den - das App soll aber auch eine eigene Note bekommen. Die Entwürfe sollen 375 x 667 PIxel groß sein (für den Entwurf setze ich Punkt=Pixel). Zusätzlich zur GUI soll ein Programmablaufplan (Bewegungspfade durch die App) skizziert werden.

Dieses Projekt entstand in Zusammenarbeit mit Dennis Ostendorf.

Bearbeitung Das Prinzip unserer Brainstorming–App basiert darauf, dass jeder Teilnehmer seine Idee auf einen Zettel schreibt, diesen an die nächste Person weitergibt und dann die Idee seines Vorgängers als Anregung für neue Ideen nimmt. In der App sammelt man zu Beginn jedoch erst einmal alle seine Ideen im Ideenpool und schickt nur seine beste Idee weiter. Diese wird dann von den anderen Teilnehmer kommentiert, oder mit einer Idee aus ihrem Ideenpool ergänzt. Zum Schluss erhält man bei z.B. drei Teilnehmern drei Ideenstränge/Konversationen, aus welchen der weitere Verlauf des Projektes bestimmt werden kann.

brainstorm_app_idee.pngbrainstorm_app_idee.png
Brainstorming App Flow.pngBrainstorming App Flow.png
brainstorming app gui_Screen 2.pngbrainstorming app gui_Screen 2.png
brainstorming app gui_Screen 7.pngbrainstorming app gui_Screen 7.png
brainstorming app gui_Screen 10.pngbrainstorming app gui_Screen 10.png
brainstorming app gui_Screen 12.pngbrainstorming app gui_Screen 12.png

04 – 1000 Worte

dj.jpegdj.jpeg

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.

Bearbeitung Nach langer Überlegung entschied ich mich dafür, den Prozess eines Überganges zweier Lieder mit einem Mischpult abzubilden. Dafür habe ich das Format eines 60x90 cm Posters benutzt. Von oben nach unten erkennt man nun den Verlauf der Tonspur zweier Lieder und mittels Icons sind die Aktionen dargestellt, welche zu bestimmten Zeitpunkten ausgeführt werden. Die Mittelachse stellt die Zeitachse dar.

1000Worte.pdf PDF 1000Worte.pdf

Fazit

Mir hat der Kurs gut gefallen. Die Unterteilung des Semesters in vier Einzelprojekte ist sinnvoll und vermittelt ein breites Spektrum der Interface–Grundlagen. Durch die Eingangsvorlesungen zu den jeweiligen Themenbereichen und den darauf folgenden Bearbeitungen und Vorstellungen der Projekte bekommt man einen guten Einblick in die Vielfältigkeit des Gebietes. Zudem ist man, aufgrund der doch relativ knappen Zeit pro Projekt, gezwungen, sich auf die wichtigsten Aspekte seiner Idee zu beschränken – Das kann positiv, sowie negativ sein.

__ Moritz Gruhl

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 15|2

Entstehungszeitraum

Wintersemester 2015 / 2016

Keywords