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

Basic Interface 12 | 02

Die Zusammenfassung meiner im Wintersemester 12/13 entstandenen Arbeiten für den Kurs Basic Interface bei Prof. Boris Müller.

Aufgabe Nr. 1 - Digitales Buch

DigitalesBuchDokuCover.jpgDigitalesBuchDokuCover.jpg

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.

ABSr_big_inhalt.jpgABSr_big_inhalt.jpg
Motor_big_inhaltsidebar2.jpgMotor_big_inhaltsidebar2.jpg
Motor_big_inhalt.jpgMotor_big_inhalt.jpg
Kleinerscreen01.PNGKleinerscreen01.PNG
Kleinerscreen02.PNGKleinerscreen02.PNG
Kleinerscreen03.PNGKleinerscreen03.PNG

Aufgabe Nr. 2 - GUI

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.

flowchart.jpgflowchart.jpg

00BrainApp_TitleScreen.png00BrainApp_TitleScreen.png
01BrainApp_ProjetAnfangScreen_clear.png01BrainApp_ProjetAnfangScreen_clear.png
02BrainApp_ProjetAnfangScreen_typingTitle.png02BrainApp_ProjetAnfangScreen_typingTitle.png
03BrainApp_ProjetAnfangScreen_Inviting.png03BrainApp_ProjetAnfangScreen_Inviting.png
04BrainApp_ChatScreen_Anfang.png04BrainApp_ChatScreen_Anfang.png
05BrainApp_ChatScreen_Wordwaehl.png05BrainApp_ChatScreen_Wordwaehl.png
06BrainApp_ChatScreen_weiterso.png06BrainApp_ChatScreen_weiterso.png
07BrainApp_KategorienScreen_basic.png07BrainApp_KategorienScreen_basic.png
08BrainApp_InhalteScreen_basic.png08BrainApp_InhalteScreen_basic.png
09BrainApp_MatrixScreen_basic.png09BrainApp_MatrixScreen_basic.png

Aufgabe Nr. 3 - Klangbild

Audiobild01V2_ausspiel.jpgAudiobild01V2_ausspiel.jpg

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 Nr. 4 - 1000 Worte

Palmoel1000Worte_Fina_psedl.jpgPalmoel1000Worte_Fina_psedl.jpg

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.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Wintersemester 2012 / 2013