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.

1. DESIGNSYSTEME
UXCAMP, HAMBURG
11. AUGUST 2018
@BENNOLOEWENBERG

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

3. DangerDANGERDangerDanger
Positive GoodPositivepositive
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-BoxSuchergebnisrasterLanding-Page

30. @BennoLoewenberg (nach styltil.es)
THEMABLE
LOGO LOGOLOGO
Partner-SiteProdukt BProdukt 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
PlattformProdukt
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