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 | 2023/24

Der Kurs Basics Interface behandelt die Herangehensweise an gestalterische Probleme im Interfacedesign. Durch drei verschiedene Aufgaben werden einzelne Bereiche behandelt, die mit theoretischen Vorträgen verbunden sind. Hierbei beschäftigt man sich mit Screentypographie, Gestaltung eines Graphical User Interface (grafische Benutzerschnittstelle) und Informationsgrafiken.

1. Digitales Buch

Die erste Aufgabe bestand darin, mit einem zugeteiltem Partner ein Buch auszuwählen und eine digitale Version für zwei verschiedene vorgegebene Screengrößen zu erstellen. Der Fokus lag hier vor allem auf dem Layout und der Typografie. Die vorgegebenen Größen waren 1024x768 (XGA) und 240x320 (QVGA).

Lisa-Marie Pfadt und ich haben uns für das Buch Pinocchio entschieden. Da das Buch viel Text und nur wenige Illustrationen hat, war die größte Herausforderung, den Text auf verschiedenen Screengrößen übersichtlich darzustellen.

Zu Beginn haben wir unsere Ideen zusammen getragen und festgelegt, was für uns in unserem digitalem Buch wichtig ist. Wir entschieden uns für einen simplen Aufbau der Kapitel, um den Text gut lesbar wiederzugeben.

Bei der ersten Feedback-Runde wurde die Progress-Bar, welche wir zuerst am unteren Rand des Bildschirms positioniert haben, als störend wahrgenommen. Wir vereinfachten sie und setzten sie an den linken Bildschirmrand.
Des weiteren war unser Layout zu Beginn noch unübersichtlich und Teile des Inhalts „schwommen“ im Raum. Für eine bessere visuelle Wahrnehmung führten wir zwei Spalten ein, um Text und Illustrationen klar von einander zu trennen.

Fazit - Am meisten habe ich aus dieser Aufgabe mitgenommen,  wie wichtig es ist, auf die Lesbarkeit von Texten zu achten, vor allem bei kleinen Screengrößen. Des weiteren habe ich das erste mal mit kleinen Screengrößen gearbeitet, was eine neue aber spannende Herausforderung war.

Cover.pngCover.png
1.png1.png
2.png2.png
3.png3.png
4.png4.png
5.png5.png
240201_MockupBuch.png240201_MockupBuch.png
6.png6.png
7.png7.png
8.png8.png
9.png9.png
10.png10.png
11.png11.png
12.png12.png

2. GUI - Graphical User Interface

In der zweiten Aufgabe ging es um die Entwicklung einer App, entweder für iOS oder Android, die Designer in ihrer täglichen Arbeit unterstützt. Die App wird als statische Screens präsentiert und auch durch ein Flowchart-Diagramm mit Bewegungspfaden.

Mein Teampartner für diese Aufgabe war Julian Scott. Wir haben uns als Konzept für unsere App auf eine Designdatenbank App festgelegt, die es Designern ermöglicht, Farben und Fonts zu scannen, zu taggen und zu ordnen.
Die App dient als Sammelort für alle Farben und Fonts, die man beispielsweise unterwegs in der Bahn, auf der Straße oder im Cafe sieht und schnell speichern will. Der Benutzer kann direkt auf die Kamera zugreifen und zum Beispiel eine Farbe live scannen. Bilder können auch aus der Galerie hochgeladen und analysiert werden. 
Die Struktur der App basiert auf Tags und Projekten.
Jedem Objekt kann ein oder mehrere Tags zugewiesen werden, um ein Filtern zu ermöglichen. Des weiteren werden zusammengehörige Objekte in Projekten angelegt.

Wir haben uns entschieden, die App für iOS zu entwickeln und die Human Interface Guidelines zu verwenden. Hierfür konnten wir auch das offizielle Apple Ui Kit in Figma verwenden.

Als erstes haben wir ein Moodboard und erste Skizzen unserer App in Figjam gestaltet. Im Anschluss haben wir ein erstes Flowchart-Diagramm erstellt, um den Ablauf unserer App grob festzulegen.

FigJamBoard.pngFigJamBoard.png

In einer Feedback-Runde stellten wir fest, dass unsere Navigation nicht schlüssig war und an manchen Stellen Elemente mehrfach vorkamen.  Wir entschieden uns daraufhin den Screen der „Sammlung“ als Mainscreen zu nehmen. Auf die anderen Screens gelangt man durch die Buttons in der NavBar.

Die größte Herausforderung bei der zweiten Aufgabe war für mich die Benutzung des Apple Ui-Kits. Zum einen erleichterte es die Arbeit, da man alle Komponenten schon hatte und nur noch zusammen setzen musste. Das war allerdings auch eine Herausforderung, da man teilweise sehr eingeschränkt war. 

Diese Aufgabe hat mir viel Spaß gemacht und ich habe viel gelernt, insbesondere was den Aufbau und die Navigation von Apps angeht.

01.png01.png
05.png05.png
03.png03.png
02.png02.png
04.png04.png
07.png07.png
06.png06.png
08.png08.png
09.png09.png
10.png10.png
11.png11.png
12.png12.png
13.png13.png
0.png0.png

3. 1000 Worte

Für die letzte Aufgabe sollte ein komplexer Sachverhalt mithilfe einer Infografik möglichst einfach und klar  dargestellt werden. Hierbei durfte keinerlei Text verwendet werden.

Diese Aufgabe wurde alleine bearbeitet und ich entschied mich für den Ablauf der Proteinbiosynthese. Diese beschreibt wie aus Aminosäuren Proteine gebildet werden. Die größte Herausforderung war, einen sehr komplexen Prozess möglichst vollständig und verständlich darzustellen.

Bei den ersten Versionen arbeitete ich mit verschiedenen Farben und einem skizzenhaften Stil. Durch das Feedback ergab sich, das die Farben eher ablenkend als hilfreich wirkten. Für die finale Version habe ich die Illustration deshalb auf zwei Farben reduziert und diese nur in der Helligkeit variiert. Des weiteren hab ich sehr klare Linien und Formen verwendet, um das ganze so verständlich wie möglich zu machen.

Fazit - Die größte Herausforderung bei der letzten Aufgabe war das Arbeiten ohne Text. Man musste sich Gedanken machen, wie man Text durch verständliche Grafiken ersetzen kann. Ich habe mich für bekannte Icons wie zum Beispiel Copy/Paste entschieden, da diese leicht zu erkennen sind. 
Neu war es auch für mich, Adobe Illustrator für das ganze Projekt zu verwenden.

1.png1.png

Fazit

Für mich war der Kurs ein sehr gelungener Einstieg in das Studium Interfacedesign. Durch die Dreiteilung der Aufgaben kann man einzelne Projekte bereits während des Semesters abschließen und hat nicht ein großes Projekt, auf das man das ganze Semester hinarbeitet. Auch das Losen der Teampartner hat mir gut gefallen, so lernt man, sich in kurzer Zeit auf einen neuen Teampartner einzustellen. 
Durch die verschiedenen Aufgaben hat man außerdem Einblick in drei verschiedene Bereiche des Interfacedesign bekommen und konnte sich so unterschiedlichen Herausforderungen stellen.
Die wöchentlichen Feedbackrunden waren sehr positiv, da man konstanten Input zu seinen Designs bekommt, was das Arbeiten erleichtert.
Ein sehr empfehlenswerter Kurs, besonders für den Studienbeginn.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 02|23

Entstehungszeitraum

Wintersemester 2023 / 2024