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-Design 09|02 – Philipp Datz

Basics Interface-Design 09|02 – Philipp Datz

Kursdokumentation

1. Digitales Buch

1.151-DigBuch-Screen1-1-091118-01.jpg1.151-DigBuch-Screen1-1-091118-01.jpg
1.151-DigBuch-Screen1-2-091118-01.jpg1.151-DigBuch-Screen1-2-091118-01.jpg
1.151-DigBuch-Screen2-1-091116-01.jpg1.151-DigBuch-Screen2-1-091116-01.jpg
1.151-DigBuch-Screen2-2-091116-01.jpg1.151-DigBuch-Screen2-2-091116-01.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.

Ansatz

Ich entschied mich nach einigem überlegen für Ralf De Jong und Friedrich Forssmanns Typographie-Standardwerk „Detailtypografie“, da es ausser einer starken Hierarchisierung des Inhaltes eine sehr reduzierte Gestaltung aufweist und ich gern sehen wollte, wie sich diese auf digitaler Ebene umsetzen ließe. Nebenbei ist es auch eins meiner Lieblingsbücher.

2. Augmented Reality

+1.151-AR-Screen1-091207.jpg+1.151-AR-Screen1-091207.jpg
+1.151-AR-Screen2-091207_o.jpg+1.151-AR-Screen2-091207_o.jpg
+1.151-AR-Screen2-091209-2_p.jpg+1.151-AR-Screen2-091209-2_p.jpg
+1.151-AR-Screen3-091209.jpg+1.151-AR-Screen3-091209.jpg
+1.151-AR-Screen5-091209.jpg+1.151-AR-Screen5-091209.jpg

Aufgabe

Es soll eine Augmented-Reality-Applikation für das iPhone konzipiert und gestaltet werden. Die Applikation kann gern über das technisch Mach- bare 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 Ge- staltungsrichtlinien für das iPhone halten, im zweiten Screen kann man deutlicher davon abweichen.

Die Entwürfe sollen 320 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle.

Ansatz

Zusammen mit Oliver Mohr entwickelte ich ein AddOn für den integrierten iPhone Kalender. Unsere Überlegung war: „Was wäre, wenn man, zusätzlich zu den Aufgaben oder Terminen, die für einen Tag anstehen, eine Art Route dargestellt bekomme, die mich von Termin zu Termin bringt?“ Also eigentlich ein MashUp aus Kalender und Navigationsoftware. Herausgekommen sind verschiedene Screens, die Applikation wird als neuer Tab „AR“ direkt in den Kalender integriert, und bietet mir neben der Anzeige der Wegstrecke zu den Terminen zusätzlich die Möglichkeit der Auswahl, mit welchem Verkehrsmittel ich diese erreichen möchte.

3. KlangBilder (Narratives in Time and Space)

1.151-Klangbild-100113-3-01.png1.151-Klangbild-100113-3-01.png

Die Beziehung zwischen Klängen und Bildern ist notwendigerweise willkürlich. Es gibt kein festes Bezugssystem, das einem ermöglichen würde, ein Klangerlebnis einer räumlichen Struktur zuzuordnen. (Die einzige Ausnahme hierbei wären wohl Synästheten.) Dennoch ist die Zuordnung von Klängen zu Bildern eine der zentralen Kulturleistungen der Menschheit. Denn nur so konnten Laute aufgezeichnet und Schriften entwickelt werden.

Diese Beziehung beschränkt sich aber nicht nur auf Sprache. Auch in der Musik ist die Frage nach der Notation von zentraler Bedeutung. Weiterhin gibt es auch besondere Buchstabensysteme, wie z.B. das Morse-Alphabet, bei dem die Zuordnung von akustischen und graphischen Zeichen sehr eng ist. Darüber hinaus hat die Beziehung zwischen Klang und Bild auch immer die bildende Kunst beschäftigt.

Ansatz

Nach einigem Hin- und Herüberlegen, welcher Klang wohl interessant wäre zu visualisieren, kam ich auf Nouvelle-Vague-Klassiker „Bande à part“ oder zu deutsch „Die Außenseiterbande“ von Jean-Luc Godard. Da in diesem Film viel geredet wird, hatte ich eine typographischen Ansatz vor Augen. Ich pickte mir eine Szene mit einem interessanten Dialog heraus, eine Café-Szene in der alle drei Hauptfiguren des Film zusammen an einem kleinen Cafétisch sitzen, tippte eifrig Text mit, und arrangierte Die Sätze und Satzfetzen gemäß ihrer Zeitlichen Erscheinung vertikal auf einer Zeitachse. Zusätzliche Parameter wie Sitzposition der Protagonisten und Hintergrundgeräusche kamen nach der ersten Zwischenpräsentation dazu.

4. 1000 Worte

+1.151-1000Worte-100203.jpg+1.151-1000Worte-100203.jpg

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.

Ansatz

Zusammen mit Judith Hecktor ist eine Visualisierung des Designprozesses entstanden. Die Herausforderung für uns bestand darin, alles abstrakt zu halten, um den Grad der Anwendbarkeit zu erhöhen. Piktogramme gliedern die Schritte auf dem Weg zum fertigen Produkt.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Wintersemester 2009 / 2010