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

Dies ist meine Dokumentation des Kurses Basics Interface im WinterSemester 17/18 bei Professor Boris Müller. Durch vier verschiedene Aufgaben wurden uns einige Themen des Interfacedesigns mitgeteilt.

Digitales Buch

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

Für diese Aufgabe wurde „Design Handbuch“ von Charlotte und Peter Fiell ausgewählt. Selbst wenn man das Buch irgendwo öffnet, stößt man auf einen interessanten Artikel, in dem es um ein Objekt oder eine Designbewegung geht. Egal welche Seite geöffnet wird, bekommt man einen interessanten Artikel in Bezug auf Designgeschichte. Mit unserem Projekt wollten wir dieses Prinzip umsetzen.

K - 1 Start.pngK - 1 Start.png
K - 2 Start2.pngK - 2 Start2.png
K - 3 Artikel.pngK - 3 Artikel.png
K - 8 suche.pngK - 8 suche.png
K - 9 Favorit.pngK - 9 Favorit.png
G - 4 Suche.pngG - 4 Suche.png
G - 1 Start.pngG - 1 Start.png
G - 2 artikel.pngG - 2 artikel.png
K - 7 Artikel voll unt.pngK - 7 Artikel voll unt.png
K - 6 Artikel teul mit.pngK - 6 Artikel teul mit.png
K - 5 Artikel teul ob.pngK - 5 Artikel teul ob.png
K - 4 Artikel voll.pngK - 4 Artikel voll.png
G - 3 artikel vol.pngG - 3 artikel vol.png

Klangbilder (Narratives in Time and Space)

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

Jeder Teilnehmer hat eine nummerierte Audiodatei bekommen. Für jeden war es schwer, genau zu erkennen, was die Geräusche macht oder wo es passiert. Ich hatte ein paar deutliche Geräusche erkannt und die waren Basis und Anfang meines Klangbildes.

2.png2.png

Als wir unsere Projekte präsentiert haben, haben wir erfahren, dass die Dateien ein Teil des Projektes „Firenze Sound Map“ waren. Alle Dateien wurden in Florenz aufgenommen. Hier ist meine Datei „Datei № 30“.

Graphical User Interface (GUI)

Aufgabe: 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-Aufösung festzulegen. Zusätzlich zum Entwurf soll ein Pro- grammablaufplan (Bewegungspfade durch die App) skizziert werden.

Es war eine Aufgabe, die wir in Zweierteams bearbeiten sollten. Der Prozess der Ideenentwicklung und die erste Präsentation haben wir zusammen gemacht, danach haben wir uns entschieden unser Projekt jeder für sich weiter zu machen.

Die Idee unseres Konzeptes war folgende: Man kann Inspiration aus der Umgebung bekommen und das Programm soll dabei helfen, die eigene Idee nicht zu vergessen, und eventuell die eigene Idee weiter zu entwickeln. Die Inspiration von der Umwelt wird über die Handykamera aufgenommen und mit Hilfe des Programms bearbeitet und neu generiert und/oder mit Freunden/Kollegen geteilt.

Ispiration APP-01.pngIspiration APP-01.png
1 - Registrierung .png1 - Registrierung .png
11 - generieren animation.png11 - generieren animation.png
2 - Start .png2 - Start .png
14 - Generieren Abscheiden .png14 - Generieren Abscheiden .png
13 - Pipette  Copy.png13 - Pipette  Copy.png
12  - Pipette .png12  - Pipette .png
5 - Suche.png5 - Suche.png
3 - Start 2.png3 - Start 2.png
4 - Bild fertig.png4 - Bild fertig.png
10 - Generieren VOLL.png10 - Generieren VOLL.png
6 - Suche Bilder.png6 - Suche Bilder.png
7 - Suche  Einstellungen.png7 - Suche  Einstellungen.png
8 - Generierung Bild.png8 - Generierung Bild.png
9 - Generieren.png9 - Generieren.png
15 - Generieren Markieren.png15 - Generieren Markieren.png
16 - Generieren Markieren 2.png16 - Generieren Markieren 2.png
17 - Gäste.png17 - Gäste.png
18 - Ordner .png18 - Ordner .png
19 - Ordner  Copy.png19 - Ordner  Copy.png
20 - Bild Hinzufügen.png20 - Bild Hinzufügen.png
21 - Idee von ihnen.png21 - Idee von ihnen.png
22 - Idee von ihnen ednde.png22 - Idee von ihnen ednde.png
23 - Idee bearbeiten .png23 - Idee bearbeiten .png
24 - Profil.png24 - Profil.png
25 - Mitgliederliste .png25 - Mitgliederliste .png

1000 Worte

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 kommu- niziert 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.

Mit dieser Aufgabe sollten wir eine, sozusagen, kleine Geschichte erzählen, aber ohne Wörter. Ich habe mich für die „Erzählung“ des Offsetdruckprozesses entschieden. Es ist jedoch nur eine grobe Darstellung, da dieser Prozess aus vielen Kleinigkeiten, chemischen und physikalischen Formeln besteht. Um das alles darzustellen, bräuchte man mehr als ein paar Wochen, die ich leider nicht hatte. Mit meiner Darstellung wollte ich erreichen, dass Betrachter die Veränderungen des Bildzustandes verfolgen können, wie aus einer digitalen Datei im RGB-Farbraum ein analoges Objekt im CMYK-Farbraum wird.

Denys 1000-3.pngDenys 1000-3.png

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Wintersemester 2017 / 2018