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

Basic Interface

In Basics Interface bei Prof. Boris Müller werden die Grundlagen zur Gestaltung von (digitalen) Benutzeroberflächen vermittelt.

Projekt #1: Digitales Buch

Die erste Aufgabe war es ein Buch in digitalen Layouts umzusetzen. Dazu wurden zwei Screenformate vorgegeben: 1024 x 768px (sehr altes iPad) und 240 x 320px (altes Nokia/Smartwatch). Fokus lag neben dem Layout auch besonders auf der Typographie und dem Umgang mit Schrift auf (kleinen) Bildschirmen.
Da in digitalen Interfaces die Typographie den Hauptbestandteil ausmacht, ist es sehr wichtig mit Schrift umgehen zu können, um eine strukturierte, übersichtliche Bedienoberfläche zu erstellen.
Die Aufgabe habe ich zusammen mit Anastasiia bearbeitet. WIr haben uns für das Buch „Generative Design“ von Asterios Agkathidis entschieden. In dem Buch geht es um generative Formfindungsprozesse für architektonische Werke.

Bilder des Original

original.pngoriginal.png

Schriftart

In unseren ersten Entwürfen haben wir uns stark an den originalen Schriftarten im Buch orientiert. Nach einigen Experimenten haben wir zuerst Poppins für Text und Unterüberschriften genutzt um der im Buch verwendeten geometrischen Schriftart nahe zukommen. Für Oberüberschriften die League Gothic in Großbuchstaben, die Schriftart ist von Haus aus sehr hoch, eng, und relativ fett.
Schließlich sind wir für den Flusstext bei IBM Plex Sans gelandet, da diese weniger perlt, weniger Raum einnimmt und auch auf kleineren, geringer aufgelösten Displays noch gut funktioniert und lesbar ist. Bei den Überschriften haben wir uns zu Space Grotesk um entschieden. Space Grotesk macht im Gegensatz zu League Gothic einen charakteristischeren, weniger minimalistisch-stelzigen Eindruck, der auch aus einem generativen Designprozess heraus entwickelt worden könnte.

Frame 5fonts___.pngFrame 5fonts___.png
schrift_vergl.pngschrift_vergl.png

Navigation

Im Gegensatz zur Schrift, die sich zwischen den beiden Formaten nur in Größe unterscheidet gibt es für die jeweiligen Displaygrößen andere Navigationskonzepte: Für das große Screenformat haben gibt es eine permanent sichtbare Sidebar in der die Kapitelüberschriften angezeigt werden. Durch klick auf eine der Überschriften werden drunter die Unterüberschriften eingeblendet. Wird eine nun eine der Unterschriften angewählt, springt der Text im Hauptfenster direkt dort hin. Prinzipiell kann aber auch einfach von oben nach unten durch das Buch gescrollt werden. Eine permanente Sidebar ist für ein mini Display natürlich keine Option. Allgemein ist es schwierig dort Navigations UI-Elemente unterzubringen, die nicht mit dem Inhalt interferieren. Deshalb haben wir uns dafür entschieden eine gesten-basierte Navigation zu implementieren, die beim ersten Öffnen kurz erklärt wird.

nav_small.pngnav_small.png
nav_large.pngnav_large.png

Farben

Die App ist nur für ein helles Theme designed worden. Um das Lesen angenehmer zu machen, haben wir den Hintergrund einen papierlich-beigen, warmen Hintergrund gegeben. Im Großformat gibt es einen zusätzlichen dunkleren Beigeton hinter der Sidebar, der zusätzliche Separation schafft. Für das Kleinformat habe ich mich in der letzten Version dazu entschieden, das Beige etwas zu verweißlichen um den Kontrast zu erhöhen und das Design etwas moderner wirken zu lassen. Der Text ist größtenteils schwarz gehalten, nur Bildbeschreibungen sind grau um sie in der Aufmerksamkeitshierachie zurückzustellen ohne etwa auf eine noch kleinere Schriftart ausweichen zu müssen.

color.pngcolor.png

Schriftsatz

Jegliche Schrift ist linksbündig. Das große Format gibt dem Inhalt einen Weite von etwa 60 Schriftzeichen bis zum Zeilenumbruch, um eine gute Lesbarkeit zu gewährleisten, bei der nicht aus der Zeile gerutscht wird und auch der nächste Zeilenanfang gut gefunden werden kann. So bleibt auch genügend Raum übrig um die permanente Seitenleiste zu rechtfertigen. Dazu beträgt die Zeilenhöhe etwa das 1,5-fache der Schriftgröße. Genauso bei dem kleineren Format. Dort kommt die Inhaltweite trotz weniger Rand und kleinerer Schriftart noch auf etwa 40 Zeichen. So kann der Text trotz häufigerer Zeilensprünge noch recht angenehm gelesen werden.

