Designsysteme (deutsch) #Xcamp18

Designsysteme (deutsch) #Xcamp18

User Interface-Design gewinnt zunehmend an Bedeutung für Produkte und Dienstleistungen, da es deren Nutzererlebnis beeinflusst. User Experience selbst bestimmt maßgeblich den Wert digitaler Angebote und ist oft deren tragendes Unterscheidungsmerkmal. Leider zerstören „historisch gewachsene“, unzusammenhängende Benutzeroberflächen eben jenen Wert von Produkten und Markenerlebnissen

Dieser Vortrag dreht sich um Designsysteme. Diese helfen – richtig aufgesetzt und angewendet – UX- und Designversäumnisse zu beheben oder gar gleich zu vermeiden. Modularität und Standardisierung wiederkehrend eingesetzter Aspekte helfen dabei, Arbeits- und Bedienabläufe zu beschleunigen sowie den Geschäfts- und Nutzwert zu steigern. Designsysteme helfen UX und Markenwerte für alle Beteiligten (Product, UX, UI & Dev) begreif- und anwendbar zu machen.

#DesignSysteme #DesignSystem #ProduktDesign #ProductDesign #DesignProzess #DesignProcess #InteractionDesign #UserExperience #UX #UI #ModularDesign #AtomicDesign #PatternLibraries #PatternLibrary #StyleGuides #StyleGuide #UXguidelines #UXguideline #Elemente #Module #Komponenten #ButtonFixing #ButtonBurnout

Ce545904f81ef4a81dead98c38b4b240?s=128

Benno Loewenberg

August 25, 2018
Tweet

