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 14|1 David Röttger

Dokumentation zum Kurs „Basic Interface“ bei Prof. Boris Müller im SS 2014.

Kursbeschreibung

„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.“

Digitales Buch

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.

DOKU Basic Interface.jpgDOKU Basic Interface.jpg

DOKU Basic Interface2.jpgDOKU Basic Interface2.jpg

DOKU Basic Interface3.jpgDOKU Basic Interface3.jpg

DOKU Basic Interface4.jpgDOKU Basic Interface4.jpg

Graphical User Interface

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.

gui.jpggui.jpg

gui2.jpggui2.jpg

Klangbild

Aufgabenstellung

Es soll ein Gespräch zwischen zwei oder mehreren Leuten visualisiert werden. Der zeitliche Ablauf 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.

Umsetzung Als Grundlage für mein Klangbild diente ein Dialog aus dem Film Herr Lehmann, ein Dialog zwischen einem Hund und dem Protagonisten in einer brenzlichen Situation. Entstanden ist ein Video welches die Emotionalität des Dialoges visualisiert. Im Verlauf des Dialoges flackern Quadrate auf. Sobald Stille herrscht bleibt der Screen schwarz. Die Größe der Quadrate sowie dessen farbliche Sättigung richtet sich nach dem Lautstärke-Pegel des Dialoges. Am Anfang des Dialoges ist die Situation entspannt, kleine weiße Quadrate flackern auf. Als die Situation zwischen Herr Lehmann und dem Hund zu eskalieren scheint, steigert sich der Lautstärke-Pegel, die aufflackernden Flächen sind rot gesättigt und füllen die Bildfläche. Zur Umsetzung habe ich Processing und die Minim Library genutzt. Da ich einige Zeit brauchte um mich mit der technischen Umsetzung auseinanderzusetzen blieb der konzeptionelle Fernschliff leider auf der Strecke. Gerne hätte ich weitere Parameter gemappt um das Klangbild komplexer zu gestalten. Leider ließ es die Zeit nicht zu.

klangbild.jpgklangbild.jpg

1000 Worte

Aufgabenstellung 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.

Umsetzung Paul Roemer und ich haben uns für das Thema Schokoladenproduktion entschieden. Im Team haben wir eine vektorbasierte Infografik entwickelt. Als Grundlage für die Vektorisierung diente eine Bleistiftskizze.

R&R_Scan.pngR&R_Scan.png

ID_1000_Worte.pdf.pngID_1000_Worte.pdf.png

Fazit

Der Kurs hat mir besonders gut gefallen. Durch die sehr interessanten Vorträge, die Feedback-Runden sowie durch die praktische Umsetzung der Aufgaben habe ich einiges an neuem Wissen erlangt, welches meinen zukünftigen Projekten mit Sicherheit zu Gute kommen wird. Sehr positiv gefiel mir der Fokus auf den sinnvollen Einsatz von Typografie in Apps. Vielen Dank!

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Wintersemester 2014 / 2015