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/22

Im Kurs Basics Interface werden die grundlegenden Aspekte des Interfacedesigns von rudimentärer Typographie, über Appgestaltung bis zu Informationsvisualisierung vermittelt.

In drei kurzweiligen Vorträgen beleuchtet Prof. Boris Müller die einzelnen Themen mit einem kritischen Auge auf, und gleichzeitig viel Leidenschaft für existierende Interfaces (im weitesten Sinn). Die Vorträge bereiten jeweils auf eine Aufgabe für die Teilnehmenden vor. Diese werden in drei Iterationen, mit Feedback, Besprechungen und Endpräsentation bearbeitet.

AUFGABE 1: DIGITALES BUCH

Aufgabenstellung & Idee

Die erste Aufgabe befasste sich vorrangig mit dem Thema Typographie. So mussten wir in 2er Gruppen ein Buch unserer Wahl auf zwei vorgegebene (sehr niedrigauflösende) Screengrößen übertragen. Wir entschieden uns für das Buch West-Berlin Grafik Design, da es sehr atypisch gestaltet ist und wir Lust auf die Challenge hatte dieses Design aus der analogen Umgebung in die digitale zu übertragen. 

Iterationen & Ergebnis

Wohingegen das Design für den kleinen Screen relativ schnell stand, hatten wir besonders große Schwierigkeiten mit dem Buchcover, welches wir gerne als eine Art „Landing Page“ umsetzen wollten. Hier ist auch die größte Entwicklung zu erkennen: zuerst versuchten wir es mit einem möglichst originalgetreuen Nachempfinden, was allerdings sehr wuselig wurde. Unser zweiter Ansatz war auf ein common concept zurückzugreifen und orientierte sich an bestehenden Mediatheken. Dadurch ging leider der Geist des Buches verloren. In der finalen Iteration probierten wir dann eben diesen zu finden und besannen uns zurück auf die Grundkonzepte, die West-Berlin Grafikdesign ausmachen: Klarheit, Scharfkantigkeit, Prägnanz und bewusst gesetzter Weißraum. 

Erkenntnisse 

Besonders der eben beschriebene Prozess hat mich besonders viel gelehrt in dieser Aufgabe. Ich werde hoffentlich in Zukunft vorher überlegen, was die Werte meiner Arbeit und die visuelle Vision dahinter ist, sodass eine klare Designlinie entwickelt werden kann. Von meiner erfahrenen Projektpartnerin Elizaveta konnte ich zudem sehr viel lernen, danke dafür!

Digitales_Buch.pdf PDF Digitales_Buch.pdf

AUFGABE 2: GUI

Aufgabenstellung & Idee

Im Zuge der zweiten Aufgabe sollten wir eine App entwickeln, die Designer:innen in ihrem täglichen Leben unterstützt. Nach einigen Entwürfen entschieden mein Projekpartner Dennis und ich uns dafür eine Farbapp zu gestalten. Potentielle Benutzer:innen sollen hier auf Basis einer gewählten Anfangsfarbe verschiedene Farbkombinationen explorativ erkunden. Die Challenge hierbei war für uns eine Symbiose zwischen einem neuen, spielerischen und möglicherweise auch illusorischen Konzept und strikten Appgestaltungsrichtlinien zu finden.

Iterationen & Ergebnisse

Da wir beide nun mal hauptsächlich Apple-User sind, entschieden wir uns dafür unser App nach den Human Interface Guidelines zu gestalten. Hieraus übernahmen wir grundlegende Konzepte, wie generelle Screenaufteilung, Gestaltung der Tab Bar und vieles mehr. 

Das Grundgerüst unserer App stand relativ schnell fest: ein Start Bildschirm, einen Screen, um eine Startfarbe auszuwählen und der Farben-Erkunden-Screen.

Im Verlauf unserer Arbeit interessierten wir uns immer mehr für die spielerische, explorative Gestaltung des Farbenerkundens und tauchten tiefer in das Space Theme ab, welches unserer App auch den Namen ColorSpace verlieh. Weil wir eine relativ ungewöhnliche Darstellung wählten, entschieden wir uns dazu einen Onboarding Screen hinzuzufügen. 

Vor eine besondere Herausforderung stellte uns die Auswahl des Farbmodus. An welcher Stelle ist diese Auswahl am sinnvollsten? Wir platzierten sie zuerst am Anfang, besannen uns dann jedoch darauf, dass diese essentielle Funktionalität kontinuierlich von Nöten ist. Deshalb realisierten wir sie in der zweiten Iteration durch ein Pulldown Menü auf dem Farben-Erkunden-Screen. Aber auch hier störte der Extraklick. So platzierten wir die Farbmoduswahl in den finalen Screens in der Tab Bar!

