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

Der Kurs Basics Interface vermittelt grundlegende Aspekte des Interfacedesigns. In mehreren Vorträgen informiert Prof. Boris Müller über unterschiedliche Themenbereiche. Von der Geschichte des digitalen Interface, über dessen Gestaltung mit Elementen und Typographie, bis hin zur Informationsvermittlung und -visualisierung.

Die Vorträge bereiteten uns dabei auf drei verschiedene Aufgaben vor, die wir im Verlauf des Kurses bearbeiteten und präsentierten.


#01 Digitales Buch

Es soll eine digitale Fassung Ihres Lieblingsbuches gestaltet werden. (…) Die digitale Fassung des Buches soll exemplarisch anhand von mindestens vier Screens in zwei verschiedenen Formaten vorgestellt werden. 

Die erste Aufgabe bearbeitete ich gemeinsam mit Ariel Khait. Wir entschieden uns dazu, den Reiseführer „Lonely Planet“ digital neu zu gestalten.

Zu Beginn entschieden wir uns, im Rahmen eines Brainstormings verschiedene Designansätze zu sammeln und uns schließlich auf einen Stil zu einigen. Wir beide waren uns darin einig, nicht an dem bisherigen Design festhalten zu wollen. Die finale Entscheidung war für mich dennoch eine Designrichtung außerhalb meiner Komfortzone, worüber ich im Nachhinein jedoch sehr glücklich bin.

Der nächste Schritt war es, unser ausgewähltes Buch und unsere Stilrichtung in einem Design auszuarbeiten. Wir wollten die Vorzüge eines digitalen Buches nutzen und entwickelten eine Homepage, welche die Kapitel des Buches aufführt und diese interaktiv auswählen lässt. 

Die geöffneten Kapitel setzen sich dann aus einem Fließtext und Bildern sowie typografischen Highlights zusammen, die es galt, in Einklang zu bringen. Besonders die Entscheidung, bei unserem Layout mit dem Blocksatz zu arbeiten, kostete uns einige Nerven. Blocksatz ohne ungewollte Lücken und „Flüssen“ im Text zu visualisieren, verlangt viel Zeit!

Frame 36.pngFrame 36.png
Frame 37.pngFrame 37.png

Neben dem Screen in 1024 x 768 Pixeln sollten wir auch eine mobile Version für einen kleinen Screen in 240x320 Pixeln gestalten. Dafür passten wir den originalen Entwurf an und orientierten uns an den neuen Gegebenheiten. Wir entschieden uns dazu, die mobile Version als „To-Go Variante“ mit reduziertem Inhalt zu gestalten. Besonders wichtig war es, die Lesbarkeit auch auf dem kleinen Bildschirm zu garantieren und sich im Rahmen dessen noch mal genauer mit der Typografie zu beschäftigten.

INCOM.pngINCOM.png

#02 Graphical User Interface

Es soll eine App für iOS oder Android entwickelt werden, die Designer in ihrer alltäglichen Arbeit unterstützt. (…) Die Aufgabe soll als eine statische Screen-Sequenz präsentiert werden.

Die zweite Aufgabe bearbeitete ich gemeinsam mit Lucas Textor. Die Aufgabenstellung war sehr weit gefasst und konnte somit sehr unterschiedlich gelöst werden. Größte Herausforderung war es somit, zunächst eine App Idee zu finden. Auch hier konnten wir mithilfe eines Brainstormings einen gemeinsamen Nenner finden. Einen Abonnementmanager.

Wir beide mussten uns eingestehen, den Überblick über unsere Abonnements etwas zu verlieren, vor allem wenn es darum geht, Kündigungsfristen, Modelle und Kosten zu überblicken. Daher war es unser Ziel, eine App zu entwickeln, die alle Abos übersichtlich auflistet und zudem die Möglichkeit bietet, diese zu wechseln, pausieren oder zu kündigen. Auch wollten wir die Gesamtkosten übersichtlich gestalten und sie somit leicht erfassbar zu machen.

