Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
  DESIGN SYSTEMS 
UXCAMP EUROPE
JUNE 7. 2020
@BENNOLOEWENBERG
@BennoLoewenberg
even “simple” things
can become complicated
 BUTTON 
DangerDANGERDangerDanger
Positive GoodPositivepositive
Source: Richard Saunders
This Not this
Source: Dominic McPhee
Source: David Roessli
website investors shop mobile app
  DIVERSE CLUTTER 
Source: open device lab Helsinki
Products, Platforms, Devices
“HISTORICALLY GROWN”
@BennoLoewenberg
“Frankenstack”, Code, Design, Org
@BennoLoewenberg
– Lots of people and tools involved
– Little-to-no testing (technical and UX)
– Minimal-to-no documentati...
@BennoLoewenberg
– Time
– Focus
– Brand
- Money
– Engagement
– Value and quality
– Customer satisfaction
  COSTLY CHAOS 
@BennoLoewenberg
  UI-ELEMENTS DETERMINE 
  IF & HOW FUNCTIONS CAN BE USED 
@BennoLoewenberg
any amount of water
at any temperature
can be chosen …
  EU SHOWER TAP 
@BennoLoewenberg
… easier to use,
but limited set of choices
(e. g. just a bit of hot water
cannot be selected)
  US/CA SH...
@BennoLoewenberg
UI design becomes increasingly important
for products and services.
UX determines the value of digital of...
@BennoLoewenberg
+ Design debt reduction (cohesive brand & UX)
+ More focus on UX & specialties (no redundancies)
+ Speedi...
Alps, Alta, Anatomy,
Archipelago, Argon, Apex, Aurora, Axiom,
Backpack, Base, Binary, Bits, Bloom, Bluemix, Blueprint,
Bou...
@BennoLoewenberg
 DEFINITION 
  OF A DESIGN SYSTEM 
@BennoLoewenberg
read: does NOT equal
Design System ≠ Style Guide
Design System ≠ Pattern Library
Design System ≠ System D...
Source: Nathan Curtis [commented]
“ A style guide is an artifact
	 of design process.
	 A design system is a living, funde...
@BennoLoewenberg
+ Blueprint for baseline UI and interaction patterns
+ Rules defining the interplay of technological
	 an...
@BennoLoewenberg
+ Standardisation of basics frees up to focus on
	 e. g. research, inspiration for new concepts,
	 handof...
 ANATOMY 
  OF MODULAR DESIGN 
@BennoLoewenberg
“ As a front-end dev,
	 it is my job to abstract design
	 into repeatable rules.”
Source: Hidde de Vries [commented]
Desig...
  INSTEAD OF FIXED LAYOUTS … 
@BennoLoewenberg
  … FLEXIBLY USABLE ELEMENTS 
@BennoLoewenberg
@BennoLoewenberg
Designing for modules and their interplay
in different screens, not static pages.
Design for change of pr...
  INTERRELATED INDEPENDENT PARTS 
@BennoLoewenberg (aft. Diana Mounter)
Element Component Page layout Interaction model
“ Describing what something IS before
	 attempting to describe what it looks like:
	 Defining the semantics of a design la...
  DESIGN TOKENS 
@BennoLoewenberg (aft. Jina Anne)
NO hard coded values
@BennoLoewenberg (aft. Sophia Voychehovski Prater)
 RESPONSIVE 
Teaser boxSearch results gridLanding page
@BennoLoewenberg (aft. styltil.es)
 THEMABLE 
LOGO LOGOLOGO
Partner SiteProduct BProduct A
@BennoLoewenberg
 COMPOSITION 
  OF A DESIGN SYSTEM 
SOME
RESOURCES
@BennoLoewenberg
STYLE GUIDE &
PATTERN LIB
  MANY “DESIGN SYSTEMS” 
Sources: Jeremy Keith & Tim Bendt [commented]
“ It’s not very useful to create a library
	 of patterns without providing a...
