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

Hier findest du meine Auseinandersetzung mit den Themen Screen-Design, grafische User-Interfaces, Visualisierung und Semiotik.

Digitales Buch

In der ersten Aufgabe sollte eine digitale Fassung eines Buches gestaltet werden. In zweier Teams erarbeiteten wir exemplarische Screens – im Format von 1024 x 768 Pixeln (XGA) und 240x320 Pixeln (QVGA). Es sollte sowohl der Inhalt des Buches wiedergeben als auch ein Navigationssystem deutlich werden. Zu achten war außerdem auf die Lesbarkeit sowie die Klarheit der Darstellung. 

Vi Quan Ta und ich entschieden uns hierbei für das Buch Ready Player One von Ernest Cline. Passend zum Inhalt des Buches sollte unser digitales Buch eine Video Game Aesthetic erhalten. Wir entschieden uns für ein Pixel Game Theme und versuchten sowohl die Graphics als auch die Typografie darauf anzupassen.

Horizontal_3A.pngHorizontal_3A.png
Horizontal_2A.pngHorizontal_2A.png
Horizontal_1A.pngHorizontal_1A.png
Horizontal_4A.pngHorizontal_4A.png
Horizontal_5A.pngHorizontal_5A.png

Vertikal_1.pngVertikal_1.png
Vertikal_2.pngVertikal_2.png
Vertikal_3A.pngVertikal_3A.png
Vertikal_4A.pngVertikal_4A.png
Vertikal_5A.pngVertikal_5A.png

Graphical User Interface

In der zweiten Aufgabe ging es um die Gestaltung einer Inspirations-App.
Die Zielgruppe hierbei: Designer*innen.

Auch an dieser Aufgabe arbeitete ich mit Vi Quan Ta. Ziel war es, eine individuellen Ansatz in der Gestaltung zu finden, welcher dennoch den UI-Standards entspricht. Zusätzlich sollte ein Programmablaufplan skizziert werden.

GUI-Mockup.pngGUI-Mockup.png

Wir entschieden uns für den iOS-Standart, tauchten jedoch für iOS untypisch alles in Farbe ein. Hierbei versuchten wir mit Farbkontrasten und einem Farbverlauf des Hintergrunds zu arbeiten. Zusätzlich erhielten die verschiedenen Elemente der App eine asymmetrische Form, bei der nur die diagonalen Ecken die jeweils gleiche Abrundung haben.

Unbenannt-4.pngUnbenannt-4.png
Unbenannt-5.pngUnbenannt-5.png
Unbenannt-6.pngUnbenannt-6.png

Mit der App soll die Ideenpräsentation erleichtert werden. So können persönliche Vorstellung aus vorher gespeichert Ideen zusammengestellt werden. Hierfür wird ein Projekt erstellt, auf welches mehrere Personen zugreifen und Slides erstellen können.

Besonders hilfreich hierfür sollen die Templates sein. Nach schneller Auswahl von Bild, Illustration und / oder Text, kann sich ein Template ausgesucht werden. Nach automatischer Zusammenstellung der Slide können zusätzlich Icons hinzugefügt, sowie Farben verändert werden.

Unser Programmablaufplan:

1_PAP.png1_PAP.png

Klangbilder

Für die dritte Aufgabe sollte ein Klang in einem Zeitraster visualisiert werden. Dieser Klang wurde zufällig zugeteilt und von einem anderen Kursteilnehmer aufgenommen. Die Visualisierung war hierbei komplett frei wählbar.

Hanne_Dahlmann_Klangbild.pngHanne_Dahlmann_Klangbild.png
Klangbild_Mockup.pngKlangbild_Mockup.png

Ich wählte für die Visualisierung ein Punkteraster. Jede Zeile stellt eine Sekunde des Klangs dar, jeder Punkt eine fünfundzwanzigstel Sekunde. Die Lautstärke des Klangs zeigt sich anhand der Größe der Punkte. Je größe ein Punkt, desto lauter der Klang zu jenem Zeitpunkt. Zusätzlich habe ich Ereignisse im Klang interpretiert und ihnen eine Farbe zugeordnet. Gleiche Ereignisse erhielten hierbei die gleiche Farbe. Mithilfe der Deckkraft der Farben konnte ich weitere subjektiv wahrgenommene Akzente setzen. Das Blatt enthält somit eine Mischung von objektiven Fakten der Aufnahme, sowie den subjektiven Wahrnehmung des Menschen.

1000 Worte

In der letzten Aufgabe sollte ein Sachverhalt in einem Schaubild ohne jeglichen Text dargestellt werden.

Hanne_1000_Worte.PNGHanne_1000_Worte.PNG

Visualisieren wollte ich die verschiedenen Ebenen, die bis zum fertigen Gericht durchlaufen werden. Ich unterschätze jedoch die Zeit am Ende des Semestern und wählte eine zu detaillierte Darstellung, welche ich in Procreate umsetzte. So entstanden zwar schöne Zeichnungen, doch die inhaltliche Ebene wurde stark reduziert.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 20|02

Entstehungszeitraum

Wintersemester 2020 / 2021