Material Design System (english) #DevFest

Ce545904f81ef4a81dead98c38b4b240?s=47 Benno Loewenberg
November 07, 2018

Material Design System (english) #DevFest

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 Google's Material design system, that helps to avoid (or overcome) design dept and to enables scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Marerial Design system helps facilitating the designer-developer workflow too.

#MaterialDesign #Google #DesignSystem #ProductDesign #DesignProcess #InteractionDesign #UserExperience #UX #UI #ModularDesign #AtomicDesign #PatternLibrary #StyleGuide #UXguidelines #UXguideline #Elements #Modules #Components #ButtonFixing #ButtonBurnout #UIanimation #MotionDesign #MeaningfulMotion #Theming #Customizing

Ce545904f81ef4a81dead98c38b4b240?s=128

Benno Loewenberg

November 07, 2018
Tweet

Transcript

  1.   MATERIAL DESIGN SYSTEM  DEVFEST, CANCUN NOVEMBER 7, 2018 @BENNOLOEWENBERG

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

  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. @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 & CODE DEBT 
  9. @BennoLoewenberg – Time – Focus – Brand - Money –

    Engagement – Value and quality – Customer satisfaction   COSTLY CHAOS 
  10. @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 
  11. PRODUCT USER @BennoLoewenberg USER Value & interactions UI

  12. @BennoLoewenberg + Design & code debt reduction (cohesiveness) + More

    focus on specialties (no redundancies) + Speeding up the processes (design, handover, code) + Increasing business value (maintainability, scalability)  GOALS 
  13. Alps, Alta, Anatomy, Archipelago, Argon, Apex, Axiom, Backpack, Base, Binary,

    Bloom, Blueprint, Boundless, Build, Bouy, Canvas, Carbon, Cedar, Chameleon, Chrome, Cirrus, Clarity, Clay, Comet, Cosmos, DressCode, Eos, Evergreen, Fabric, Feather, Feelix, Fiori, Fishtank, Fleet, Float, Fluent, Foundation, Frontier, Fuse, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet, Harmony, Hedwig, Helix, Honeycomb, Horizon, Indigo, Kotti, Lexicon, Lightning, Luci, Material, Mind, Mineral, Mosaic, Nachos, Northstar, Nova, One, Opattern, Orbit, Origami, Otkit, PatternFly, Photon, Plasma, Polaris, Predix, Primer, Purple, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Scooter, Skin, ShowCar, Snacks, Solar, Solid, SolidWork, Spark, Spectrum, acks, Starling, Stitch, Swarm, ThingWorx, Uniform, Unison, Unity, Ustyle, onderblocks @BennoLoewenberg   DESIGN SYSTEMS 
  14. @BennoLoewenberg   MATERIAL DESIGN    IS A DESIGN SYSTEM 

  15. “ As a front-end dev, it is my job to abstract

    design into repeatable rules.” Source: Hidde de Vries [commented] Design system
  16. @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 
  17. @BennoLoewenberg + Standardisation of basics frees up to focus on

    e. g. 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 
  18.   CORE PRINCIPLES    OF MATERIAL DESIGN  @BennoLoewenberg

  19. @BennoLoewenberg Conceptually based on real world materials such as paper,

    but …   MATERIAL METAPHOR 
  20.   INSTEAD OF FIXED LAYOUTS …  @BennoLoewenberg

  21.   … FLEXIBLY USABLE ELEMENTS  @BennoLoewenberg

  22. @BennoLoewenberg 3D-ish “Flat Design” with drop shadows & gradients added

    to provide visual cues like in real physical space   MATERIAL METAPHOR 
  23.  SURFACES  Source: material.io

  24.  ELEVATION  Source: material.io

  25.   LIGHT & SHADOWS  Source: material.io

  26. Source: material.io all aspects combined to an interface

  27. @BennoLoewenberg Animated Transitions Responsive Feedback (Ripples)   MEANINGFUL MOTION 

  28.  ANIMATION  Source: material.io

  29.  PRINCIPLES  Source: material.io

  30.  EXAMPLES  Source: material.io

  31. @BennoLoewenberg   COMPOSITION OF THE    MATERIAL DESIGN SYSTEM 

  32. @BennoLoewenberg HOW TO USE HOW TO BUILD HOW IT LOOKS

    MADE TO USE
  33. @BennoLoewenberg HOW TO USE DEV GUIDELINES DESIGN GUIDELINES DESIGN &

    DEV RESOURCES
  34. Source: Source: material.io   HOW IT LOOKS 

  35.  OUTLOOK  Source: material.io

  36.  INTERACTION  Source: material.io

  37. Source: Source: material.io   HOW TO BUILD 

  38.  GUIDELINES  Source: material.io

  39.  STYLEGUIDE    COMPONENT LIBRARY  Source: material.io

  40. Source: Source: material.io   MADE TO USE 

  41.   UI KIT & …  Source: Material Design Themer – Sketch

    Library
  42. Source: Material Design Themer – Sketch Plugin   … THEMING TOOL 

  43. Source: gallery.io   LIVING STYLEGUIDE 

  44.  FRAMEWORKS  @BennoLoewenberg Polymer, Material UI, Material Components, Material Design Lite,

    Angular Material, etc…
  45. @BennoLoewenberg  THEMING    MATERIAL DESIGN 

  46.  THEMING  An adaptable & flexible system as baseline to reuse

    and build upon to improve designer-developer workflow @BennoLoewenberg
  47. Source: material.io Baseline design Customized design

  48. Source: material.io

  49. Source: material.io

  50. @BennoLoewenberg  ASPECTS    OF A DESIGN SYSTEM 

  51. Source: Karri Saarinen [commented] “ Design systems are creating an API

    for design .”
  52. Source: Wolf Brüning “ Four problems a design system can help

    you to avoid: • Inconsistencies, • Misunderstandings, • Thinking in Pages, • Duplicate Work.”
  53.   @BENNOLOEWENBERG   LINKEDIN  / TWITTER Design Sprint