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

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