Interface Inventar aufbauen und dokumentieren

Interface Inventar aufbauen und visualisieren

Design Manual

Styleguide

Pattern Lab

UI Patterns

Living Styleguide

Konsistenz

Konsistenz ist eine fundamentale Anforderung in der Gestaltung. Gleiche Linienstärken, Farben, Füllungen, Texturen, Anschnitte, Motive, Formate usw. sorgen für eine stilistische Zusammengehörigkeit der Bildelemente und eine schnelle Vergleichbarkeit von Abbildungen. Damit wird die Aufmerksamkeit des Betrachters schnell auf Veränderungen von Bildinhalten gelenkt. Vor allem in der Rezeption von Bildfolgen ist der Nutzer auf das Spiel von Konsistenz und Veränderung angewiesen.

Ziele

Konsistente GUI sicherstellen

Werkzeug für Designer und Entwickler

Systematik und Grundgedanken des Gestaltungskonzept abbilden und erklären

Anforderungen

Welchen Anforderungen muss eine Design Dokumentation gerecht werden?

Was sollte dokumentiert werden?

./images/website-01.png

./images/website-02.png

./images/website-03.png

./images/website-04.png

./images/website-05.png

Gestaltungsziel

Wie soll das Design wirken und warum?

./images/gestaltungsziel/firefox-design-values.png — https://values.design.firefox.com

Form & Space

Form & Space

Spalten

Raster

Grundaufteilung

Abstände

Hierarchisierung

Negativraum

Layout/ Gestalterische Macrostruktur & Raster

./images/form-space/space-01.png

./images/form-space/space-02.png

Farbe

Farbe

Farbskalen

Sättigung, Helligkeit

Farbeinsatz/ Funktion der Farben

Farbkombinatorik

Besondere Ausprägung: Transparenzen, Rasterungen, Verläufe

./images/farbe/farbe-01.png

./images/farbe/farbe-02.png

Media

Media

Bilder und deren Größen

Videos und deren Größe

Grafiken und deren Größe

Zuschnitt

Farbgebung

Besondere Ausprägungen: Schatten, Transparenzen, etc.

Kombination mit anderen Elementen

./images/media/media-01.png

./images/media/media-02.png

./images/media/media-03.png

Typographie & Satz

Typographie & Satz

Schriftart

Schriftgrößen

Schriftschnitte

Zeilenabstand

Schriftstile

Besondere Ausprägungen: Schatten, Transparenzen, etc.

Textausrichtung

Satzart

./images/typo/typo-01.png

./images/typo/typo-02.png

./images/typo/typo-03.png

Interaktion & Gestaltungselemente

Interaktion & Gestaltungselemente

(Trenn)-linien

Rahmen

Hintergründe

Interaktionselemente

Interaktionen

Übergänge

./images/interaktion/interaktion-01.png

./images/interaktion/interaktion-02.png

./images/interaktion/interaktion-03.png

Komponenten

Komponenten

Navigation, Cards, Forms, Buttons, Button Groups, Tables, Lists, Grid Lists, Menues, Pickers, Progress & Activity, Slider, Tabs, Toolsbars, Tooltips

Wie strukturieren wir die Dokumentation?

./images/struktur/struktur-01.png

./images/struktur/struktur-02.png

./images/struktur/struktur-03.png

./images/struktur/struktur-04.png

./images/struktur/struktur-05.png

./images/struktur/struktur-06.jpg

./images/struktur/struktur-07.jpg

./images/struktur/struktur-08.jpg

Praxisbeispiel

Pattern Library

Base Unwichtiges weglassen

Atoms Muster bilden

Molecules Bezüge herstellen

Organisms Kombinationen aus Molekülen und Atomen

Composition Raster, Layout

Behavior Flow, Transition, Microinteraction, Reaktion auf Viewports

Danke für's Mitmachen

https://christiannoss.de