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

1.151 Basics Interfacedesign; SoSe 10; Stefan Hartmann

1.151 Basics Interfacedesign; SoSe 10; Stefan Hartmann

Dieser Kurs stellt eine grundlegende Auseinandersetzung mit den zentralen Themen des Interface Designs dar. Ausgehend von einer Reihe von Entwürfen und Experimenten wird die Herangehensweise an gestalterische Probleme im Interface Design vermittelt. Konkret werden im Kurs die Themen Screendesign, Grafische User-Interfaces, Visualisierung und Semiotik behandelt. Dabei stehen insbesondere konzeptionelle Studien im Mittelpunkt.

BASICS INTERFACEDESIGN

Aufgabe 1: 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 Buches wiedergeben, sondern sollen auch das Navigationskonzept verdeutlichen, mit dem die Inhalte des digitalen Buches erschlossen werden können. Lesbarkeit und Klarheit der Darstellung sind wichtige Kriterien bei der Bearbeitung der Aufgabe.

Diese Aufgabe wurde gemeinsam mit Marc Heiland bearbeitet.

ledertasche_1024x768_A.jpgledertasche_1024x768_A.jpg

ledertasche_240x320_A.jpgledertasche_240x320_A.jpg

Die erste Version von Charles Bukowskis »Der Mann mit der Ledertasche« war zu undurchdacht und ohne wirkliche Verbundenheit zum originalen Buch gestaltet.

DMMDL large 01.jpgDMMDL large 01.jpg

DMMDL large 02.jpgDMMDL large 02.jpg

DMMDL_small_alle.gifDMMDL_small_alle.gif

Durch neue Farbwahl, optische Mustereffekte im Hintergund und die fast ausschließliche Wahl von Schriften mit Frauennamen näherten wir uns dem Stil Charles Bukowskis. Die gesamte Erscheinung sowohl der großen als auch der kleinen Screens ging nun wesentlich besser einher als zuvor. Ebenfalls optimierten wir die Funktionslogiken der möglichen Interaktivität der digitalen Buchfassung.

Aufgabe 2: Graphical User Interface (GUI)

Es soll eine Augmented-Reality-Applikation für das iPhone konzipiert und gestaltet werden. Die Applikation kann gern über das technisch Machbare hinausgehen – wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens zwei Screens präsentiert werden – gern auch mehr. Inhalt des ersten Screens sind Eingaben und Einstellungen. Inhalt des zweiten ist die Übereinanderlagerung von fotografischem Bild und der Informationsebene. Im ersten Screen soll man sich also streng an die Gestaltungsrichtlinien für das iPhone halten, im zweiten Screen kann man deutlich davon abweichen. Die Entwürfe sollen 320 x 480 Pixel groß sein – ob horizontal oder vertikal spielt dabei keine Rolle.

Diese Aufgabe wurde gemeinsam mit Greta Peukert bearbeitet.

gui_01_hoch.jpggui_01_hoch.jpg
gui_02_hoch.jpggui_02_hoch.jpg
teile_auswahl_01.jpgteile_auswahl_01.jpg
teile_auswahl_02.jpgteile_auswahl_02.jpg
teile_auswahl_03.jpgteile_auswahl_03.jpg

ar_tuning_01.jpgar_tuning_01.jpg
ar_tuning_02.jpgar_tuning_02.jpg
ar_tuning_03.jpgar_tuning_03.jpg
ar_tuning_04.jpgar_tuning_04.jpg
ar_tuning_05.jpgar_tuning_05.jpg
ar_tuning_06.jpgar_tuning_06.jpg
ar_tuning_07.jpgar_tuning_07.jpg
ar_tuning_08.jpgar_tuning_08.jpg

Die verschiedenen Screens zeigen die mögliche Abfolge einzelner Funktionen einer Applikation, mit der der Nutzer per »Augmented Reality« sein Auto tunen kann. Dazu wird in den vertikalen Ansichten gewählt, welche Tuning-Teile der Nutzer anwenden möchte. Die horizontalen Ansichten stellen einen denkbaren Ablauf dar, wie im AR-Verfahren eine Darstellung des digital getunten Autos aussehen könnte, samt der notwendigen Einstellungen.

Aufgabe 3: KlangBilder (Narratives in Time and Space)

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.

Die Umsetzung dieser Aufgabe entstand in Einzelarbeit.

stefan_klangbild_1.jpgstefan_klangbild_1.jpg

Grundlage meiner Visualisierung ist das Geräusch, welches entsteht, wenn man zum ersten Mal ein neues Nutella-Glas aufschraubt – dazu zählt auch das Einritzen und Abziehen der Schutzfolie. Die Sound-Datei als MP3 ist links unter »Material« zu finden.

Die erste Version habe ich nicht bis zum zeitlichen Ende des Sounds gestaltet, da bei dieser ein Mangel an präzisen Formen herrschte. Ebenso störte die sehr amplituden-förmige Erscheinung.

stefan_klangbild_2.jpgstefan_klangbild_2.jpg

Bei der finalen Version habe ich auf Anraten auf die weichen Kanten der einzelnen Blöcke verzichtet. Durch die ausschließliche Verwendung von Linien habe ich versucht, ein geschlosseneres Gesamtbild zu erhalten, dass die kleinen Unterschiede durch jeweilige Variationen der Grundform darstellt.

Aufgabe 4: 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 darauf 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 Umsetzung dieser Aufgabe entstand in Einzelarbeit.

mimikry_korallenschlange_stefan_20100914.jpgmimikry_korallenschlange_stefan_20100914.jpg

Als Thematik für mein Schaubild entschied ich mich für eine Form der Mertens'schen Mimikry – ein Täuschungs- bzw. Tarnverhalten von Beutetieren gegenüber deren Fressfeinden.

OBERE REIHE Es gibt zwei unterschiedliche Arten der gleichen Schlangen-Gattung, die sich (ablesbar in der Färbung ihrer Musterung) im Grad der Giftigkeit voneinander unterscheiden. Wird die ungiftige Art (Muster »schwarz-schwarz-rot«) vom Jäger gefressen, geschieht diesem nichts und er produziert Nachkommen, die weiterhin Jagd auf die ungiftige Art machen. Frisst der Jäger die halbgiftige Art trägt er zwar körperlichen Schaden davon, stirbt jedoch nicht und kann somit die Erfahrung vererben, die halbgiftige Art (also Muster »schwarz-rot-rot«) als Beute zu meiden.

UNTERE REIHE Die ungiftige Art produziert Nachkommen, die stets vom Fressfeind gejagt werden – auf Dauer kann dies zur Auslöschung dieser Art führen. Durch eine genetische zufällige Mutation entstehen bisweilen Nachkommen der ungiftigen Art, die das Farbmuster der halbgiftigen Art tragen. Diese werden vom Jäger für die zu meidende Art gehalten und haben dadurch einen Überlebensvorteil gegenüber den „genetisch korrekten“ Nachkommen. Auf lange Sicht setzen sich jene Erbanlagen durch, die zwar ungiftige Nachkommen produzieren, welche jedoch durchweg das Farbmuster der halbgiftigen Art tragen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuer_in

foto: Prof. Boris Müller

Entstehungszeitraum

Sommersemester 2010

zusätzliches Material