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 17|2

In dem Kurs „Basics Interface“ beschäftigten wir uns mit den grundlegenden Themen des Interface Designs. Unter der Leitung von Prof. Boris Müller haben wir vier Aufgaben, zwei in Partnerarbeit und zwei alleine, mit jeweils unterschiedlichen Schwerpunkten beabeitet und anschließend in der Gruppe präsentiert und ausgewertet.

1. Aufgabe: 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 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.

Umsetzung: Die Umsetzung erfolgte in Zusammenarbeit mit Daniele Maselli. Wir entschieden uns für das Buch „Make: Analog Synthesizers“, da dies nur über ein sehr einfaches Layout verfügte und somit noch genug Potential für eine digitale Fassung bestand. Nachdem wir uns anfangs mehr auf das Menü und einzelne Features fokussierten, mussten wir nach erstem Feedback feststellen, dass wir die Typografie vernachlässigt hatten, obwohl diese eher zum Schwerpunkt der Aufgabe zählte. Somit legten wir den Fokus nun primär auf die, wie in der Aufgabenstellung beschriebene, Lesbarkeit und Klarheit der Screens und prasentierten eine sehr schlicht gehaltene aber trotzdem moderne Darstellung des Buches.

XGA

3_H.png3_H.png
2_H.png2_H.png
1_H.png1_H.png

QVGA

small1.pngsmall1.png
small2.pngsmall2.png
small3.pngsmall3.png

2. Aufgabe: Klangbild

Aufgabenstellung: Es soll eine aufgezeichnete akustische Begebenheit 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. Die Audio-Dateien für die akustischen Begebenheiten werden im Kurs zufällig verteilt und sind offen für inhaltliche und visuelle Interpretation.

Umsetzung: Audiodatei:http://www.firenzesoundmap.org/eng/dettaglio.asp?id=26 Im Sound sind zwei Instrumente (Geige und Gitarre) dominant zu hören, während im Hintergrund eine Straßenkulisse deutlich wird. Ein kleines Publikum, dass den Musikanten ihre Aufmerksamkeit widmet ist ebenfalls erkennbar. Bei meiner Visualisierung habe ich mich an einem Radar orientiert, womit ich versuchen wollte die Richtung, aus der die einzelnen Klänge kommen, zu lokalisieren und aufzuzeichnen. Allerdings war es mir nicht möglich aus der gegebenen Tonaufnahme die Richtung der einzelnen Klänge präziese zu lokalisieren, wodurch das Klangbild eher willkürlich entstanden ist. Da es aber trotzdem möglich ist mit gewissen technischen Hilfsmitteln ein solches Klangbild „richtig“ zu erstellen habe ich die Idee nicht verworfen und als Möglichkeit zur Visualisierung eines solchen Klangbildes präsentiert.

IMG_0729.pngIMG_0729.png
IMG_0724.pngIMG_0724.png

3. Aufgabe: Graphical User Interface (GUI)

Aufgabenstellung: Es soll ein Inspirations-App für das iPhone realisiert werden. Das App soll also eine Gruppe von Designern / Entwicklern bei der Generierung von Ideen, Einfällen und Entwürfen unterstützen. Dabei können assoziative Ansätze genauso verfolgt werden wie strukturelle und systematische. Die genauen Funktionalitäten können in der Konzeptphase entwickelt werden. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr. Das Ziel ist, einen Entwurf zu erarbeiten, der sowohl den üblichen UI-Standards (iOS oder Android / Material Design) entspricht, aber trotzdem individuelle Züge trägt. Es ist sinnvoll, sich für den Entwurf auf eine Bildschirm-Auflösung festzulegen. Zusätzlich zum Entwurf soll ein Programmablaufplan (Bewegungspfade durch die App) skizziert werden. Die Aufgabe soll in Zweierteams bearbeitet werden.

Umsetzung: In Teamarbeit mit Ekaterina Oreshnikova haben wir uns schnell dazu entschieden ein App speziell für Moodboards zu entwerfen. Ein Moodboard wird im Designbereich, wie der Name schon sagt, dazu verwendet eine Stimmung zu einem bestimmten Thema zu präsentieren. Dies erfolgt meistens in Form einer Collage. Bei unserem App war uns wichtig, dass man wie im analogen Arbeiten eine Arbeitsfläche hat, auf der man sämtliche Inhalte willkürlich anordnen und bearbeiten kann. Ein Raster auf der Ebene dient dabei als Orientierungshilfe. Außerdem wollen wir den Nutzern die Möglichkeit geben ihre Arbeiten zu teilen/veröffentlichen bzw. mit anderen Nutzern zusammen an einem Board zu arbeiten. Ansonsten haben wir das App an die üblichen iOS UI-Standards angepasst und das individuelle Design der Features und das Farbfeld daran angelehnt.

GUI flowchart.pngGUI flowchart.png

screen8.pngscreen8.png
screen1.pngscreen1.png
screen7.pngscreen7.png
screen6.pngscreen6.png
screen2.pngscreen2.png
screen5.pngscreen5.png
screen4.pngscreen4.png
screen3.pngscreen3.png

4. Aufgabe: 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.

Umsetzung: Bei der 4. Aufgabe habe ich den Sachverhalt „Spielregeln“ gewählt und mich letzendlich dazu entschieden die Regeln des Brettspiels Schach ohne Worte dazustellen.

Unbenannt.PNGUnbenannt.PNG

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Wintersemester 2017 / 2018