UX-UI-Design und Development Mit Google’s Material Design & Angular Konstantin Denerz @kdenerz Consultant

Konstantin Denerz UX-UI-Design und Development Consultant @ Thinktecture AG @kdenerz [email protected] https://thinktecture.com/thinktects/konstantin-denerz @

• Was ist ein Design System? Welche gibt es? Was steck drin? • Use Case mit Styleguide • Styleguide Debugging • Implementierung von Design System • Wie gehe ich als Designer vor? • Storybook erleichtert (meistens) das Leben. Agenda UX-UI-Design und Development

• Sammlung von Erfahrungen (Dos & Don’ts) • Pattern Library & Komponenten • Styleguide (Gestaltungsgrundlage) • Design Sprache Was ist ein Design System? UX-UI-Design und Development

• (Visuelle) Konsistenz innerhalb einer Anwendung oder über mehrere Anwendungen zu erreichen • Gemeinsame Basis für Product Owner, Marketing, Design und Entwicklung • Schnellere Implementierung neuer Features Ziele eines Design Systems? UX-UI-Design und Development

Welche gibt es? UX-UI-Design und Development

t Tokens Woraus besteht ein Design System? t Typografie t Farben t Elevations t States Layout Motion Design (Animations) UX-UI-Design und Development

t Presentational Components t Smart Components Tokens Auf dem Fundament (Tokens, Typografie, Farben…) Components Typografie Farben Elevations States Layout Motion Design (Animations) UX-UI-Design und Development

Presentational Components Smart Components Tokens Fundament + Component User Flows Typografie Farben Elevations States Layout Motion Design (Animations) UX-UI-Design und Development

Schnittstelle zwischen Design & Entwicklung Design Tokens Design Tokens tokens.json tokens.css Web Application(s) Tools UX-UI-Design und Development

Use Case – E-Corp - App Entwicklung (vereinfacht) 1. Idee 2. Styleguide 3. Idee & Styleguide 4. App v.0.1.0 UX-UI-Design und Development

• Design Output als PDFs • Pixel-basiert • Statisch E-Corp - Styleguide UX-UI-Design und Development

Colors • Wo werden diese Farben verwendet? • Kann ich die Farben frei verwenden? • Welche Varianten gibt es? • Welche Farbe fuer welchen Zustand? • Was ist mit Theming? • Und wo sind die Design Tokens? E-Corp - Styleguide UX-UI-Design und Development

Demo - Design Spec - Beispielseite - Impl Tokens & Theming Colors & Theming UX-UI-Design und Development

Fonts • Wann verwende ich welche Schriftart, Schriftgroesse, Schriftstyle? E-Corp - Styleguide UX-UI-Design und Development

Demo - M3 Spec - Design Spec - Beispielseite - Impl Tokens & Mixins Typografie UX-UI-Design und Development

Controls • Welche States haben die Components? • Was passiert mit langen Texten? • Welchen z-Index bekommt der Dialog und welchen andere Komponenten? • Was sind die maximale Breite & Höhe für den Dialog? E-Corp - Styleguide UX-UI-Design und Development

Demo - Elevation - Design Spec - Beispielseite - Impl - States - Design Spec - Beispielseite - Impl Components UX-UI-Design und Development

Pages • Welche Abstände habe ich hier? • Darstellung auf kleinen Screens (Phone)? • Fehlerdarstellung • Wo werden die Fehler dargestellt? • Was passiert bei mehrzeiligen Fehlern? • Was ist der schwarze Bereich? • Was mache ich wenn Datenladen lange dauert? E-Corp - Styleguide UX-UI-Design und Development

Demo - Sizes - Breakpoints mit CSS - Breakpoints mit Angular Directives - Placeholder Layout & Placeholder UX-UI-Design und Development

mit Adobe XD - Material XD Kit als Design System Dokument nehmen - https://www.adobe.com/products/xd/features/ui-kits.html - Farben, Typografie (M3) und Components anpassen - Elevation Chart hinzufügen - Neue Componenten zeichnen - Library publishen & Berechtigungen vergeben - 2 weitere Dokumente anlegen - 1. fürs Prototypen, wo man verschiedene Ideen für Product Owner, Kunden, Entwickler zeichnen kann - 2. Dokument für das Entwerfen von User Flows, die in die Entwicklung gehen - Library in den beiden Dokumenten verwenden Vorgehensweise für Designer UX-UI-Design und Development

(optional) Storybook - Tool für Design Systems Wozu? - Implementierung von Components in Isolation - Kommunikationswerkzeug für Product Owner, Marketing, Anwender, Design und Entwicklung - Implementierung von Design System - Testen von - Zuständen - Responsive Layout - Theming - Komposition - Visual Regression z.B. mit Cypress - Dokumentation und Versionierung UX-UI-Design und Development

- Beispiel-Styleguide hat sehr viele Fragen aufgeworfen, die werden normalerweise durch Devs beantwortet Þ Lange Entwicklungszeiten Þ Product Owner vielleicht ein Produkt, dass er sich anders vorgestellt hat - Design System liefert Þ Antworten Þ Visuelle Konsistenz Þ Gemeinsame Basis Resümee UX-UI-Design und Development

Danke für die Aufmerksamkeit! Konstantin Denerz @kdenerz [email protected]