Material Design System (english) #DevFest
•
2 likes•342 views
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.
Recommended
Recommended
More Related Content
Similar to Material Design System (english) #DevFest
Similar to Material Design System (english) #DevFest (20)
More from Benno Lœwenberg
More from Benno Lœwenberg (20)
Recently uploaded
Recently uploaded (20)
Material Design System (english) #DevFest
- 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
- 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
- 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
- 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
- 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
- 37. Source:Source: material.io HOW TO BUILD
- 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…
- 46. THEMING An adaptable & flexible system as baseline to reuse and build upon to improve designer-developer workflow @BennoLoewenberg
- 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.”