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 14|1

„Dieser Kurs stellt eine grundlegende Auseinandersetzung mit den zentralen Themen des Interface Designs dar.“

#1 | Digitales Buch

Ein Buch über Edward Hopper und sein Lebenswerk, verfasst von Ivo Kranzfelder, übersetzt ins Digitale.

»Es soll eine digitale Fassung Ihres Lieblingsbuches gestaltet werden. 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 mindestens vier Screens in zwei verschiedenen Formaten vorgestellt werden - mindestens zwei horizontale Screens im Format von 1024 x 768 Pixeln (XGA) und mindestens zwei vertikale Screens im Format von 240x320 Pixeln (QVGA). 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.«

[Ioannis](https://incom.org/profil/5647 „https://incom.org/profil/5647“) und ich wurden in ein Team gelost. Wir haben uns direkt auf ein Buch über Edward Hopper geeinigt.

Uns war wichtig von Anfang an gemeinsam am Konzept und Design zu arbeiten, um zur finalen Präsentation eine Einheit aus iPad und iPhone bilden zu können. Wir arbeiteten zunächst an dem Navigationskonzept für beide Geräte mit Stift und Papier. Danach konzentrierte sich Ioannis auf die iPad Version und ich mich auf die Smartphone Version. Wir haben uns mehrmals getroffen um möglichst schnell Änderungen abzusprechen und umzusetzen.

Rückblickend schaue ich auf ein tolles Projekt, eine sehr lustige und spannende Zusammenarbeit mit Ioannis. Wir verstanden uns auf anhieb und aus dem Projekt ist im mittlerweile ein kleines Side-Project geworden.

240 x 320 Pixel

02_db_hopper_mobil_cover.jpg02_db_hopper_mobil_cover.jpg

02_db_hopper_mobil_5.png02_db_hopper_mobil_5.png
02_db_hopper_mobil_4.png02_db_hopper_mobil_4.png
02_db_hopper_mobil_3.png02_db_hopper_mobil_3.png
02_db_hopper_mobil_7.png02_db_hopper_mobil_7.png

02_db_hopper_mobil_9.png02_db_hopper_mobil_9.png
02_db_hopper_mobil_10.png02_db_hopper_mobil_10.png
02_db_hopper_mobil_11.png02_db_hopper_mobil_11.png
02_db_hopper_mobil_12.png02_db_hopper_mobil_12.png
02_db_hopper_mobil_13.png02_db_hopper_mobil_13.png
02_db_hopper_mobil_8.png02_db_hopper_mobil_8.png

02_db_hopper_mobil_16.png02_db_hopper_mobil_16.png
02_db_hopper_mobil_14.png02_db_hopper_mobil_14.png
02_db_hopper_mobil_15.png02_db_hopper_mobil_15.png
02_db_hopper_mobil_17.png02_db_hopper_mobil_17.png
02_db_hopper_mobil_18.png02_db_hopper_mobil_18.png

1024 x 768 Pixel

01_db_hopper_tablet_1.png01_db_hopper_tablet_1.png

01_db_hopper_tablet_2.png01_db_hopper_tablet_2.png
01_db_hopper_tablet_3.png01_db_hopper_tablet_3.png
01_db_hopper_tablet_4.png01_db_hopper_tablet_4.png
01_db_hopper_tablet_5.png01_db_hopper_tablet_5.png
01_db_hopper_tablet_6.png01_db_hopper_tablet_6.png
01_db_hopper_tablet_7.png01_db_hopper_tablet_7.png
01_db_hopper_tablet_8.png01_db_hopper_tablet_8.png
01_db_hopper_tablet_9.png01_db_hopper_tablet_9.png

01_db_hopper_tablet_10.png01_db_hopper_tablet_10.png
01_db_hopper_tablet_11.png01_db_hopper_tablet_11.png
01_db_hopper_tablet_12.png01_db_hopper_tablet_12.png
01_db_hopper_tablet_13.png01_db_hopper_tablet_13.png

#2 | GUI

Brainstorming App

»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.«

0.0.jpg0.0.jpg

Das Ziel war eine simple App um spontane Ideen festzuhalten (wie zum Beispiel auf dem Weg zur Uni).

Um möglichst schnell neue Ideen festzuhalten, werden neue Begriffe erstmal als nicht kategorisiert einsortiert. Es können nachträglich natürlich neue Kategorien erstellt und Begriffe umsortiert werden. Die App schlägt verwandte aber manchmal auch komplett irrelevante Begriffe vor um auf neue Gedanken zu kommen. Freunde können zu Projekten eingeladen werden. Die Sammlung kann dann in verschiedene Dateitypen exportiert bzw. ausgedruckt werden.

0.5.png0.5.png

1.0.png1.0.png
2.0.png2.0.png
3.0.png3.0.png
4.1.png4.1.png
5.0.png5.0.png
6.0.png6.0.png
7.0.png7.0.png

#3 | Klangbild

Oliver Kahn Interview

»Es soll ein Gespräch zwischen zwei oder mehreren Leuten visualisiert werden. Der zeitliche Ablauf, die Emotionalität sowie der eventuelle klangliche Hintergrund der Begebenheit soll also für den Betrachter nachvollziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Das Gespräch soll aufgezeichnet / gespeichert und auch mit präsentiert werden.«

Mir war von Anfang an klar, dass ich ein Fußballinterview wählen würde. Kahn war die logische Schussfolgerung. Nach dem Absturz in der Champions League setzt sich die Misere bei FC Bayern München in der Bundesliga fort. 0:2 unterlagen die Bayern bei Werder Bremen, das viel erwartete „jetzt erst recht“ blieb aus.

Meine erste Idee war es, daraus eine Art Performance zu machen. Dabei würde ich, abhängig von der Person und deren Stimmung, verschiedene Farben im Mund mischen und nacheinander auf das Blatt spucken. Da die Farben jedoch eher unangenehm geschmeckt haben und sich die Farben nicht gezielt spucken ließen, musste ich mir etwas anderes einfallen lassen... Knete. Jede der Kugeln steht für ein Wort. Die Größe hängt dabei von der (Laut)Stärke des Wortes ab. Rot steht dabei für den Reporter und blau für Kahn. Ich mischte Gelb hinzu wenn die Stimmung humorvoll war, weiß wenn unsicher und braun wenn gleichgültig. Die Kugeln sind Strudelförmig angeordnet und das letzte Wort steht in der Mitte.

DSC_0251-22.jpgDSC_0251-22.jpg

Dribbble_1.pngDribbble_1.png

#4 | 1000 Worte

Die Domestizierung des Feuers

»Es soll ein komplexer Sachverhalt gesucht und in einem Schaubild oder in einem interaktiven Film dargestellt werden. Die Darstellun 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.«

Wir ([Ioannis](https://incom.org/profil/5647 „https://incom.org/profil/5647“)) haben uns für das Thema „Die Domestizierung des Feuers“ entschieden. Verschiedenste Icons, vom Meteoriten und Vulkan bis hin zum Zippo, erzählen die Geschichte des natürlichen und künstlichen Feuers. Die Idee war Anfangs stark vereinfachte Icons zu gestallten. Wir entschieden uns für weiß, rot und schwarz um möglichst hohe Kontraste und einfache Formen zu erhalten. Dies war jedoch schwieriger als gedacht und kamen daher nicht über einfache Skizzen hinaus. Es war vor allem war es schwierig einen gemeinsamen Stil zu finden. Insgesamt sollten ca. 15 Icons in einem Zeitstrahl angeordnet werden..

1000Worte.jpg1000Worte.jpg

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Sommersemester 2014