Design Systems (english) #Fluxible

Design Systems (english) #Fluxible

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.

#DesignSystems #DesignSystem #ProductDesign #DesignProcess #InteractionDesign #UserExperience #UX #UI #ModularDesign #AtomicDesign #PatternLibraries #PatternLibrary #StyleGuides #StyleGuide #Elements #Modules #Components

Ce545904f81ef4a81dead98c38b4b240?s=128

Benno Loewenberg

September 21, 2017
Tweet

Transcript

  1.   DESIGN SYSTEMS  FLUXIBLE, TORONTO SEPTEMBER 21, 2017 @BENNOLOEWENBERG

  2. @BennoLoewenberg  BUTTON  even “simple” things can become complicated

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

    Saunders This Not this
  4. Source: Dominic McPhee

  5. Source: David Roessli website investors shop mobile app

  6.   DIVERSE CLUTTER  Source: open device lab Helsinki Products, Platforms,

    Devices
  7. “HISTORICALLY GROWN” @BennoLoewenberg Code, Tech, Design, Org

  8.   UX & DESIGN DEBT  – 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 @BennoLoewenberg
  9.   COSTLY CHAOS  – Time – Focus – Brand -

    Money – Engagement – Value and quality – Customer satisfaction @BennoLoewenberg
  10. @BennoLoewenberg   UI-ELEMENTS DETERMINE    IF & HOW FUNCTIONS CAN

    BE USED 
  11.   EU SHOWER TAP  @BennoLoewenberg any amount of water at

    any temperature can be chosen …
  12.   US/CA SHOWER FAUCET  @BennoLoewenberg … easier to use, but

    limited set of choices (just a bit of hot water connot be selected)
  13.   MULTI-SCREEN & OMNI-CHANNEL  UI design becomes increasingly important for

    products and services. UX determines the value of digital offerings and is their key differentiator . @BennoLoewenberg
  14.  GOALS  + 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) @BennoLoewenberg
  15. Alta, Ant, Apex, Axiom, Backpack, Binary, Blueprint, Boundless, Build, Canvas,

    Carbon, Chameleon, Cirrus, Clarity, Cosmos, DressCode, Fabric, Feelix, Fiori, Fleet, Fluent, Garden, Gel, Glue, Gravity, Grommet, Harmony, Honeycomb, Kotti, Lightning, Material, Mind, Nachos, Northstar, Nova, Opattern, Origami, PatternFly, Photon, Plasma, Polaris, Predix, Primer, Purple, Rizzo, Scooter, Show- Car, Solar, Solid, SolidWork, Spark, Spectrum, Stacks, ingWorx, Uniform, Unity, Quik, Vanilla … @BennoLoewenberg   DESIGN SYSTEMS 
  16. @BennoLoewenberg  DEFINITION    OF A DESIGN SYSTEM 

  17.  DE-TERMINATION  Design System ≠ Style Guide Design System ≠ Pattern

    Library Design System ≠ System Design @BennoLoewenberg read: does NOT equal
  18. Source: Nathan Curtis (commented)

  19.  INTERPLAY  + 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 Source: Emily Maxie
  20.  FACILITATION  + 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. @BennoLoewenberg
  21.  ANATOMY    OF MODULAR DESIGN  @BennoLoewenberg

  22. Source: Hidde de Vries (commented) Design system

  23.   INSTEAD OF FIXED LAYOUTS …  @BennoLoewenberg

  24.   … FLEXIBLY USABLE ELEMENTS  @BennoLoewenberg

  25. @BennoLoewenberg  ADAPTABILITY  Designing for modules and their interplay in different

    screens, not static pages. Design for change of products, platforms and user-related affordances.
  26.   INTERRELATED INDEPENDENT PARTS  @BennoLoewenberg (aft. Diana Mounter) Element Component

    Page layout Interaction model
  27.   DESIGN TOKENS  @BennoLoewenberg (aft. Jina Anne) NO hard coded

    values
  28. @BennoLoewenberg (aft. Sophia Voychehovski Prater)  RESPONSIVE  Teaser box Search results

    grid Landing page
  29. @BennoLoewenberg (aft. styltil.es)  THEMABLE  LOGO LOGO LOGO Partner Site Product

    B Product A
  30. @BennoLoewenberg  COMPOSITION    OF A DESIGN SYSTEM 

  31. SOME RESOURCES @BennoLoewenberg STYLE GUIDE & PATTERN LIB   MANY

    “DESIGN SYSTEMS” 
  32. Source: Jeremy Keith

  33. @BennoLoewenberg most important HOW TO USE HOW TO USE HOW

    IT LOOKS & SOUNDS MADE TO USE
  34. @BennoLoewenberg most important HOW TO USE GUIDELINES STYLE & PATTERNS

    DES & DEV RESOURCES
  35. 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)
  36. @BennoLoewenberg (aft. Dominic McPhee) STYLE GUIDE PATTERN LIBRARY Design Language

    Making it real PRINCIPLES DOCUMENTATION LIVING STYLEGUIDE UI & UX KITS major success factor GOVERNANCE
  37. @BennoLoewenberg  EXAMPLES    OF DESIGN SYSTEMS 

  38. @BennoLoewenberg HOW IT LOOKS

  39.  STYLEGUIDE  Source: Atlassian Design

  40.  STYLEGUIDE  Source: Atlassian Design

  41.   PATTERN LIBRARY  Source: IBM Carbon

  42.   PATTERN LIBRARY  Source: IBM Carbon

  43.   ANIMATION GUIDELINES  Source: Google Material Design

  44. Source: Google Material Design   ANIMATION GUIDELINES 

  45. HOW TO USE @BennoLoewenberg HOW TO USE

  46.   DESIGN PRINCIPLES  Source: Apple Human Interface Guidelines (commented)

  47.   DESIGN PRINCIPLES  Source: Apple Human Interface Guidelines (commented)

  48. Source: SAP Fiori   UX GUIDELINES 

  49. Source: SAP Fiori   UX GUIDELINES 

  50. Source: Shopify Polaris   CONTENT GUIDELINES 

  51. Source: Shopify Polaris   CONTENT GUIDELINES 

  52. @BennoLoewenberg MADE TO USE

  53.   LIVING STYLEGUIDE  Source: Salesforce Lightning

  54.   LIVING STYLEGUIDE  Source: Salesforce Lightning

  55.   UI KITS  Source: Material Design Themer – Sketch Library

  56.   PROTOTYPING KITS  Source: SAP Fiori – Axure Widgets

  57. Source: Facebook Design – Sound Files   MEDIA ASSET KITS 

  58. @BennoLoewenberg  CREATING    A DESIGN SYSTEM 

  59.   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
  60. Source: Nathan Curtis   DEFINED WORKFLOW 

  61.  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
  62.   AUDIT & REPOSITORY  Source: Design System Worksheet – Nathan

    Curtis
  63.   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 Source: Nathan Curtis
  64. @BennoLoewenberg  ASPECTS    OF A DESIGN SYSTEM 

  65.  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
  66.   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
  67.   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
  68. @BennoLoewenberg (aft. Ken Skistim)  BALANCE  Flexibility Consistency Design System Create

    everthing from scratch Only use what comes in-the-box
  69. @BennoLoewenberg (aft. Firefox Photon)  BALANCE  Similarity Platform Product Familiarity 0

    Design System Bad Usability No Brand
  70.   SCALING UX  Design Systems are a way to make

    UX tangible to teams and to make brand values actionable . @BennoLoewenberg
  71.   BENNOLOEWENBERG   LINKEDIN / XING / TWITTER  @ Design Sprint