„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. Weiterhin wird ein Überblick auf die Geschichte des Interface Designs gegeben, wobei relevante Projekte im Detail diskutiert werden.“

Aufgabenstellung

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 minde- stens 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.

Die Aufgabe soll in Zweierteams bearbeitet werden.

Umsetzung Moritz Jekat und ich haben uns für das Buch Secondhand & Vintage Berlin von Delia Dumitrescu entschieden. Secondhand & Vintage Berlin liefert Informationen zu den angesagtesten Shops für Vintage und Trödel in Berlin. Jeder Shop wird im Buch genau beschrieben, außerdem gibt es eine Einteilung in Berliner Bezirke. Uns war von Anfang an klar, dass der User möglichst schnell zu seiner gewünschten Shop-Detailauswahl gelangen soll. Um dem User diese Erfahrung zu bieten, setzen wir bei der Umsetzung auf einen simple Filterungsmöglichkeit und schnörkelloses Flat-Design. Um die Shop-Auswahl zu tätigen klickt der User im 1024px-Layout auf das Plus-Zeichen in der prominenten linken oberen Ecke. Nun kann der Nutzer seine Shop-Auswahl nach Bezirk und Shop-Kategorie eingrenzen. Mit einem Klick auf das X fährt der Nutzer die Filter-Funktion wieder ein, er sieht nun das Ergebnis seiner Auswahl. Die Shops sind untereinander angeordnet. Mit einem Klick auf die Lupe innerhalb eines Bildes wird statt einem Bild-Ausschnitt das gesamte Bild angezeigt. Durch vertikales Scrollen kann der Nutzer durch seine Shop-Auswahl navigieren. Die Struktur der mobilen Version ist ähnlich aufgebaut. Der Nutzer gelangt nach dem Start der App in eine Shop-Auswahl und gelangt durch einen Klick auf das Menü Icon zu den beiden Filtern, Kategorie und Bezirk. Mit einem Klick auf den Pfeil kann er die Filter-Auswahl wieder verlassen. In der Shop-Auswahl hat der Nutzer die Möglichkeit mit einem Klick auf einen Shop in eine Shop-Detailansicht zu gelangen. In dieser Shop-Detail-Ansicht hat er wiederum die Möglichkeit durch horizontales Wischen durch die Shops zu navigieren. Eine Besondere Herausforderung bestand für uns darin, beide Versionen auf einen Nenner zu bringen. Bei diesem Prozess haben uns die Feedback-Runden im Kurs sehr geholfen.

Aufgabenstellung

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 hi- nausgehen - 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 wer- den. Die Entwürfe sollen 320 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle. (Die Auflösung entspricht dem iPhone 3GS - Retina-Displays ignorieren wir.) Zusätzlich zur GUI soll ein Programmablaufplan (Flowchart) skizziert werden.

Umsetzung Eine simple, optisch ansprechende, iOS7 konforme Notiz-App zu entwerfen war meine Idee bei dieser Teilaufgabe. Der Nutzer soll möglichst schnell Notizen anlegen können. Die Ordnung der Notizen wird durch Datumsangabe sowie durch Tagging gewährleistet. Eine Suchfunktion ermöglicht dem Nutzer schnell an gewünschte Notizen zu gelangen. Durch ein Klick auf das Plus-Zeichen kann der Nutzer eine neue Notiz erstellen. Durch einen Klick auf Edit ist es ihm möglich Notizen bearbeiten. Es gibt eine Notiz-Übersicht und eine Detailauswahl der Notizen. Innerhalb der Detail-Auswahlen dient horizontales swipen als Navigationsmöglichkeit. Gelbe Post-It´s auf dem schwarzen Rahmen meines Monitors gaben mir die Inspiration für die grafische Umsetzung. Im Prozess der Gestaltung wurde mir die Komplexität einer App-Konzeption deutlich. Meine Achtsamkeit bei der Benutzung von Apps hat sich deutlich erhöht. Ich habe angefangen bestehende Konzepte zu analysieren und zu bewerten. Auch das Ziel, eine Balance zwischen iOS-konform und individueller Gestaltung herzustellen, war eine interessante Herausforderung für mich.