UI Desgin

Screen Layout

Das Screen Design umfasst die ganzheitliche Ausgestaltung der Applikation, basierend auf dem visuellen Konzept.

Unter Berücksichtigung der Informationsarchitektur werden alle Komponenten und sonstige Inhalte in Layouts (Screens) aufbereitet und gegliedert. Das Layout ist die Komposition von Information, Grafik und Interaktion im Kontext der Anwendungsfälle. Dazu werden alle erforderlichen grafischen Komponenten in die Layouts gesetzt und ausgestaltet. Blaupause für das Design sind die Wireframes und User Flows aus der Konzept-Phase.

Zu beachten

  • Da an dieser Stelle bereits viel Zeit in User Testing, Prototypen und Visuelles Design gesteckt wurde, folgt hier oft nur noch das konkrete Styling.

 

  • Wenn diesbezüglich noch viel Spielraum besteht, ist es sinnvoll, viele verschiedene Layout-Varianten auszuprobieren, um dann die beste auszusuchen.

 

  • Gerade im Hinblick auf eine responsive Gestaltung ist es empfehlenswert, mit einem Grid zu arbeiten.

Tools

Excel
Excel
Excel
Excel

Links

UI Components

Alle für die Anwendung benötigten Komponenten werden dem visuellen Konzept entsprechend gestaltet und in einer Übersicht dargestellt. Hierzu gehören auch die Zustände (States) der jeweiligen Komponente und das grundlegende Verhalten (z.B. maximale Breite). Als Komponenten gelten z.B. Buttons, Input-Felder, Dropdowns, Listen, Tabellen und Icons. Die Komponenten sind in unterschiedliche aufeinander aufbauende Klassen unterteilt (Atomic-Design).

Zu beachten

  • Die Components müssen in einem oder mehreren Prototyping-Programmen übersichtlich dokumentiert werden.

Tools

Excel
Excel
Excel

Links

Animation & Motion

An diesem Punkt erfolgt die konkrete Ausgestaltung von dynamischen Elementen und Micro-Interactions. Berücksichtigt werden hierbei neben visuellen Aspekten auch Timings, Easings, Animation und Bewegungen sowie Zustandsänderungen (States).

Zu beachten

  • Die Animationen sollten zweckgebunden sein, also z.B. als Feedback dienen.

 

  • Viele einfache Animationen können bereits in Prototyping-Programmen veranschaulicht werden.

Tools

Excel
Excel
Excel
Excel

Links