@BennoLoewenberg
most
important
HOW TO USEHOW TO USE HOW IT LOOKS
& SOUNDS
MADE TO USE
@BennoLoewenberg
most
important
HOW TO USEGUIDELINES STYLE &
PATTERNS
DES & DEV
RESOURCES
BUILDING BLOCKS (STYLE GUIDE)
Color Pallettes Typographic Scales Grid Definitions Icons & Assets
UI PATTERNS (LIBRARY)
Ele...
@BennoLoewenberg (aft. Dominic McPhee)
STYLE GUIDE
PATTERN LIBRARY
Design Language Making it real
PRINCIPLES
DOCUMENTATION...
@BennoLoewenberg
 EXAMPLES 
  OF DESIGN SYSTEMS 
@BennoLoewenberg
HOW IT LOOKS
 STYLEGUIDE 
Source: Atlassian Design
 STYLEGUIDE 
Source: Atlassian Design
  PATTERN LIBRARY 
Source: IBM Carbon
  PATTERN LIBRARY 
Source: IBM Carbon
  ANIMATION GUIDELINES 
Source: Google Material Design
Source: Google Material Design
  ANIMATION GUIDELINES 
@BennoLoewenberg
MADE TO USE
  LIVING STYLEGUIDE 
Source: Salesforce Lightning
  LIVING STYLEGUIDE 
Source: Salesforce Lightning
  UI KITS 
Source: Material Design – Sketch Library
  PROTOTYPING KITS 
Source: SAP Fiori – Axure Widgets
Source: Facebook Design – Sound Files
  MEDIA ASSET KITS 
HOW TO USE
@BennoLoewenberg
HOW TO USE
  DESIGN PRINCIPLES 
Source: Apple Human Interface Guidelines [commented]
  DESIGN PRINCIPLES 
Source: Apple Human Interface Guidelines [commented]
Source: SAP Fiori
  UX GUIDELINES 
Source: SAP Fiori
  UX GUIDELINES 
Source: Shopify Polaris
  CONTENT GUIDELINES 
Source: Shopify Polaris
  CONTENT GUIDELINES 
Source: Designers Italia
  UX TOOLS 
Source: Designers Italia
  UX TOOLS 
@BennoLoewenberg
 CREATING 
  A DESIGN SYSTEM 
  BIG PICTURE 
+ Establish a baseline framework
+ Care for company-wide awareness of it and its use
+ Institute a global d...
Source: Nathan Curtis
  DEFINED WORKFLOW 
 INITIATION 
1. Element audit
2. User research and features determination
3. Object-repository identification
4. Minimum v...
  AUDIT & REPOSITORY 
Source: Design System Worksheet – Nathan Curtis
Source: Gall’s Law on Complex Systems [commented]
“ A complex system that works, has evolved
	 from a simple system that w...
  LITTLE STEPS 
Start small
core elements & assets everyone can understand & use
Make it usable
tokenize design options & ...
@BennoLoewenberg
 ASPECTS 
  OF A DESIGN SYSTEM 
 PRODUCT 
It is NOT a simple side project !
A design system is a full-blown product
serving other software products.
It si...
  SUCCESS FACTORS 
A design system needs strategy and resources
as every “regular” product.
For it’s successful realisatio...
  NEVER DONE 
It is NOT a one-off !
To keep a design system alive, relevant,
it constantly needs to be maintained .
The bi...
@BennoLoewenberg (aft. Ken Skistim)
 BALANCE 
Flexibility Consistency
Design System
Create everthing
from scratch
Only use...
@BennoLoewenberg (aft. Firefox Photon)
 BALANCE 
Similarity
PlatformProduct
Familiarity
0
Design System
Bad Usability
No B...
Source: Karri Saarinen [commented]
“ Design systems are creating
	 an API for design .”
Source: Wolf Brüning
“ Four problems a design system
	 can help you to avoid:
	 • Inconsistencies,
	 • Misunderstandings,
...
@BennoLoewenberg
  »A DESIGN SYSTEM IS 
  A TROJAN HORSE FOR UX« 
UI-Kit
Living Styleguide
UX-Tools
& Guidelines
Training &
Support
@BennoLoewenberg
  SINGLE SOURCE & SERVICE 
Requests &
Suggestions
Usage
FIN.NEO
UI-Kit
Living Styleguide
UX-Tools
& Guidelines
Training &
Support
»Single Source fo T...
  TIME FOR HIGH-VALUE WORK 
Source: Cardello & Tsui [commented]
using a
Design System
  SCALING UX 