Währenddessen wir uns schnell sicher im Aufbau der App waren, benötigte es doch etwas Zeit, bis wir bei unserem finalen Design angekommen sind. Zu Beginn waren wir noch etwas experimenteller, orientierten uns im Verlauf jedoch immer mehr an den Human Interface Guidelines von Apple. Für mich war es das erste Mal, dass ich bewusst in diese Guidelines geschaut und an gegebener Stelle mein Design nach ihnen angepasst habe. Dieser Prozess war teilweise zeitintensiv, aber auch sehr aufschlussreich.

Das finale Ergebnis konnte jedenfalls von den Guidelines profitieren und gemeinsam mit von uns getroffenen Designentscheidungen, die von ihnen abweichen, ein übersichtliches, aber nicht herkömmliches Design schaffen.

Log-In.pngLog-In.png
Abo Übersicht & Hinzufügen.pngAbo Übersicht & Hinzufügen.png
Abo wechseln.pngAbo wechseln.png
Pausieren & aktivieren.pngPausieren & aktivieren.png
Kündigen.pngKündigen.png
Finanzen & Profil.pngFinanzen & Profil.png

#03 1000 Worte

Es soll ein komplexer Sachverhalt gesucht und in einer Informationsgrafik dargestellt werden. Die Darstellung darf keinerlei Text enthalten. Der Sachverhalt soll möglichst deutlich und klar kommuniziert werden.

Mal wieder stand am Anfang jeder Aufgabe die Entscheidung, mit welchem Thema wir uns beschäftigen möchten. Nur diesmal waren wir nicht im Team, sondern allein. Und so musste es kommen, dass meine eigene Entscheidung zunächst die falsche war. Ein Kartenspiel, dass allein mit Worten nicht leicht zu erklären ist, wird es auch nicht mit Grafiken sein …

Mein zweiter Anlauf beschäftigte sich dann mit den Sensoren im Auto, die es ermöglichen, verschiedene Assistenzsysteme anzubieten, die das Autofahren erleichtern oder zum Teil ganz abnehmen.

Bevor es überhaupt ans Gestalten einer wortlosen Infografik ging, stand jede Menge Recherche an. Welche Sensoren gibt es? Welche basieren auf der gleichen Funktionsweise? Wofür werden sie eingesetzt? 

Letztendlich gibt es vor allem vier Arten von Sensoren, davon kommen drei im heutigen Automobil zum Einsatz. Somit fokussierte ich mich auf die Schall-, Kamera- und Radarsensoren. Um aufzuzeigen, in welchen Situationen sie zum Einsatz kommen, entschied ich mich, eine Straße von oben zu illustrieren, welche ich zusätzlich durch drei Kästen einteilte. Innerhalb dieser Kästen wurde die Funktionsweise der jeweiligen Sensoren dargestellt sowie ihre Funktionalität bei schlechtem Wetter und Distanz zu anderen Objekten. Unterhalb des jeweiligen Kastens visualisierten die Autos auf dem Abschnitt der Straße, in welchen Situationen die Sensoren Einfluss nehmen.

Zusammenfassend war es sehr herausfordernd, mehrere Sachverhalte ohne Worte auf einer Grafik zu erklären. Meine Methode beruhte vor allem darauf, auszuprobieren. Die Zwischenpräsentationen im Kurs dienten mir dann als Kontrolle, ob die Visualisierung verständlich ist und somit auch „funktioniert“. Am Ende bin ich selber zufrieden mit dem Ergebnis. Die Aufgabe hat einen dazu gezwungen, nicht immer den einfachsten Weg zu gehen, und erweiterte dadurch meinen Horizont für die Kommunikation im Design.

Autonomes Fahren.pngAutonomes Fahren.png


Fazit

Die Chance, dass allen ID-Erstis ein Platz in diesem Kurs angeboten wird, ist sinnvoll und sollte auch von jedem wahrgenommen werden. Der Kursaufbau profitiert von erkenntnisreichen Präsentationen durch Prof. Boris Müller und vor allem den wöchentlichen Zwischenpräsentation der eigenen Arbeiten mit anschließendem Feedback. Dieses war immer ehrlich und schuf im Kurs eine angenehme Fehlerkultur, die es ermöglichte an sich und seinen Designs zu wachsen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 01|22

Entstehungszeitraum

Sommersemester 2022