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 02|21

Im Kurs »Basics Interface« wurden drei Aufgaben, die unterschiedliche Seiten des Interfacedesigns thematisieren von Prof. Boris Müller gestellt. Entstanden sind Entwürfe von zwei Screen-Interfaces, ein Buch und eine Applikation, sowie die Grafik eines komplexeren Sachverhaltes.

№1 DESIGN{H}ERS

Die Aufgabe »Digitales Buch«

Für diese Aufgabe wurden wir zufällig in Teams aus zwei Personen aufgeteilt und es galt es ein Buch in zwei unterschiedlich große Formate zu übersetzen. 

Meine Partnerin für diese Aufgabe war die liebe @Jaqueline Grob mit der ich das Buch „DESIGN{H}ERS ‒ A Celebration of Women in Design Today‟ (sehr empfehlenswert, wenn du glaubst, du kennst nur DesignER!) in diese Formate brachte.

Die ersten Entwürfe waren noch von »Regellosigkeit« geprägt und wirkten in der Platzierung der Inhalte zwar anschaubar, aber noch unentschlossen. Dadurch ergänzten wir z.B. unsichtbare Grid Strukturen für das Layout des Inhaltsverzeichnis und siehe da: 

Das bewusstere Platzieren gab dem Design eine angenehme Klarheit, 
die im finalen Ergebnis gut zu sehen ist.

№2 SHORTCUT PLUGIN

Die Aufgabe »Graphical User Interface«

E i g e n t l i c h war die Aufgabe für eine Smartphone App ausgelegt, um die jeweiligen Guidelines anzuwenden. Wir fanden allerdings ein kleines Schlupfloch in der Formulierung und haben statt einer Smartphone App einen Desktop Plugin gebaut. 

Für diese Aufgabe arbeitete ich mit der in Figma sehr gewandten @Ly Hoang Thi zusammen an einem Shortcuts Plugin für Adobe Anwendungen, um das Arbeiten und Erlernen von Shortcuts zu erleichtern.

Zu Beginn beinhaltete der Plugin eine Akzentfarbe des jeweiligen Adobe Programms, was ablenkte und nicht entsprechenden den Apple Guidelines aussah. Das führte dazu, dass wir den Plugin im Dark Mode weiter ausarbeiteten. Die für mich größte Schwierigkeit bei dieser Aufgabe bestand darin die Menu Anatomie und Submenus zu durchdenken und den Überblick zu behalten, was wann passiert. Letztendlich würde ich diesen Plugin aber ziemlich sicher sehr oft selbst nutzen.

№3 COCHLEA IMPLANT

Die Aufgabe »1000 Worte«

»Ein Bild sagt mehr als 1000 Worte« - die Wahrheit dieses Sprichwortes ist ja sehr sicher der Kern hinter dieser Aufgabe. Hierbei geht es um das Darstellen eines komplexen Sachverhaltes in einer Grafik ohne dabei Worte, Sätze, Texte und Zahlen zu verwenden.

Der komplexe Sachverhalt meiner Grafik? Die meist gestellte Frage in meinem Leben »Was ist das für ein Ding da an deinem Ohr?«, denn dies endet für mich oft in langen Erklärungen wie das Ding - ein Cochlea Implantat - funktioniert. Also komplexer Sachverhalt: Check.

Natürlich war am Anfang das größte Fragezeichen für mich hier wie das Ganze ohne Worte dargestellt werden kann und was jetzt sinnvolle Symbole und Icons für diesen Kontext sind. 

Beim ersten Entwurf (Bild 1) war dementsprechend nicht eindeutig was das Zickzack Zeichen bedeutet und auch wo der Fokus liegt, da alle Linien die gleiche Strichstärke haben.

Beim zweiten Entwurf (Bild 2 und 3) arbeitete ich an zwei Varianten. Bei beiden liegt zwar nun der Fokus auf der Erklärung des Prozesses und ich probierte eine Legende an der Seite aus. Allerdings ist eine Legende eher hinderlich, da die Augen immer von dort zum Punkt wandern müssen, der beschrieben wird. Außerdem stellte ich fest: Zahlen sind nicht erlaubt.

Beim letzten Entwurf (Bild 4 und 5) trennte ich visuell die technische Darstellung von der Prozesserklärung in zwei Bereiche, was finde ich der Grafik eine sachliche, klare Ordnung gibt. Auch hier gibt es wieder zwei Varianten, wobei in Bild 4 die überkreuzenden Linien zu viel Aufmerksamkeit auf sich ziehen. Letztendlich ist Bild 5 also das finale Ergebnis.

JuliaHannVonWeyhern_1000Worte_1.pngJuliaHannVonWeyhern_1000Worte_1.png
JuliaHannVonWeyhern_1000Worte_2.pngJuliaHannVonWeyhern_1000Worte_2.png
JuliaHannVonWeyhern_1000Worte.pngJuliaHannVonWeyhern_1000Worte.png
JuliaHannVonWeyhern_1000Worte_2.pngJuliaHannVonWeyhern_1000Worte_2.png
JuliaHannVonWeyhern_1000Worte_1.pngJuliaHannVonWeyhern_1000Worte_1.png

Weißt du jetzt wie ein Cochlea Implantat funktioniert?

Ich wollte außerdem noch sagen…

…von KD kommend habe ich durch die Basics des Interface, so unoriginell es auch klingt, wirklich einen weiteren Blickwinkel auf meine Art zu designen bekommen und somit die Intention von Interaktion wieder in mein Blickfeld gerückt, die ich davor ein wenig aus den Augen verloren hatte. 

In den gemeinsamen Feedback-Runden habe ich auch beobachten und lernen können wie ich selbst anderen Personen gutes, hilfreiches Feedback gebe. Allerdings habe ich hier genauso gelernt bei Kritik nicht alles stehen und liegen zu lassen, um sofort alles zu verändern (wie ich es vermutlich im ersten Semester getan hätte), sondern auf meine eigene Intuition zu vertrauen und auch mal bereit zu sein bewusst die Ellenbogen auspacken zu können.

@Prof. Boris Müller: Da Sie häufig auf Entwürfen Abstände ausmessen, Bereiche hervorheben und ein sehr genaues Auge auf alles haben, könnte Sie PixelSnap 2 interessieren.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 02|21

Entstehungszeitraum

Wintersemester 2021 / 2022