Design Systems are a way to make UX tangible
to teams and to make brand values actionable .
@BennoLoewenberg
http://
Talks & Workshops
  @BENNOLOEWENBERG 
 LINKEDIN / XING / TWITTER
Vous avez terminé ce document.
Télécharger et lire hors ligne.
Prochain SlideShare
What to Upload to SlideShare
Suivant
Prochain SlideShare
What to Upload to SlideShare
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

Partager

Design Systems (english) #UXCE20

Télécharger pour lire hors ligne

UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.

This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

Livres audio associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Soyez le premier à aimer ceci

Design Systems (english) #UXCE20

  1. 1.   DESIGN SYSTEMS  UXCAMP EUROPE JUNE 7. 2020 @BENNOLOEWENBERG
  2. 2. @BennoLoewenberg even “simple” things can become complicated  BUTTON 
  3. 3. DangerDANGERDangerDanger Positive GoodPositivepositive Source: Richard Saunders This Not this
  4. 4. Source: Dominic McPhee
  5. 5. Source: David Roessli website investors shop mobile app
  6. 6.   DIVERSE CLUTTER  Source: open device lab Helsinki Products, Platforms, Devices
  7. 7. “HISTORICALLY GROWN” @BennoLoewenberg “Frankenstack”, Code, Design, Org
  8. 8. @BennoLoewenberg – Lots of people and tools involved – Little-to-no testing (technical and UX) – Minimal-to-no documentation or specification – Disparate components across all lines of business   UX & DESIGN DEBT 
  9. 9. @BennoLoewenberg – Time – Focus – Brand - Money – Engagement – Value and quality – Customer satisfaction   COSTLY CHAOS 
  10. 10. @BennoLoewenberg   UI-ELEMENTS DETERMINE    IF & HOW FUNCTIONS CAN BE USED 
  11. 11. @BennoLoewenberg any amount of water at any temperature can be chosen …   EU SHOWER TAP 
  12. 12. @BennoLoewenberg … easier to use, but limited set of choices (e. g. just a bit of hot water cannot be selected)   US/CA SHOWER FAUCET 
  13. 13. @BennoLoewenberg UI design becomes increasingly important for products and services. UX determines the value of digital offerings and is their key differentiator .   MULTI-SCREEN & OMNI-CHANNEL 
  14. 14. @BennoLoewenberg + Design debt reduction (cohesive brand & UX) + More focus on UX & specialties (no redundancies) + Speeding up the processes (design, handover, code) + Increasing business value (maintainability, scalability)  GOALS 
  15. 15. Alps, Alta, Anatomy, Archipelago, Argon, Apex, Aurora, Axiom, Backpack, Base, Binary, Bits, Bloom, Bluemix, Blueprint, Boundless, Build, Bouy, Bolt, Canvas, Carbon, Cedar, Chameleon, Chrome, Cirrus, Clarity, Clay, Comet, Connect, Constellation, Cosmos, DressCode, Duet, Eos, Epoxy, Evergreen, Fabric, Feather, Feelix, Fiori, Fish Tank, Fleet, Float, Fluent, Foundation, Forma, Frontier, Fuse, Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet, Group, Harmony, Hedwig, Helix, Honeycomb, Horizon, Indigo, Janus, Keirin, Kotti, Latitude, Leonardo, Lexicon, Lightning, Liquid, Luci, Luna, Material, Mayflower, Miui, Mind, Mineral, Minutiae, Mixtape, Momentum, Mosaic, Muesli, Nachos, Nicollet, Northstar, Nova, One, Oneui, Opattern, Orbit, Origami, Otkit, Oxide, Patternfly, Photon, Plasma, Polaris, Poncho, Precise, Predix, Primer, Protocol, Purple, Quartz, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir, Scooter, Seeds, Skin, ShowCar, Snacks, Solar, Solid, SolidWork, Spark, Spectrum, Stacks, Starling, Sticky, SynNeo, titch, Swarm, Tape, Terra, ThingWorx, Thumbprint, rm, Unison, Unity, Ustyle, Vanilla, erblocks, Yarn@BennoLoewenberg   DESIGN SYSTEMS 
  16. 16. @BennoLoewenberg  DEFINITION    OF A DESIGN SYSTEM 
  17. 17. @BennoLoewenberg read: does NOT equal Design System ≠ Style Guide Design System ≠ Pattern Library Design System ≠ System Design Design System ≠ Sketch Library  DE-TERMINATION 
  18. 18. Source: Nathan Curtis [commented] “ 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. 19. @BennoLoewenberg + Blueprint for baseline UI and interaction patterns + Rules defining the interplay of technological and visual components for consistent UX + Codify a system to encourage re-use across products for a cohesive UX  INTERPLAY 
  20. 20. @BennoLoewenberg + Standardisation of basics frees up to focus on e. g. research, inspiration for new concepts, handoff process, holistic view on features and their impact to the system. + Structure for the foundation of all products and product versions, without requiring a lot of efford each time.  FACILITATION 
  21. 21.  ANATOMY    OF MODULAR DESIGN  @BennoLoewenberg
  22. 22. “ As a front-end dev, it is my job to abstract design into repeatable rules.” Source: Hidde de Vries [commented] Design system
  23. 23.   INSTEAD OF FIXED LAYOUTS …  @BennoLoewenberg
  24. 24.   … FLEXIBLY USABLE ELEMENTS  @BennoLoewenberg
  25. 25. @BennoLoewenberg Designing for modules and their interplay in different screens, not static pages. Design for change of products, platforms and user-related affordances.  ADAPTABILITY 
  26. 26.   INTERRELATED INDEPENDENT PARTS  @BennoLoewenberg (aft. Diana Mounter) Element Component Page layout Interaction model
  27. 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.” Source: Mark Dalgleish [commented]
  28. 28.   DESIGN TOKENS  @BennoLoewenberg (aft. Jina Anne) NO hard coded values
  29. 29. @BennoLoewenberg (aft. Sophia Voychehovski Prater)  RESPONSIVE  Teaser boxSearch results gridLanding page
  30. 30. @BennoLoewenberg (aft. styltil.es)  THEMABLE  LOGO LOGOLOGO Partner SiteProduct BProduct A
  31. 31. @BennoLoewenberg  COMPOSITION    OF A DESIGN SYSTEM 
  32. 32. SOME RESOURCES @BennoLoewenberg STYLE GUIDE & PATTERN LIB   MANY “DESIGN SYSTEMS” 
  33. 33. Sources: Jeremy Keith & Tim Bendt [commented] “ 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. 34. @BennoLoewenberg most important HOW TO USEHOW TO USE HOW IT LOOKS & SOUNDS MADE TO USE
  35. 35. @BennoLoewenberg most important HOW TO USEGUIDELINES STYLE & PATTERNS DES & DEV RESOURCES
  36. 36. BUILDING BLOCKS (STYLE GUIDE) Color Pallettes Typographic Scales Grid Definitions Icons & Assets UI PATTERNS (LIBRARY) Elements Components Modules Templates RULES (GUIDELINES) Design Principles Implementation Guidelines Editorial Guidelines @BennoLoewenberg (aft. UXpin)
  37. 37. @BennoLoewenberg (aft. Dominic McPhee) STYLE GUIDE PATTERN LIBRARY Design Language Making it real PRINCIPLES DOCUMENTATION LIVING STYLEGUIDE UI & UX KITS major success factor GOVERNANCE
  38. 38. @BennoLoewenberg  EXAMPLES    OF DESIGN SYSTEMS 
  39. 39. @BennoLoewenberg HOW IT LOOKS
  40. 40.  STYLEGUIDE  Source: Atlassian Design
  41. 41.  STYLEGUIDE  Source: Atlassian Design
  42. 42.   PATTERN LIBRARY  Source: IBM Carbon
  43. 43.   PATTERN LIBRARY  Source: IBM Carbon
  44. 44.   ANIMATION GUIDELINES  Source: Google Material Design
  45. 45. Source: Google Material Design   ANIMATION GUIDELINES 
  46. 46. @BennoLoewenberg MADE TO USE
  47. 47.   LIVING STYLEGUIDE  Source: Salesforce Lightning
  48. 48.   LIVING STYLEGUIDE  Source: Salesforce Lightning
  49. 49.   UI KITS  Source: Material Design – Sketch Library
  50. 50.   PROTOTYPING KITS  Source: SAP Fiori – Axure Widgets
  51. 51. Source: Facebook Design – Sound Files   MEDIA ASSET KITS 
  52. 52. HOW TO USE @BennoLoewenberg HOW TO USE
  53. 53.   DESIGN PRINCIPLES  Source: Apple Human Interface Guidelines [commented]
  54. 54.   DESIGN PRINCIPLES  Source: Apple Human Interface Guidelines [commented]
  55. 55. Source: SAP Fiori   UX GUIDELINES 
  56. 56. Source: SAP Fiori   UX GUIDELINES 
  57. 57. Source: Shopify Polaris   CONTENT GUIDELINES 
  58. 58. Source: Shopify Polaris   CONTENT GUIDELINES 
  59. 59. Source: Designers Italia   UX TOOLS 
  60. 60. Source: Designers Italia   UX TOOLS 
  61. 61. @BennoLoewenberg  CREATING    A DESIGN SYSTEM 
  62. 62.   BIG PICTURE  + Establish a baseline framework + Care for company-wide awareness of it and its use + Institute a global design and development tool set + Implement a “single source of truth” across all LOBs + Constanly review and maintain the design system @BennoLoewenberg
  63. 63. Source: Nathan Curtis   DEFINED WORKFLOW 
  64. 64.  INITIATION  1. Element audit 2. User research and features determination 3. Object-repository identification 4. Minimum viable design system 5. Pilot project (reference design showcase) @BennoLoewenberg
  65. 65.   AUDIT & REPOSITORY  Source: Design System Worksheet – Nathan Curtis
  66. 66. Source: Gall’s Law on Complex Systems [commented] “ 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 ”
  67. 67.   LITTLE STEPS  Start small core elements & assets everyone can understand & use Make it usable tokenize design options & showcase pages & elements Use it prioratize it, conduct design clinics, demos & audits to foster design & development convergence @BennoLoewenberg
  68. 68. @BennoLoewenberg  ASPECTS    OF A DESIGN SYSTEM 
  69. 69.  PRODUCT  It is NOT a simple side project ! A design system is a full-blown product serving other software products. It significantly influences the quality of the products, that are built with it and therefore is a success factor @BennoLoewenberg
  70. 70.   SUCCESS FACTORS  A design system needs strategy and resources as every “regular” product. For it’s successful realisation many participants need to contribute to it. Designers and developers will keep supporting it , only if they have ownership of the design system. @BennoLoewenberg
  71. 71.   NEVER DONE  It is NOT a one-off ! To keep a design system alive, relevant, it constantly needs to be maintained . The bigger it grows, the shorter the cycles need to be for checking its affordances, quality and updating it . @BennoLoewenberg
  72. 72. @BennoLoewenberg (aft. Ken Skistim)  BALANCE  Flexibility Consistency Design System Create everthing from scratch Only use what comes in-the-box
  73. 73. @BennoLoewenberg (aft. Firefox Photon)  BALANCE  Similarity PlatformProduct Familiarity 0 Design System Bad Usability No Brand
  74. 74. Source: Karri Saarinen [commented] “ Design systems are creating an API for design .”
  75. 75. Source: Wolf Brüning “ Four problems a design system can help you to avoid: • Inconsistencies, • Misunderstandings, • Thinking in Pages, • Duplicate Work.”
  76. 76. @BennoLoewenberg   »A DESIGN SYSTEM IS    A TROJAN HORSE FOR UX« 
  77. 77. UI-Kit Living Styleguide UX-Tools & Guidelines Training & Support @BennoLoewenberg   SINGLE SOURCE & SERVICE 
  78. 78. Requests & Suggestions Usage FIN.NEO UI-Kit Living Styleguide UX-Tools & Guidelines Training & Support »Single Source fo Truth« @BennoLoewenberg   CONTRIBUTION & USE 
  79. 79.   TIME FOR HIGH-VALUE WORK  Source: Cardello & Tsui [commented] using a Design System
  80. 80.   SCALING UX  Design Systems are a way to make UX tangible to teams and to make brand values actionable . @BennoLoewenberg
  81. 81. http:// Talks & Workshops
  82. 82.   @BENNOLOEWENBERG   LINKEDIN / XING / TWITTER

UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services. This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.

Vues

Nombre de vues

196

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

0

Actions

Téléchargements

8

Partages

0

Commentaires

0

Mentions J'aime

0

×