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 Interfacedesign SS 2011 | Björn Richter

Basics Interfacedesign SS 2011 | Björn Richter

In dem Kurs »Basics Interfacedesign« unter der Leitung von »Prof. Boris Müller« im Studiengang »Interfacedesign« an der »FH Potsdam« wurden verschiedene Disziplinen des Interfacedesign behandelt und in insgesamt 4 Projekten angewandt, die jeweils im Kurs präsentiert und diskutiert wurden.

http://interface.fh-potsdam.de

___________________________________

Aufgabe 1 – Digitales Buch

KribbelnImKopf.jpgKribbelnImKopf.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.

Lösung: Wir, mein Gruppenpartner Benjamin Erxleben und ich, entschieden uns für das Buch „Kribbeln im Kopf“.

Die Tonalität des Buches wollten wir in unserer digitalen Version beibehalten. Bezüglich der Typo haben wir uns allerdings aufgrund der Lesbarkeit am Bildschirm für andere Schriften entschieden: „Lucida Sans“ für den Grundtext und „Caecilia“ für die Kapitelüberschriften.

Neben der Schriftwahl bestand die Herausforderung darin, eine einfache Bedienung via Touchscreen zu gewährleisten und, besonders bei der Smartphone-Variante, den Platz optimal zu nutzen.

6_DigitalBook_1024x768_3.png6_DigitalBook_1024x768_3.png
6_DigitalBook_1024x768_4.png6_DigitalBook_1024x768_4.png
6_DigitalBook_1024x768_2.png6_DigitalBook_1024x768_2.png
6_DigitalBook_1024x768_1.png6_DigitalBook_1024x768_1.png

Tablet-PC: 1024 x 768 Pixel

DigitalBook_240x320_V03_2.jpgDigitalBook_240x320_V03_2.jpg
DigitalBook_240x320_V03_1.jpgDigitalBook_240x320_V03_1.jpg
DigitalBook_240x320_V03_3.jpgDigitalBook_240x320_V03_3.jpg
DigitalBook_240x320_V03_4.jpgDigitalBook_240x320_V03_4.jpg
DigitalBook_240x320_V03_5.jpgDigitalBook_240x320_V03_5.jpg
DigitalBook_240x320_V03_6.jpgDigitalBook_240x320_V03_6.jpg

Smartphone: 240 x 320 Pixel

___________________________________

Aufgabe 2 – iPhone App Webradio

Aufgabe: Es soll eine Web-Radio-Applikation für das iPhone konzipiert und gestaltet werden. Die Applikation kann gern über das technisch Machbare hi- nausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr. Die Applikation sollte über folgende Funktionen verfügen: Stream-Auswahl, Musiksteuerung (Start, Stop, Lautstärke), Favoriten, Aufnahme, Aufnahmenverwaltung. Das Ziel ist, einen möglichst iPhone-konformen Entwurf zu erarbeiten. Daher sollen 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.

Lösung: Wir, mein Gruppenpartner Christopher Peuker und ich, haben uns zuerst überlegt, wie wir auf welche Features zugreifen und wie unser Navigationskonzept aussieht. Dazu haben wir zuerst einige grobe Skizzen gemacht und diese mehrfach diskutiert. Darüberhinaus haben wir uns mit der iPhone-GUI und den Interaktionsparadigmen beschäftigt. Das Ergebnis war eine iPhone-konforme GUI mit wenigen eigenwilligen Abweichungen, wie z.B. die herausfahrende Favouritenleiste und dezent veränderte Farben.

PlayMode.pngPlayMode.png
AddFavorit.pngAddFavorit.png
Favoriten.pngFavoriten.png
PlayModeRec.pngPlayModeRec.png
Mitschnitte.pngMitschnitte.png
Abspielmodus.pngAbspielmodus.png
Senderwahl.pngSenderwahl.png
SenderSuchen.pngSenderSuchen.png
SenderFiltern.pngSenderFiltern.png

___________________________________

Aufgabe 3 – Klangbild

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.

Lösung 1: Mein erster Versuch war, die Töne zu visualisieren, die entstehen, wenn man sich etwas zu trinken aus dem Kühlschrank nimmt, die Flasche aufschraubt, eingießt, trinkt usw.. Das Problem an der Geschichte war, dass es mir zum Einen doch etwas zu niederkomplex war und zum Anderen, dass ich instinktiv in Versuchung kam, den Ablauf zu Visualisieren und nicht den Sound an sich.

Klangbild_Trinken.pngKlangbild_Trinken.png

Lösung 2: Ich entschloss mich für einen neuen Klang (Klänge links oben zum Download), einen Soundeffekt aus einem Transformers-Filmausschnitt. Dabei konnte ich weniger an einen konkreten Ablauf denken, sondern nur auf den Klang konzentrieren. Dieser Sund erwies sich jedoch im weiteren Verlauf als sehr schwierig und nervenaufreibend.

Klangbild_Transformers_1.pngKlangbild_Transformers_1.png
Klangbild_Transformers_2.pngKlangbild_Transformers_2.png

___________________________________

Aufgabe 4 – 1000 Worte

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.

Lösung: Nach kurzer Überlegung entschied ich mich für die Zubereitung von „Königsberger Klopsen“, da ich dieses Rezept bereits kannte und mich nicht erst in das Thema reinlesen musste. Somit blieb mir mehr Zeit für das Konzept und die Umsetzung, worauf es letztendlich ankam.

Zuerst machte ich, wie so oft, einige Skizzen.

1000Worte_Skizze.png1000Worte_Skizze.png

Dann fing ich an, Icons für jedes Element zu entwickeln und diese in einem Raster formatfüllend anzuordnen. Ich entschied mich zudem für eine farbliche Differenzierung von Objekten/Zutaten (grün) und Aktionen (rot). Dadurch wurde die Nachvollziehbarkeit deutlich verbessert. Die farbliche Anmutung sollte aphetitlich, rustikal und gemütlich sein, um der vorwiegend technischen Form der Icons entgegenzuwirken.

Bjoern_1000Worte_1024x768.jpgBjoern_1000Worte_1024x768.jpg

___________________________________

Fazit

Der Kurs war zeitlich sehr gut organisiert und der Umfang der Aufgaben war durchaus angemessen. Die Vorlesungen fand ich sowohl inhaltlich als auch didaktisch super. Am meisten gelernt habe ich jedoch aus dem Feedback zu den Präsentationen meiner Mitstudenten und meiner eigenen natürlich. Das Kursklima war ebenfalls angenehm. Mit den entstandenen Arbeiten bin ich unterm Strich zufrieden, obwohl ich mich bei der Soundvisualisierung etwas schwer tat.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Sommersemester 2011