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|1 - Laurids Düllmann

Basics Interface 12|1 - Laurids Düllmann

Die Dokumentation zeigt alle entstandenen Arbeiten aus dem Kurs Basics Interface 12|1 bei Prof. Boris Müller

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.

kochbuch_klein_2.pngkochbuch_klein_2.png

Umsetzung

Die Aufgabe enstand in Zusammenarbeit mit Thomas Otto. Für die Umsetzung entschieden wir uns für „DAS GROSSE PASTKOCHBUCH“. Ein recht betagtes Kochbuch rund um die Italienische Küche.

Thomas kümmerte sich hauptsächlich um die 1024er Version und ich um die 240er.

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_gross_1.pngkochbuch_gross_1.png
kochbuch_gross_3.pngkochbuch_gross_3.png
kochbuch_gross_2.pngkochbuch_gross_2.png

1024x768 Version

kochbuch_klein_1.pngkochbuch_klein_1.png
kochbuch_klein_2.pngkochbuch_klein_2.png
kochbuch_klein_3.pngkochbuch_klein_3.png

240x320 Version

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.

app_laurids_07.pngapp_laurids_07.png

Umsetzung

„MIND“ ist eine App mit Hilfe dieser Anwender online gemeinsam Ideen entwickeln und kommentieren können.

Projekte enthalten Ideen welche schnell angelegt werden, kommentiert werden, „geliked“ werden können und in der Projektansicht direkt untereinander dargestellt werden.

Wird eine Idee von allen Projektmitgliedern mit einem Like markiert gilt diese Idee als fix.

Projektmitglieder können leicht über eine Invitefunktion per Email eingeladen werden.

timetablegui9.pngtimetablegui9.png

1 - Loginscreen 2 - Projektübersicht 3 - Neues Projekt erstellen 4 - Projektansicht 5 - Projektansicht mit Bearebeiten / Like swipe 6 - Projektansicht mit Likebeitrag 7 - Neue Idee hinzufügen 8 - Invitescreen 9 - App Menu

app_laurids_01.pngapp_laurids_01.png
app_laurids_02.pngapp_laurids_02.png
app_laurids_03.pngapp_laurids_03.png
app_laurids_04.pngapp_laurids_04.png
app_laurids_05.pngapp_laurids_05.png
app_laurids_06.pngapp_laurids_06.png
app_laurids_08.pngapp_laurids_08.png
app_laurids_09.pngapp_laurids_09.png
app_laurids_10.pngapp_laurids_10.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.

dound.pngdound.png

Umsetzung

Für mein Visualisierung eines Klangbildes wählte ich markerschütternde Schreie aus Angst von sich auf einem Marktplatz befindlichen Personen.

Ein schrei wird mit Hilfe von einzelnen Schrei-formen dargestellt die sich je nach Art des Schreis in Form und Farbe verändern und in einem vertikalen Zeitstrahl dargestellt werden

Viele verschiedene Schreie, welche teils auch gleichzeitig stattfanden wurden kategorisiert und je nach stärke des Schreis kantiger dargestellt. Je lauter ein Schrei desto größer seine Visualisierung. Wimmern tritt in Form einer Träne auf und umso schwacher der Schrei umso farbloser ist er. Ineinandergreifende Formen stehen für sich überlagernde Schreie und Schluchzer

Schreie: http://incom.org/action/download-file/108663/Angstschreie.mp3

basics_sound_visual_x2.pngbasics_sound_visual_x2.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.

vorschau.jpgvorschau.jpg

Umsetzung

Zusammen mit Joscha Lausch entwickelte ich eine Visualisierung des Fertigungsprozesses von Fischstäbchen.

Der Prozess beinhaltet parallele Prozesse welche von uns illustrativ in einem konsistenten Stil und gewollt nicht maßstabsgetreu dargestellt wurden, eine möglichst verständliche Darstellung mit Hilfen von Vergleichen (Netzgröße = Länge von 4 Fernsehtürmen) war uns wichtig.

Viele kleine Details sollen die Visualisierung noch viel spannender und interessanter machen als der Fischstäbchenherstellungsprozess eh schon ist ;)

final.jpgfinal.jpg

Fazit

Die vielfältigen Aufgaben ließen mir viele gestalterischen Freiheiten offen, welche jedoch von Boris Müller genaustens untersucht wurden und mit hilfreichem und detailreichem Feedback erwidert wurden. Sogar subjektive Geschmacksfragen wurden behandelt, jedoch auch als solche betitelt.

Allgemein hatte der Kurs, welcher mir sehr gefiel, ein sehr hohes Niveau was sich als Motivationsschub erwies, bei jeder neuen Aufgabe noch besser zu werden um so viele Kritikpunkte wie möglich auszumerzen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Sommersemester 2012

zusätzliches Material