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

Basic Interface WS 12/13

Digitales Buch: "Easy Sushi"

1.png1.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.

Konzept

Mein Gruppenpartner [Christian Miethaner](http://incom.org/profil/5045 „zum Incom Provil von Christian“) und ich entschieden uns für ein kleines Kochbuch mit dem Titel „Easy Sushi“ als Vorlage. Inhaltlich hält der Titel sein Versprechen. Das Buch besteht aus großen Fotos und einfachen, nicht zu langen Texten. Das Layout und die Gestaltung mit Endneunziger-Ästhetik schrie jedoch förmlich danach in der digitalen Umsetzung überdacht zu werden. Der Leser orientiert sich vor allem an den großen Fotos beim durchblättern. Der erste view zeigt somit nur Fotos. Durch tap auf ein Gericht bewegt man sich in einen intro view, der dann den Namen, ein paar Fakten zum Rezept und eine Einleitung zusammen mit einer großen Version des Fotos zeigt. Nach einem tap auf den Messer button gelangt der Leser auf die dritte und tiefste, die Rezept-Ebene. Das originale Buch distanziert sich von der Japanischen Herkunft der Rezepte. In der digitalen Version haben wir versucht durch subtile Elemente wie den Kreis und die Farbe rot auf weißem Hintergrund ein Stück Identität zurück zu geben ohne dabei das „Easy“ aus „Easy Sushi“ zu verlieren durch zu viele Ornamente. Auf kleiner Auflösung (touch) haben wir nur den intro view inhaltlich reduziert und auf die Einleitung verzichtet. Der Rezept view hat statt zwei, drei „tabs“, die den Inhalt gliedern. Für bessere Benutzbarkeit wurde das Kreiselement gegen viereckige UI Elemente eingetauscht.

0.png0.png
1.png1.png
2.png2.png
3.png3.png

m0.pngm0.png
m1.pngm1.png
m2.pngm2.png
m3.pngm3.png
m4.pngm4.png

iOS-App GUI: Boards

Untitled-1.pngUntitled-1.png

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.

Konzept

Boards ist eine iOS-App, die es einzelnen oder Gruppen ermöglicht alle Möglichkeiten des iPhones zu nutzen, um Inspiration und Ideen „Geistesblitze“ auf „boards“ zu sammeln, sortieren und am Ende als moodboard auszugeben. Fotos, Videos, Tonaufnahmen, Text und Location werden nach Auswahl eines boards mit einem tap auf den Blitz oben rechts aufgenommen und sind anschließend in einer timeline „Curate“-view chronologisch für alle Teilnehmer zu sehen. Es gibt eine Detailansicht auf der der Geistesblitz diskutiert und mit thumbs up für relevant befunden werden kann. Der „Arrange“-view bietet die Möglichkeit alle Geistesblitze nach subjektiver Relevanz zu sortieren. Der „Preview“-view stellt dann die zuvor sortierten (oder noch nicht sortierten - jeder Zeit) items in form eines Moodboards dar. Mit einem tap auf den Export-button oben rechts kann dieses Moodboard verschickt, als PDF gespeichert, oder anders ausgegeben werden kann.

0.png0.png
1.png1.png
2.png2.png
3.png3.png
4.png4.png

Klangbild: Geldautomat

Untitled-3.pngUntitled-3.png

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.

Konzept

Aufnahme auf SoundCloud Ich bin bildlich an die Aufgabe herangegangen und habe versucht die Töne, die ich beim Geld abheben aufgezeichnet habe zu visualisieren. Die Grafik liest sich von unten nach oben. Je weiter links sich ein Symbol befindet, desto lauter kann es in der Aufzeichnung wahrgenommen werden. Die Grafik selbst besteht aus Elementen einer stark vereinfachten Euronote. Die Zahlen links, die normalerweise den Wert der Note zeigen dienen hier als Zeitanzeige. Die fünf verschiedenen Symbole stehen für die fünf verschiedenen Töne. Die Größe zeigt abgelesen an der y-Achse wie lange der Ton zu hören ist.

Volle Auflösung

Klangbild.pngKlangbild.png
legende.pnglegende.png

1000 Worte: Bundestagswahl

1000 Worte 2-04.png1000 Worte 2-04.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.

Konzept

Julian Thiel und ich entschieden uns dafür die Bundestagswahl zu visualisieren. Wir haben uns dabei auf den Wahlvorgang konzentriert und durch zwei verfolgbare Wege den Prozess vom Kreuz machen bis zum Einzug in den Bundestag dargestellt. Die Wege beginnen am unteren Rand der Grafik mit den Wahlberechtigten (blau). Ein Kreuz wird gemacht (blau) und von diesem Punkt aus kann man den Weg des abgegebenen Kreuzes bis zur Aufteilung des Bundestages verfolgen.

Fazit

Untitled-1.jpgUntitled-1.jpg

Nach jeder Präsentation hatte ich das Gefühl noch bewusster zu arbeiten dank sehr detailierter Analyse und Kritik an jeder Aufgabenlösung. Bis auf die Klangvisualisierung haben alle Themen spaß gemacht. Darüber hinaus gab der Kurs den Anlass sich mit Dingen auseinanderzusetzen, die ich sonst gerne verdrängt habe wie das Respektieren der iOS Human Interface Guidelines oder die Wichtigkeit von elementaren Gestaltungstechniken wie baseline grids. Der Kurs hat meine Wahl des Studiums bestätigt.

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