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 | 02

Aufgabe 1 : Digitales Buch

2.png2.png
3.png3.png
4.png4.png
5.png5.png
6.png6.png
7.png7.png
8.png8.png

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.

Umsetzung

Mein Arbeitspartner Fabian Archner hatte ein großartiges Handbuch für die Wartung / Reparatur von alten Mercedes-Limousinen. Das Buch ist alt und heute nicht mehr im Handel zu erwerben , so dass es spannend war dieses Buch als digitale Version zu erarbeiten. Wir entschieden uns für eine Arbeitsteilung, da die Zeit am Ende doch sehr knapp wurde. Während ich für die Gestaltung des User Interfaces zuständig war , hat sich Fabian auf den Inhalt konzentriert. Wir erarbeiteten zusammen ein Navigationskonzept für die verschiedenen Bildschirme und haben versucht viele Originalelemente des Buches zu übernehmen.So haben wir die Farben des Buches übernommen, den Inhalt des Buches auf die verschiedenen Screengrößen angepasst und verfeinert und durch eine leichte Navigation versucht , den sehr verschachtelten Inhalt des Buches für den User zu vereinfachen.

Aufgabe 2 : GUI

1.jpg1.jpg
2.jpg2.jpg
3.jpg3.jpg
4.jpg4.jpg
5.jpg5.jpg
6.jpg6.jpg
7.jpg7.jpg
8.jpg8.jpg
9.jpg9.jpg
10.jpg10.jpg

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.

Umsetzung

Ich wollte eine Brainstorm-App machen , die es den User ermöglicht schnell und unkompliziert Notizen zu „schreiben“ , welche schnell in eine Mindmap umgewandelt werden können. Man kann Projekte mit einzelnen Zwischenschritten erstellen. In diesen Zwischenschritten kann man dann seine Gedanken aufschreiben und durch das Selektieren einzelner Wörter zu einer Mindmap verbinden. Durch die Integration von Facebook / Twitter wird es ermöglicht ,Projekte mit Freunden / Arbeitskollegen zu teilen.

Aufgabe 3 : Klangbild

klanggbild.jpgklanggbild.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.

Umsetzung

Als Klang (siehe Material) nahm ich eine Klangsequenz,die beim Skateboard fahren entstand. Diese Sequenz versuchte ich anhand von einfachen „Symbolen“,die die einzelnen Klänge darstellen sollen , bildlich darzustellen.

Aufgabe 4 : 1000 Worte

Henrik_Kevin_1000Worte.pngHenrik_Kevin_1000Worte.png

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.

Umsetzung

Zusammen mit meinem Partner Henrik Waffner enstand diese Illustration , die den Weg einer Pfandflasche leicht und verständlich darstellen soll. Der Weg einer Pfandflasche ist ein Kreislauf zwischen Konsument , Händler , Großhändler und Brauerei. Wir haben bewusst auf eine Darstellung als Kreislauf verzichtet und haben den Weg einer Pfandflasche versucht leichtverständlich als einen Weg zu mehreren Stationen darzustellen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Wintersemester 2012 / 2013

zusätzliches Material