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.

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

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

3. DangerDANGERDangerDanger
Positive GoodPositivepositive
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 USEHOW TO BUILD HOW IT LOOKS
MADE TO USE

33. @BennoLoewenberg
HOW TO USEDEV
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