HSI

Entwicklung und Implementierung eines «State of the Art» Styleguide für die aWall

Mittels anerkannter Standards wurde die Webapplikation "aWall" ein neuer Styleguide konzipiert und begrenzt implementiert.

Text

Ausgangslage

Das IMVS Forschungsprojektteam der FHNW entwickelt die kooperative Projektführungsapplikation namens "aWall". Im Verlaufe der Zeit wurden zahlreiche Studentenprojekte innerhalb des aWall-Frontends durchgeführt. Die Hauptkonzequenz davon ist die Inkonsistenz der aWall Darstellung. Fast jedes Icons, Pages und gewisse Widgets besitzen ein einzigartiges Design, das auf keinen Fall visuelle Harmonie aufzufinden ist. Gleichzeitig besitzt aWall ein Figma-Styleguide, der die Vorteile von Figma wenig einsetzt und nicht als "Source Of Truth" verwendet wird.

Zielsetzung

Durch die Konzipierung eines neuen Styleguide unter Figma sollte jegliche Diskrepanz zwischen einzelnen UI-Elementen beseitigt werden. Zudem sollte ein Modell für die automatische Migration der Figma-Komponenten auf der Angular-Umgebung des aWalls untersucht werden. Zum Schluss sollte eine verbesserte Oberfläche, dank der Vorlagen von Figma, implementiert werden.

Mangelhaftes UI-Element

FHNW

Ein Widget aus der ursprünglichen aWall Applikation. Zu sehen ist die Redundanz von identischen Dropdowns und Knöpfen, die Text für deren Funktionsbeschreibung einsetzen. Solche Darstellungen verletzen Industrie anerkannte Prinzipien für benutzergerechtes UI-Design.

Neues Styleguide Prototyp

FHNW

Die Inkonsistenzen des Widgets wurden auf Figma durch die Neukonzipierung der einzelnen UI-Elemente beseitigt.

Revision im Frontend

FHNW

Dank der "Dev-Mode"-Feature und weiterer Figma-Plug-In wurde die Hi-Fi Prototyp 1:1 auf der Angular-Applikation der aWall implementiert.

Ergebnisse

Zur aller Erst wurde die aWall Oberfläche nach inkonsistenten Designdarstellungen analysiert. Dank der gewonnenen Kenntnisse wurde ein neuer Figma Systemguide aufgelegt. Im Gegensatz zu den bestehenden, haben wir den neuen Styleguide nach der Methodologie des "Atomic Desgin" nacherstellt. Somit sind die einzelnen Elemente der UI nach dem Prinzip der Modularität aufgeteilt. Die neue Fimga Vorlage sollte als Vorlage für zukünftige Auffassung von Komponenten dienen. Ein häufig vorkommendes Element aus dem aWall-Fontend wurde für die Neuerfassung auf Figma ausgewählt. Dieses Element ist das "Dropdown" Element, welches meistens mit "CRUD" Funktionen begleitet wird. Eine neue Komponente für jene generische Anwendung wurde auf Figma erstellt und mittels Fimgatools wie "Dev-Mode" und Plug-In nach Angular-Umgebung entwurfsgerecht implementiert.

Technische Schlüsselbegriffe

  • UIAbkürzung für "User Interface", Benutzeroberfläche auf Englisch.
  • Hi-Fi PrototypHigh-Fidelity Prototyp. Ein Prototyp, der durch sein Aussehen und Benehmen nahe am Finalprodukt liegt.
  • CRUDSteht für Create (Erstellen), Read (Lesen), Edit (Bearbeiten) und Delete (Löschen). Zusammen bilden die Begriffe die rudimentären Verwaltungsfunktionen einer Entität.
  • FigmaWebbasierte Prototyping-Applikation.
  • Dev-ModeFunktion von Figma, die es erlaubt, entwicklerrelevante Werte einer Figma-Komponente zu evaluieren.
  • Atomic DesignEine Methodologie, um Benutzeroberflächen modular zu konzipieren.

Team

Pedro de Souza Winkler
Sofiia Mykytyn

Betreuer
Martin Kropp
Fabian Affolter