Build your design system from scratch

Planning, setting and creating a design system is crucial for effectively designing and keeping consistent user interfaces.

Transcript

1. @ive77i Build your design system from scratch @webcampzagreb #wczg Build your design system from scratch WebCamp Zagreb October 9th 2019
2. @ive77i Build your design system from scratch @webcampzagreb #wczg Ivana Miličić Digital Product Designer Hi!
3. @ive77i Build your design system from scratch @webcampzagreb #wczg Houston, we have a problem!
4. @ive77i Build your design system from scratch @webcampzagreb #wczg physical vs digital product
5. @ive77i Build your design system from scratch @webcampzagreb #wczg multiple designers and stakeholders
6. @ive77i Build your design system from scratch @webcampzagreb #wczg multitude of platforms and devices
7. @ive77i Build your design system from scratch @webcampzagreb #wczg
8. @ive77i Build your design system from scratch @webcampzagreb #wczg why?
9. @ive77i Build your design system from scratch @webcampzagreb #wczg individual and not systematical problem solving fragmented visual language
10. @ive77i Build your design system from scratch @webcampzagreb #wczg language is not understood by everyone misunderstandings
11. @ive77i Build your design system from scratch @webcampzagreb #wczg disjointed user experiences
12. @ive77i Build your design system from scratch @webcampzagreb #wczg
13. @ive77i Build your design system from scratch @webcampzagreb #wczg manage the chaos
14. @ive77i Build your design system from scratch @webcampzagreb #wczg build better and faster
15. @ive77i Build your design system from scratch @webcampzagreb #wczg make scale possible
16. @ive77i Build your design system from scratch @webcampzagreb #wczg achieve consistency
17. @ive77i Build your design system from scratch @webcampzagreb #wczg improve accessibility
18. @ive77i Build your design system from scratch @webcampzagreb #wczg
19. @ive77i Build your design system from scratch @webcampzagreb #wczg what?
20. @ive77i Build your design system from scratch @webcampzagreb #wczg a product not project!
21. @ive77i Build your design system from scratch @webcampzagreb #wczg a collection of reusable components, guided by clear standards assembled can build any number of applications
22. @ive77i Build your design system from scratch @webcampzagreb #wczg ongoing it will require maintenance and improvements
23. @ive77i Build your design system from scratch @webcampzagreb #wczg
24. @ive77i Build your design system from scratch @webcampzagreb #wczg how?
25. @ive77i Build your design system from scratch @webcampzagreb #wczg 1. an inventory • visual attributes • UI elements https://cssstats.com https://github.com/getflourish/Sketch-Style-Inventory
26. @ive77i Build your design system from scratch @webcampzagreb #wczg
27. @ive77i Build your design system from scratch @webcampzagreb #wczg 2. guidelines defining design language styles and properties
28. @ive77i Build your design system from scratch @webcampzagreb #wczg
29. @ive77i Build your design system from scratch @webcampzagreb #wczg • colors • typography • spacing • images • visual form • motion • sound (visual) design language
30. @ive77i Build your design system from scratch @webcampzagreb #wczg http://tiny.cc/9g36dz design system http://tiny.cc/8h46dz demo screens
31. @ive77i Build your design system from scratch @webcampzagreb #wczg • brand • information • hierarchy • interaction feedback color
32. @ive77i Build your design system from scratch @webcampzagreb #wczg 1-3 primaries neutrals for general UI colors for different states
33. @ive77i Build your design system from scratch @webcampzagreb #wczg • brand • information • hierarchy • user experience typography
34. @ive77i Build your design system from scratch @webcampzagreb #wczg up to two typefaces / weights type scale leading, spacing and sizing https://www.modularscale.com
35. @ive77i Build your design system from scratch @webcampzagreb #wczg • brand • visual communication • icons, illustrations, photos • define guidelines images
36. @ive77i Build your design system from scratch @webcampzagreb #wczg • backgrounds • gradients • textures • shadows/elevation (z-indexes) • rounded corners • borders visual forms
37. @ive77i Build your design system from scratch @webcampzagreb #wczg • animations • tansitions • sound motion and sound
38. @ive77i Build your design system from scratch @webcampzagreb #wczg 3. UI library designing components with global rules and reusable style
39. @ive77i Build your design system from scratch @webcampzagreb #wczg elements (or basics, or atoms) components (or molecules, or modules) regions (or zones, or organisms) layouts
40. @ive77i Build your design system from scratch @webcampzagreb #wczg • consistent • self-contained • reusable • accessible • robust foundations
41. @ive77i Build your design system from scratch @webcampzagreb #wczg
42. @ive77i Build your design system from scratch @webcampzagreb #wczg Thanks! twitter.com/ive77i linkedin.com/in/ivanamilicic/ instagram.com/just_ivana_things/ joind.in/talk/d2bc8