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

Designsysteme (deutsch) #UXcampHH

Designsysteme (deutsch) #UXcampHH

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 #ProductDesign #DesignProcess #InteractionDesign #UserExperience #UX #UI #ModularDesign #AtomicDesign #PatternLibraries #PatternLibrary #StyleGuides #StyleGuide #UXguidelines #UXguideline #Elemente #Module #Komponenten #ButtonFixing #ButtonBurnout

Benno Lœwenberg

August 11, 2018
Tweet

More Decks by Benno Lœwenberg

Other Decks in Business

Transcript

  1. @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 
  2. @BennoLoewenberg – Zeit - Geld – Fokus – Marke –

    Engagement – Wert und Qualität – Kundenzufriedenheit   KOSTSPIELIGES CHAOS 
  3. @BennoLoewenberg … einfacher zu bedienen, aber eingeschränkte Möglichkeiten (z. B.

    nur ein wenig warmes Wasser ist nicht wählbar)   US/CA DUSCHARMATUR 
  4. @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 
  5. @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 
  6. 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 
  7. 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.”
  8. @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 
  9. @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 
  10. “ As a front-end dev, it is my job to abstract

    design into repeatable rules.” Quelle: Hidde de Vries [kommentiert] Design system
  11. @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 
  12. “ 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]
  13. 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.”
  14. 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)
  15.  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
  16.  EINFÜHRUNG  1. Elementebestandsaufnahme 2. Nutzerrecherche und Eigenschaftenbestimmung 3. Objektestamm identifizieren

    4. Minimum Viable Designsystem 5. Pilotprojekt (Referenz Design-Showcase) @BennoLoewenberg
  17. 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 ”
  18.   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
  19.  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
  20.  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
  21.   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