Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX-UI-Design und Development mit Google’s Mater...

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.

Konstantin Denerz

October 12, 2022
Tweet

More Decks by Konstantin Denerz

Other Decks in Programming

Transcript

  1. • 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
  2. • Sammlung von Erfahrungen (Dos & Don’ts) • Pattern Library

    & Komponenten • Styleguide (Gestaltungsgrundlage) • Design Sprache Was ist ein Design System? UX-UI-Design und Development
  3. • (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
  4. t Tokens Woraus besteht ein Design System? t Typografie t

    Farben t Elevations t States Layout Motion Design (Animations) UX-UI-Design und Development
  5. 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
  6. Presentational Components Smart Components Tokens Fundament + Component User Flows

    Typografie Farben Elevations States Layout Motion Design (Animations) UX-UI-Design und Development
  7. Schnittstelle zwischen Design & Entwicklung Design Tokens Design Tokens tokens.json

    tokens.css Web Application(s) Tools UX-UI-Design und Development
  8. 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
  9. • Design Output als PDFs • Pixel-basiert • Statisch E-Corp

    - Styleguide UX-UI-Design und Development
  10. 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
  11. Demo - Design Spec - Beispielseite - Impl Tokens &

    Theming Colors & Theming UX-UI-Design und Development
  12. Demo - M3 Spec - Design Spec - Beispielseite -

    Impl Tokens & Mixins Typografie UX-UI-Design und Development
  13. 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
  14. Demo - Elevation - Design Spec - Beispielseite - Impl

    - States - Design Spec - Beispielseite - Impl Components UX-UI-Design und Development
  15. 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
  16. Demo - Sizes - Breakpoints mit CSS - Breakpoints mit

    Angular Directives - Placeholder Layout & Placeholder UX-UI-Design und Development
  17. 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
  18. (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
  19. - 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