Design System, the full story

Transcript

1. DESIGN SYSTEMS The Full Story
2. HELLO I’M TIM SCHOCH 2004 – 2012 Webdesigner / Developer Since 2013 UX Designer Since 2016 Freelancer
5. tim@timschoch.com schochtim @UXAustralia#DL19 @tim_schoch
6. style guides, UX patterns and functional components. Design systems combine
7. stand-alone products that need to be maintained. Design systems are
8. There is no warrant for a design system in itself.
9. FIVE PILLARS
11. 1st SELL IT
13. PREPARE – Quick Research – Value Proposition – Scope and Resources
14. FUNDING – Dedicated Budget – Product Team Rotation – Licencing
15. Consistency Improved Quality Speed Benefits of a Design System
16. Design systems offer advantages, while restricting other parts of the current process. It’s a trade off
17. Design systems allow others to focus on generating value. Elevator Pitch
18. 2nd RESEARCH
19. Design systems need to know the reason they exist. What problem are we solving?
20. WHO ARE OUR USERS? – Users – Product Teams
21. COMPONENT INVENTORY
22. THE GOAL – Create a shared vision – Define realistic scope – Decide on UX Principles – Name it
23. 3rd DESIGN
28. WE TRADE PERFECTION FOR SPEED AND CONSISTENCY
29. NAMING helps with adoption
30. 4th BUILD
31. DRY
32. WET
33. BUTTON Variations – Primary – Secondary – Outline – Ghost Properties – Label – Sub-Label – Icon – Animated States – Default – Hover – Active – Disabled
34. 64 4 × 4 × 4
35. 80 4 × 4 × 5
36. CARD Variations – Default – Hero – Small – Product – Testimonial Properties – Title – Sub-Title – Category – Images – Video – Description – Author – More Link – Product – Price – Discount – Ribbon States – Default • Hover • Selected – Highlighted • Hover • Selected
37. 360 5 × 6 × 12
39. DRY + WET
40. DOCUMENTATION – Vision – UX Principles + Patterns – Components – Tokens – Change log – Contact page
41. eg. Storybook eg. zeroheight
42. 5th MAINTAIN
44. EVERYTHING is a public API
45. 1.4.2 Major.Minor.Bugfix Semantic Versioning
46. SCALING how to build rigid and stay flexible
48. WRAP UP
51. LINKS + ARTICLES tsc.li/followup KEEP IN CONTACT @tim_schoch in/schochtim ICONS icofont.com simpleicons.org PICTURES Me 