Abbildungen

In dem Buch kommen Abbildungen sowohl einzeln als auch in Clustern vor. Zuerst haben wir uns auf die einzelnen Abbildungen konzentriert. Im kleinen Design gibt es eine Preview des Bildes, das unter dem entsprechenden Textparagraphen eingefügt wird, mit Bildtitel und Beschreibung rechts neben dem Bild. Bei anklicken der Abbildung wird das Bild voll auf dem Bildschirm angezeigt, nur mit Titel und Beschreibung, sowie Schließkreuz darunter. Bildcluster haben ein passendes Layout, mit mehreren Bildern neben und übereinander. Unter dem Cluster befindet sich die zugehörige Beschreibung. Auch hier können einzelne Bilder zur Vergrößerung angeklickt werden.

picl.pngpicl.png
pics.pngpics.png

Designsprache

Nachdem wir in den ersten Versuchen mit etwas komplexeren Elementen wie mehreren z-Ebenen, Schatten, Scrollbalken, Karten, Kästen und Rundungen experimentiert haben, ist die letzte Version recht heruntergebrochen. Separation finden hauptsächlich durch Raum und Texthierarchie statt, es gibt nur vereinzelt klare, durchgezogene Trennlinien.

design.pngdesign.png

Ornamente

Rein ästhetische Abbildungen sind auf Titelblatt sowie Seiten zu finden, die ein neues Kapitel einleiten. Dort sind nur Überschrift und eine passende, etwas transparente Abbildung zu sehen. Außerdem eine übergroße Zahl, die das jeweilige Kapitel anzeigt. Desweiteren spannen die Kapitelzahlen in der Inhaltsübersicht über zwei Zeilen, dieser kniff spielt auf die sehr großen Zahlen an, die auch im Original zu finden sind. Außerdem machen sie das (im Großformat) allzeit präsente Inhaltsverzeichnis ein wenig interessanter und weniger platt.

Alle Screens

In Originalgröße:

- Erst 240 x 320px

- Dann 1024 x 768px

s01 nav.pngs01 nav.png
s02 contents_0.pngs02 contents_0.png
s03 contents_1.pngs03 contents_1.png
s00 title.pngs00 title.png
s05 heading_text.pngs05 heading_text.png
s04 chapter_title.pngs04 chapter_title.png
s06 img_text.pngs06 img_text.png
s07 img_detail.pngs07 img_detail.png
s08 img_gallery.pngs08 img_gallery.png

l01 contents.pngl01 contents.png
l02 text_heading.pngl02 text_heading.png
l00 title.pngl00 title.png
l04 img_text_1.pngl04 img_text_1.png
l05 img_text_2.pngl05 img_text_2.png
l03 img_text_0.pngl03 img_text_0.png
l06 img_text_3.pngl06 img_text_3.png

Projekt #2: GUI

Aufgabe war es, eine App zu entwickeln, die einem Designsystem mit entsprechenden Human Interface Guidelines folgt. Mein Mitstreiter Guolong und ich entschieden uns eine Android App zu designen die den Material You Design Guidelines folgt.

About

Die App sollte in irgendeiner Weise Designer*innen behilflich sein. Wir entschieden uns (wie die meisten anderen auch), eine Inspirations-Sammel Applikation zu machen. Der Flow den wir uns ausgedacht haben, sieht vor zuerst eine Fotoaufnahme von dem Objekt zu machen, dass mensch sammeln möchte. Dann wird ein Modus ausgewählt, der dabei Hilft einen speziellen Aspekt aus dem Bild herauszuarbeiten. Die Modi vorgesehen waren: - Prototype: Ein Objekt kann aus dem Bild herausgewählt werden und der Hintergrund wird entfernt. Titel, Beschreibung und Versionsnummer können hinzugefügt werden. - Sketch: Ein Zeichnung kann entweder in eine Vektorgraphik konvertiert werden oder geschärft werden um eine bessere Erkennbarkeit und Weiterverwendung zu gewährleisten. - Colors: Farben können aus dem Bild herausgepickt werden, oder auf dem Bild basierend eine Farbpalette generiert werden. - Layout and Typography: Schriftarten können erkannt werden und Layouts herausgearbeitet werden. - Insights: Bild wird gespeichert und kann kommentiert werden. Letztendlich haben wir aufgrund von Zeit und Arbeitsaufwand nur den Flow für die Farbauswahl durchgearbeitet. Wenn der Modus ausgewählt wurde und das Bild entsprechend bearbeitet wurde kann die Inspiration in einem Projekt gespeichert werden. Nun kann entweder ein neuer Modus ausgewählt werden und das Bild wieder bearbeitet werden oder zurück zur Startseite gekehrt werden. Von dort aus kann nicht nur die Kamera gestartet werden, um eine neue Inspiration einzufangen, sondern auch die Projekte gebrowst, alle gespeicherten Inspirationen durchsucht und gefiltert werden. Weiterhin können andere Personen zu den Projekten eingeladen werden, um Zusammenarbeit möglich zu machen.

