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

Basics Interface 12|01

Die Dokumentation zeigt die im Kurs „Basics Interfacedesign“ (Prof. Boris Müller) entstandenen Arbeiten aus dem Sommersemester 2012

01| Digitales Buch

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

Die Aufgabe enstand in Zusammenarbeit mit Laurids Düllmann.

Für die Umsetzung entschieden wir uns für „DAS GROSSE PASTKOCHBUCH“. Die Übertragung der Rezepte in ein übersichtliches und reduziertes Format für den digitalen Bereich waren dabei Ausschlaggebend.

Wir entschieden uns dafür, den Bildern eine zentrale Rolle in dem reduziertem Interface zuzuordnen. Mit Hilfe der Schriftart „Calibri“ haben versucht, typografisch, flächig aber doch zurückhaltetnd, das Gerüst um die wichtigen Informationen zu konstruieren.

kochbuch-1024-detailansicht-menü.jpgkochbuch-1024-detailansicht-menü.jpg
kochbuch-1024-detailansicht.jpgkochbuch-1024-detailansicht.jpg
kochbuch-1024-kategorieansicht.jpgkochbuch-1024-kategorieansicht.jpg

Version 1024x768 Pixel

kochbuch-240-detailansicht-menu.jpgkochbuch-240-detailansicht-menu.jpg
kochbuch-240-detailansicht.jpgkochbuch-240-detailansicht.jpg
kochbuch-240-kategorieansicht.jpgkochbuch-240-kategorieansicht.jpg

Version 240 x 320 Pixel

02| GUI

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.

Umsetzung

„Light'n up“ ist eine App die Anwendern im klasschichen „Post it“ Brainstorming verfahren unter die Arme greifen soll. Schnelle anlegen und „posten“ von Ideen sollen den krativen Fluss unterstützen, egal wo sich der Anwender befindet.

Bei der Gestaltung griff ich meist auf die Standardpattern des IOS zurück um die einerseits Plattform konform zu gestalten und zu anderem dem Benutzer eine schnelle Einführung zu erlauben.

ui-brainnup.jpgui-brainnup.jpg

Übersicht der Masken

  1. Der Startbildschirm 2.-4. Erstellung eines neuen Post its und somit auch eines neuen Projektes
  2. Ansicht des „fertigen“ Post its. Elemente (von links nach rechts) „speichern“, „hinzufügen“ „löschen“ und „Einstellungen“. Die beiden Funktonen auf dem Post it beziehen sich nur auf einen einzelnen Post it und können auch nur bei Auswahl von einem oder mehreren angewandt werden. Tap auf Einstellungen führt zu 11. Den einstellungen des Projektes.

  3. Zeigt die Auswahl eines Post its

  4. Zeigt den Tap auf speichern
  5. Hier kann das Projekt abgespeichert werden
  6. Ansicht der vorhandenen Projekte
  7. Ein neues Projekt anlegen

1-lighnup-thopmas-gui.png1-lighnup-thopmas-gui.png
2-lighnup-thopmas-gui.png2-lighnup-thopmas-gui.png
3-lighnup-thopmas-gui.png3-lighnup-thopmas-gui.png
4-lighnup-thopmas-gui.png4-lighnup-thopmas-gui.png
5-lighnup-thopmas-gui.png5-lighnup-thopmas-gui.png
6-lighnup-thopmas-gui.png6-lighnup-thopmas-gui.png
7-lighnup-thopmas-gui.png7-lighnup-thopmas-gui.png
8-lighnup-thopmas-gui.png8-lighnup-thopmas-gui.png
9-lighnup-thopmas-gui.png9-lighnup-thopmas-gui.png
10-lighnup-thopmas-gui.png10-lighnup-thopmas-gui.png
11-lighnup-thopmas-gui.png11-lighnup-thopmas-gui.png

03| Klangbild

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.

Umsetzung

Für die Visualisierung wählte ich einen Ausschnitt aus „Melvin The Magical Mixed Media Machine“ ein Projekt des Studios „HEYHEYHEY“.

Diese Installation enthält zwar wenige Klangebenen übereinander jedoch sehr viele verschiedenen Klänge in bestimmten Einheiten Reihenfolgen. Dies Empfang ich als sehr faszinierend wollte dies in eine Form bringen, die dem aufbauendem Charakter gerecht wird. Daher wähle ich eine Biologische an die abstrakte DNS-Strang angelehnte Visualisierung. Diese bot die Möglichkeit einer Einteilung der Sequenzen so wie die Abbildungstiefe, der teilweise sehr separierten Klangereignisse. Gelesen wird sie von unten nach oben.

melvin-the-machine-thomas-otto-klangvisualisierung.pngmelvin-the-machine-thomas-otto-klangvisualisierung.png

04| 1000 Worte

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.

Umsetzung

Die Aufgabe enstand in Zusammenarbeit mit [Ute Benz](http://incom.org/profil/4157 „Ute Benz“).

Unsere Gruppe entschied sich eine interkulturelle Begebenheit darzustellen. Diese wurde durch ein kurzes Brainstorming die japanische Variante der Teezeremonie.

Sie ist sehr vielschichtig und beinhaltet viele Regeln und Verhaltensmuster, die wir teilweise nicht nachvollziehen konnten. Daher haben wir uns aus verschiedenen Quellen über diese Muster und deren Hintergründe informiert.

Ein erster Ablaufplan der allgemeinen Teezeremonie entstand. Die Vorgänge in grafischer Form wiederzugeben und für unseren Kulturkreis „verarbeitbar“ zu machen entwickelte sich schwierig. Daher entschieden wir uns, diese Metaebene wegzulassen. Zur Beschreibung wurden nur japanische Zeichen verwendet.

Der Ablauf ist nun zwar nachvollziehbar, aber fordert den Betrachter heraus sich weitergehend mit der Kultur des Landes auseinanderzusetzen.

ute-benz_thomas-otto_1000Worte_final.jpgute-benz_thomas-otto_1000Worte_final.jpg

Kursfazit

Das Feedback von Boris Müller, erwies sich stets als sehr hilfreich und objektiv. Subjektive Ansichten wurden zwar auch geäußert, allerdings auch als diese gekennzeichnet.

Das hohe Niveau der Struktur der Lehrinhalte half mir neue Erkenntnisse in den der Grundlagen des Interfacedesigns zu erhalten.

Die akribische Genauigkeit die der Dozent voraussetzte, spornte mich an, alle Facetten des Interfaces noch einmal zu überdenken und zu optimieren. Der Kurs bestätigte mir erneut, dass ich die richtige Richtung für mich gewählt habe.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Sommersemester 2012