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

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

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. UX-UI-Design und Development
    Mit Google’s Material Design & Angular
    Konstantin Denerz
    @kdenerz
    Consultant

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  6. Welche gibt es?
    UX-UI-Design und Development

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide