UX-UI-Design und Development mit Google’s Material Design & Angular

Ein Design System wie Material ist die Basis des modernen Frontend-Developments.

Woraus es besteht, welche Probleme es löst und wie man als Developer ein Design System in Angular-Projekten umsetzt, erklärt Ihnen der UX/UI- und Angular-Spezialist Konstantin Denerz. Sehen Sie den Design- und Development-Flow eines Design-Tools wie Adobe XD über Storybook zur fertigen Angular-Anwendung demonstriert.

Transcript

1. UX-UI-Design und Development Mit Google’s Material Design & Angular Konstantin Denerz @kdenerz Consultant
2. Konstantin Denerz UX-UI-Design und Development Consultant @ Thinktecture AG @kdenerz konstantin.denerz@thinktecture.com https://thinktecture.com/thinktects/konstantin-denerz @
3. • 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
4. • Sammlung von Erfahrungen (Dos & Don’ts) • Pattern Library & Komponenten • Styleguide (Gestaltungsgrundlage) • Design Sprache Was ist ein Design System? UX-UI-Design und Development
5. • (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
6. Welche gibt es? UX-UI-Design und Development
7. t Tokens Woraus besteht ein Design System? t Typografie t Farben t Elevations t States Layout Motion Design (Animations) UX-UI-Design und Development
8. 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
9. Presentational Components Smart Components Tokens Fundament + Component User Flows Typografie Farben Elevations States Layout Motion Design (Animations) UX-UI-Design und Development
10. Schnittstelle zwischen Design & Entwicklung Design Tokens Design Tokens tokens.json tokens.css Web Application(s) Tools UX-UI-Design und Development
11. 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
12. • Design Output als PDFs • Pixel-basiert • Statisch E-Corp - Styleguide UX-UI-Design und Development
13. 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
14. Demo - Design Spec - Beispielseite - Impl Tokens & Theming Colors & Theming UX-UI-Design und Development
15. Fonts • Wann verwende ich welche Schriftart, Schriftgroesse, Schriftstyle? E-Corp - Styleguide UX-UI-Design und Development
16. Demo - M3 Spec - Design Spec - Beispielseite - Impl Tokens & Mixins Typografie UX-UI-Design und Development
17. 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
18. Demo - Elevation - Design Spec - Beispielseite - Impl - States - Design Spec - Beispielseite - Impl Components UX-UI-Design und Development
19. 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
20. Demo - Sizes - Breakpoints mit CSS - Breakpoints mit Angular Directives - Placeholder Layout & Placeholder UX-UI-Design und Development
21. 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
22. (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
23. - 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
24. Danke für die Aufmerksamkeit! Konstantin Denerz @kdenerz konstantin.denerz@thinktecture.com