Anfang

Nachdem wir erarbeitet hatten, wohin es mit unserer App gehen soll, war jedenfalls ich erstmal überfordert wie ich auch mit einfachen Szenarien wie Foto aufnehmen oder Modus auswählen umgehen soll. Was ist die beste Möglichkeit Buttons anzuordnen? Sind Buttons überhaupt das richtige UI-Element? Wohin sollte was platziert werden und wie groß? Daher habe ich von einigen Screens erstmal verschiedenste Varianten ausprobiert.

Screenshot_20230928_150723.pngScreenshot_20230928_150723.png
Screenshot_20230928_150650.pngScreenshot_20230928_150650.png

Erste Flows

Als sich bei mir der Nebel etwas gelichtet hatte, wie mit bestimmten Screen-Situationen umgegangen werden sollte, ging es darum erste detailliertere Benutzungsabläufe zu entwerfen, wie ein*e User*in unsere App bedienen könnte.

Screenshot_20230928_150850.pngScreenshot_20230928_150850.png

Komponenten

Für die meisten Komponenten konnten wir einfach auf die von Google erstellte Library zurückgreifen und diese mit wenigen Anpassungen per drag and drop nutzen. Für einige Elemente mussten wir diese aber stärker abändern oder Neue erstellen, um unseren Anforderungen gerecht zu werden.

components.pngcomponents.png

Theme und Farben

Wir hatten begonnen die App in einem dunklen Theme zu designen, was allerdings den Gestaltungsprozess nicht vereinfachte und vor allem zu Problemen bei den Projektpräsentationen am Beamer führte. Daher habe ich zwischendurch begonnen alle verwendeten Farben mit dem Figma-Plugin Material Theme Builder zu verlinken, das es ermöglicht das Farbdesign mit Auswahl einer Farbe oder Bildes auf Knopfdruck abzuändern. Somit war es mit relativ wenig Aufwand verknüpft, dass Theme zu einem hellen zu wechseln und sogar mit verschiedenen Farbvarianten und Akzenten herumzuspielen.

colors_material.pngcolors_material.png

Navigationskonzept

In der nächsten Version haben wir einen App-übergreifenden Flow gestaltet, der klar stellen sollte wie unsere App bedient werden kann. Außerdem haben wir Screens hinzugefügt, die zeigen wie die Projekte und Inspirationen gemanagt werden.

_Flow Chart(1).png_Flow Chart(1).png

Screens der letzten Version

Frame 26080047browse.pngFrame 26080047browse.png
Frame 26080048start.pngFrame 26080048start.png
Frame 26080049view.pngFrame 26080049view.png
Frame 26080051mode.pngFrame 26080051mode.png
Frame 26080050share.pngFrame 26080050share.png

Projekt #3: 1000 Worte

Die Letzte Aufgabe war die, mit der ich am meisten gestruggelt habe. Aufgrund mangelnder Graphikdesign-Skills als auch Zeit am Semesterende bin ich nicht wirklich zufrieden mit der letzten Version der Infographik. Das Informationsbild durfte keinerlei Text enthalten und soll einen komplexen Sachverhalt darstellen. Ich entschied mich zu versuchen die Funktionen des Ökosystems Boden zu illustrieren.

Die bunten Punkte sollen jeweils Wasser, Schadstoffe, Nährstoffe und Biomaterial darstellen.

Im Boden werden Schadstoffe gefiltert, Wasser gespeichert und ins Grund- bzw. Tiefenwasser geführt, Biomaterial zu Nährstoffen abbgebaut und Nährstoffe konzentriert und anderen Lebewesen verfügbar gemacht.

Boden_Infografik_v0.1_Abgabe.pngBoden_Infografik_v0.1_Abgabe.png

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 01|23

Entstehungszeitraum

Sommersemester 2023