Transcript

  1.  DESIGNSYSTEME  XCAMP, FRANKFURT 25. AUGUST 2018 @BENNOLOEWENBERG

  2. @BennoLoewenberg selbst „einfache“ Dinge können kompliziert werden  BUTTON 

  3. Danger DANGER Danger Danger Positive Good Positive positive Quelle: Richard

    Saunders dies nicht jenes
  4. Quelle: Dominic McPhee

  5. Quelle: David Roessli Website Investoren-Site Shop Mobile-App

  6.   VIELFÄLTIGES WIRRWAR  Quelle: open device lab Helsinki Produkte, Platformen,

    Geräte
  7. „HISTORISCH GEWACHSEN“ @BennoLoewenberg Code, Tech, Design, Org

  8. @BennoLoewenberg – Viele Personen und Werkzeuge im Einsatz – Kaum

    bis kein Testen (technisch und UX) – Minimale bis keine Spezifikation und Dokumentation – Verschiedene Komponenten über alle Geschäftsbereiche   UX & DESIGN DEBT 
  9. @BennoLoewenberg – Zeit - Geld – Fokus – Marke –

    Engagement – Wert und Qualität – Kundenzufriedenheit   KOSTSPIELIGES CHAOS 
  10. @BennoLoewenberg   UI-ELEMENTE BESTIMMEN OB & WIE    FUNKTIONEN NUTZBAR

    SIND 
  11. @BennoLoewenberg jede Kombination aus Wasser- menge und -temperatur wählbar …

      EU DUSCHARMATUR 
  12. @BennoLoewenberg … einfacher zu bedienen, aber eingeschränkte Möglichkeiten (z. B.

    nur ein wenig warmes Wasser ist nicht wählbar)   US/CA DUSCHARMATUR 
  13. @BennoLoewenberg UI design wird zunehmend wichtig für Produkte und Dienstleistungen.

    UX bestimmt Nutz- und Marktwert digitaler Angebote und ist ein Unterscheidungsmerkmal .   MULTI-SCREEN & OMNI-CHANNEL 
  14. @BennoLoewenberg + Verringerung der Design-Schuld (stimmige und durchgängige Marke &

    UX) + Konzentration auf UX & Besonderheiten (keine Rendundanzen) + Beschleunigte Prozesse (Design, Handover, Code) + Geschäftswertsteigerung (Pflege, Skalierbarkeit)  ZIELE 
  15. Alta, Archipelago, Argon, Apex, Axiom, Backpack, Base, Binary, Bloom, Blueprint,

    Boundless, Build, Bouy, Canvas, Carbon, Cedar, Chameleon, Chrome, Cirrus, Clarity, Clay, Cosmos, DressCode, Eos, Evergreen, Fabric, Feather, Feelix, Fiori, Fishtank, Fleet, Float, Fluent, Foundation, Frontier, Fuse, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet, Harmony, Hedwig, Honeycomb, Horizon, Indigo, Kotti, Lexicon, Lightning, Luci, Material, Mind, Mineral, Nachos, Northstar, Nova, One, Opattern, Orbit, Origami, Otkit, PatternFly, Photon, Plasma, Polaris, Skin, Predix, Primer, Purple, Ratio, Ring, Rizzo, Scooter, Show- Car, Snacks, Solar, Solid, SolidWork, Spark, Spectrum, s, Starling, Swarm, ThingWorx, Uniform, nison, Unity, Ustyle, @BennoLoewenberg  DESIGNSYSTEME 
  16. @BennoLoewenberg  DEFINITION    EINES DESIGNSYSTEMS 

  17. @BennoLoewenberg Designsystem ≠ Styleguide Designsystem ≠ Pattern-Library Designsystem ≠ System-Design

     DE-TERMINATION  sprich: ist NICHT gleich
  18. Quelle: Nathan Curtis [kommentiert] “ A style guide is an artifact

    of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.”
  19. @BennoLoewenberg + Blaupause für UI und Interaction-Patterns + Regeln für

    das Zusammenspiel technischer und visueller Kompnenten für konsistente UX + Kodifiziertes System zur Mehrfachverwendung über alle Produkte hinweg für stimmige UX  ZUSAMMENSPIEL 
  20. @BennoLoewenberg + Standardisierte Grundlangen befreien Kapazitäten für z. B. Reseach,

    Inspiration für neue Konzepte, Handoff-Prozess, ganzheitlicher Blick auf Eigenschaften und deren Auswirkungen. + Strukturierte Basis für alle Produkte und Produktversionen ohne jedes Mal viel Zeit und Arbeit zu erfordern.  ERLEICHTERUNG 
  21.  ANATOMIE    VON MODULAREM DESIGN  @BennoLoewenberg

  22. “ As a front-end dev, it is my job to abstract

    design into repeatable rules.” Quelle: Hidde de Vries [kommentiert] Design system
  23.   ANSTATT FESTER LAYOUTS …  @BennoLoewenberg

  24.   … FLEXIBEL NUTZBARE ELEMENTE  @BennoLoewenberg

  25. @BennoLoewenberg Gestalten für Module und deren Zusammenspiel auf unterschiedlichen Bildschirmen,

    nicht statischen Masken. Gestalten für sich verändernde Produkte, Plattformen und Nutzeranforderungen.  ANPASSBARKEIT 
  26.   ZUSAMMENSPIEL DER TEILE  @BennoLoewenberg (nach Diana Mounter) Element Komponente

    Seitenlayout Interaktionsmodell
  27. “ Describing what something IS before attempting to describe what it

    looks like: Defining the semantics of a design language is fundamental to design at scale.” Quelle: Mark Dalgleish [kommentiert]
  28.  DESIGN-TOKENS  @BennoLoewenberg (nach Jina Anne) KEINE hartkodierten Werte

  29. @BennoLoewenberg (nach Sophia Voychehovski Prater)  RESPONSIVE  Teaser-Box Suchergebnisraster Landing-Page

  30. @BennoLoewenberg (nach styltil.es)  THEMABLE  LOGO LOGO LOGO Partner-Site Produkt B

    Produkt A
  31. @BennoLoewenberg  ZUSAMMENSETZUNG    EINES DESIGNSYSTEMS 

  32. EINIGE RESSOURCEN @BennoLoewenberg STYLE GUIDE & PATTERN LIB   VIELE

    „DESIGNSYSTEME“ 
  33. Quelles: Jeremy Keith & Tim Bendt [kommentiert] “ It’s not very

    useful to create a library of patterns without providing any framework for using  those patterns.” “ A design system is [primarily] a tool for documentation and communication.”
  34. @BennoLoewenberg am Wichtigsten WIE ANWENDEN WIE ES AUSSIEHT & KLINGT

    DIREKT VERWENDBARES
  35. @BennoLoewenberg GUIDELINES STYLE & PATTERNS DES & DEV RESSOURCEN am

    Wichtigsten
  36. BAUSTEINE (STYLEGUIDE) Farbpaletten Typogr. Maße Rasterdefinitionen Icons & Assets MUSTER

    (PATTERN-LIBRARY) Elemente Komponenten Module Vorlagen REGELN (GUIDELINES) Designprinzipien Umsetzungsrichtlinien Richtlinien für Inhalte @BennoLoewenberg (nach UXpin)
  37. @BennoLoewenberg (nach Dominic McPhee) STYLEGUIDE PATTERN-LIBRARY Designspache Umsetzung PRINZIPIEN DOKUMENTATION

    LIVING-STYLEGUIDE UI- & UX-KITS tragender Erfolgs- faktor ORGA/STEUERUNG
  38. @BennoLoewenberg  BEISPIELE    VON DESIGNSYSTEMEN 

  39. @BennoLoewenberg WIE ES AUSSIEHT & KLINGT

  40.  STYLEGUIDE  Quelle: Atlassian Design

  41.  STYLEGUIDE  Quelle: Atlassian Design

  42.  PATTERN-LIBRARY  Quelle: IBM Carbon

  43.  PATTERN-LIBRARY  Quelle: IBM Carbon

  44.  ANIMATION-GUIDELINES  Quelle: Google Material Design

  45. Quelle: Google Material Design  ANIMATION-GUIDELINES 

  46. WIE ANWENDEN @BennoLoewenberg WIE ANWENDEN

  47.  DESIGN-PRINZIPIEN  Quelle: Apple Human Interface Guidelines [kommentiert]

  48.  DESIGN-PRINZIPIEN  Quelle: Apple Human Interface Guidelines [kommentiert]

  49. Quelle: SAP Fiori  UX-GUIDELINES 

  50. Quelle: SAP Fiori  UX-GUIDELINES 

  51. Quelle: Shopify Polaris  CONTENT-GUIDELINES 

  52. Quelle: Shopify Polaris  CONTENT-GUIDELINES 

  53. @BennoLoewenberg DIREKT VERWENDBARES

  54.  LIVING-STYLEGUIDE  Quelle: Salesforce Lightning

  55.  LIVING-STYLEGUIDE  Quelle: Salesforce Lightning

  56.  UI-KITS  Quelle: Material Design Themer – Sketch Library

  57.  PROTOTYPING-KITS  Quelle: SAP Fiori – Axure Widgets

  58. Quelle: Facebook Design – Sound Files  MEDIA-ASSET-KITS 

  59. @BennoLoewenberg  ERSTELLUNG    EINES DESIGNSYSTEMS 

  60.  GESAMTBILD  + Ein grundlegendes Framework etablieren + Untern.weites Bewusstsein schaffen

    (inkl. Nutzung) + Globalen Design & Dev Werkzeugkasten bauen + Eine „Quelle der Wahrheit“ für alle Gesch.ber. etablieren + Das Designsystem fortwährend prüfen und pflegen @BennoLoewenberg
  61. Quelle: Nathan Curtis   DEFINIERTER ABLAUF 

  62.  EINFÜHRUNG  1. Elementebestandsaufnahme 2. Nutzerrecherche und Eigenschaftenbestimmung 3. Objektestamm identifizieren

    4. Minimum Viable Designsystem 5. Pilotprojekt (Referenz Design-Showcase) @BennoLoewenberg
  63.  INVENTUR  Quelle: Design System Worksheet – Nathan Curtis

  64. Quelle: Gall’s Law on Complex Systems [kommentiert] “ A complex system

    that works, has evolved from a simple system that worked. A complex system designed from scratch never works nor can be patched up to work. Start (over) with a working simple system ”
  65.   KLEINE SCHRITTE  Klein anfangen Allgemeinverständliche und verwendbare Kernelemente Mach

    es anwendbar Designoptionen als Merkmale („Tokens“), anschaulich als Seiten und Elemente dargeboten Verwende es Priorisiere es, mache Design-Demos & -Überprüfungen, für Design-Development-Konvergenz @BennoLoewenberg
  66. @BennoLoewenberg  ASPEKTE    EINES DESIGNSYSTEMS 

  67.  PRODUKT  Es ist KEIN einfaches Nebenprojekt ! Ein Designsystem ist ein

    vollwertiges Produkt das anderen Softwareprodukten dient. Es beeinflusst im erheblichen Maße die Qualität jener Produkte, welche damit gebaut wurden und ist daher ein Erfolgsfaktor . @BennoLoewenberg
  68.  ERFOLGSFAKTOREN  Ein Designsystem benötigt Strategie & Ressourcen wie jedes „normale“

    Produkt. Für dessen erfolgreiche Umsetzung müssen viele Beteiligte aktiv dazu beitragen . Designer und Entwickler werden es unterstützen , nur wenn sie Teilhabe am Designsystem haben. @BennoLoewenberg
  69.   NIEMALS FERTIG  Es ist KEINE Einmalgeschichte ! Um ein Designsystem

    am Leben und relevant zu halten, benötigt es fortwährende Pflege . Je größer es wird, desto kürzer die Zyklen bzgl. Anforderungs & Qualitätsprüfung sowie Aktualisierung . @BennoLoewenberg
  70. @BennoLoewenberg (nach Ken Skistim)  BALANCE  Flexibilität Konsistenz Designsystem alles von

    Grund auf neu machen nur Vorgefertigtes verwenden
  71. @BennoLoewenberg (nach Firefox Photon)  BALANCE  Ähnlichkeit Plattform Produkt Vertrautheit 0

    Designsystem Schlechte Usability Keine Marke
  72.   SKALIERBARE UX  Designsysteme machen UX begreifbar und Markenwerte anwendbar

    für Teams. @BennoLoewenberg
  73.   @BENNOLOEWENBERG   LINKEDIN / XING / TWITTER Design Sprint