Nach und nach entwickelten wir weitere Screens, die gespeicherte Paletten anzeigen oder die Möglichkeit bieten sich inspirieren zu lassen.

Erkenntnisse

Ich muss zugeben, dass ich es erstaunlich fand, wie detailreich das Befolgen von gegebenen Guidelines ist und wie viel Zeit allein das Erstellen einer Tab Bar für einen Neuling wie mich sein kann. 

Ein weiteres Learning, das ich mitnehme ist, dass es sich meiner Meinung nach von Zeit zu Zeit lohnt dem Experimentellen und Verspielten Raum zu geben, da dabei interessante Entwicklungen geschehen können.

Hervorzuheben ist der Ablaufplan, den wir zu meinem Bedauern relativ spät erstellt haben. In zukünftigen App Projekten werde ich mich früher damit befassen!

GUI.pdf PDF GUI.pdf

Ablaufplan.pngAblaufplan.png

AUFGABE 3: 1000 WORTE

Aufgabenstellung & Idee

Die Challenge der dritten Aufgabe bestand darin einen komplizierten Sachverhalt ohne jegliche Form von Text darzustellen. Ich entschied mich für ein Thema, das mich in letzter Zeit mehrfach im Alltag tangierte: Tattoos. Da ich Datenvisualisierung im Allgemeinen sehr interessant finde, versuchte ich mich an einer vereinfachten Form einer Tattoo-Infografik.

Iterationen & Ergebnis

Zu Beginn setzte ich mir das Ziel möglichst viele Datendimensionen zu integrieren: beliebteste Tattoostellen, häufigste Motive und Schmerzgrad. Außerdem eröffnete ich eine eigene Datendimensionen: Wie sehr würden sich meine Eltern echauffieren, wenn ich mir dieses Tattoo stechen lassen würde? Mit den Versuchen merkte ich allerdings, dass diese Dimension für Nichtwissende ohne Text vollkommen unverständlich ist und schloss sie wieder. Generell war dies mein größter Knackpunkt während dieser Aufgabe: herauszuzfinden, was die Betrachter:innen interessiert und diese Informationen fokussiert zu vermitteln.

Im finalen Entwurf reduzierte ich die Stilelemente und setzte die Tattoomotive an die häufigsten Stellen. Hierbei war es mir besonders wichtig, die Datenebene von der reinen visuellen Ebene abzugrenzen, weshalb ich die Tattooelemente vektorisiert realisierte. Da ich den Grad des Schmerzes als besonders relevant für Betrachter:innen erachte, kam ich nicht herum ihn zu integrieren. 

Erkenntnisse 

Aus dieser Aufgabe nehme ich zwei besondere Erkenntnisse mit: zum Einen, dass man in einer „Infografik“ userzentriert arbeiten muss und Informationen fokussiert und verständlich vermitteln sollte. 

Besonders interessant fand ich, dass kleine Störungen (wie der bewusst gesetzte andere Stil der Tattoos) prägnanter sein können, als ein einheitlicher Stil.

1000_Worte.pdf PDF 1000_Worte.pdf

REFLEKTION & FAZIT

Im Nachhinein kann ich sagen, dass mich dieser Kurs zwischenzeitlich sehr gefordert hat, weil ich zuerst herausfinden musste, was meine Ansprüche an eigene Arbeiten und Projekte sind. Ich tat mir oft schwer mit dem Fokus und lernte erst im Verlauf der Projekte hinter meinen Entwurfsentscheidungen zu stehen. 

Auch wenn ich mir teilweise schwertat, kann ich sagen, dass ich aus jeder Arbeit eine für mich wichtige Erkenntnis mitnehmen konnte, die mich weiterhin begleiten werden. Dank der Teamarbeit erhielt ich einen Einblick in andere Herangehensweise, zeitliches Abstimmen und Kompromisse.

Abschließend kann ich den Kurs allen empfehlen, die sowohl fundiertes technisches Know-How aus dem Bereich Interfacedesign und gleichzeitig individualisiertes, detailliertes Feedback zu eigenen Projekten mitnehmen wollen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Basics Interface 02|21

Entstehungszeitraum

Wintersemester 2021 / 2022