Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Benno Lœwenberg, profile picture
Uploaded byBenno Lœwenberg
PDF, PPTX1,005 views

Design Systems (english) #UXcamHH

The document discusses the intricacies and significance of design systems, emphasizing their role as a comprehensive product rather than just a static style guide or pattern library. It outlines the components, governance, and success factors necessary for creating and maintaining effective design systems that enhance user experience and support digital product development. The importance of modular design, adaptability, and structured documentation is highlighted to ensure cohesion across various platforms and services.

Business◦
Download as PDF, PPTX
  DESIGN SYSTEMS  UXCAMP, HAMBURG AUGUST 11, 2018 @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 Code, Tech, Design, Org
@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 
@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 SHOWER FAUCET 
@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 
@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 
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   DESIGN SYSTEMS 
@BennoLoewenberg  DEFINITION    OF A DESIGN SYSTEM 
@BennoLoewenberg read: does NOT equal Design System ≠ Style Guide Design System ≠ Pattern Library Design System ≠ System Design  DE-TERMINATION 
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.”
@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 
@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 
 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] Design system
  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 products, platforms and user-related affordances.  ADAPTABILITY 
  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 language is fundamental to design at scale.” Source: Mark Dalgleish [commented]
  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 any framework for using  those patterns.” “ A design system is [primarily] a tool for documentation and communication.”
@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) Elements Components Modules Templates RULES (GUIDELINES) Design Principles Implementation Guidelines Editorial Guidelines @BennoLoewenberg (aft. UXpin)
@BennoLoewenberg (aft. Dominic McPhee) STYLE GUIDE PATTERN LIBRARY Design Language Making it real PRINCIPLES DOCUMENTATION LIVING STYLEGUIDE UI & UX KITS major success factor GOVERNANCE
@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 
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 
@BennoLoewenberg MADE TO USE
  LIVING STYLEGUIDE  Source: Salesforce Lightning
  LIVING STYLEGUIDE  Source: Salesforce Lightning
  UI KITS  Source: Material Design Themer – Sketch Library
  PROTOTYPING KITS  Source: SAP Fiori – Axure Widgets
Source: Facebook Design – Sound Files   MEDIA ASSET KITS 
@BennoLoewenberg  CREATING    A DESIGN SYSTEM 
  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
Source: Nathan Curtis   DEFINED WORKFLOW 
 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
  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 worked. A complex system designed from scratch never works nor can be patched up to work. Start (over) with a working simple system ”
  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
@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 significantly influences the quality of the products, that are built with it and therefore is a success factor @BennoLoewenberg
  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
  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
@BennoLoewenberg (aft. Ken Skistim)  BALANCE  Flexibility Consistency Design System Create everthing from scratch Only use what comes in-the-box
@BennoLoewenberg (aft. Firefox Photon)  BALANCE  Similarity PlatformProduct Familiarity 0 Design System Bad Usability No Brand
  SCALING UX  Design Systems are a way to make UX tangible to teams and to make brand values actionable . @BennoLoewenberg
  @BENNOLOEWENBERG   LINKEDIN / XING / TWITTER Design Sprint