Successfully reported this slideshow.
Your SlideShare is downloading. ×

Design Systems, the Full Story

Ad

DESIGNSYSTEMSThe Full Story

Ad

HELLOI’M
TIMSCHOCH
2004 – 2012
Webdesigner / Developer
Since 2013
UX Designer
Since 2016
Freelancer

Ad

tim@timschoch.com
schochtim@UXAustralia#DL19
@tim_schoch

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 51 Ad
1 of 51 Ad
Advertisement

Design Systems, the Full Story

  1. 1. DESIGNSYSTEMSThe Full Story
  2. 2. HELLOI’M TIMSCHOCH 2004 – 2012 Webdesigner / Developer Since 2013 UX Designer Since 2016 Freelancer
  3. 3. tim@timschoch.com schochtim@UXAustralia#DL19 @tim_schoch
  4. 4. style guides, UX patterns and functional components. Design systems combine
  5. 5. stand-alone products that need to be maintained. Design systems are
  6. 6. There is no warrant for a design system in itself.
  7. 7. FIVEPILLARS
  8. 8. 1stSELLIT
  9. 9. PREPARE – Quick Research – Value Proposition – Scope and Resources
  10. 10. FUNDING – Dedicated Budget – Product Team Rotation – Licencing
  11. 11. Consistency Improved Quality Speed Benefits of a Design System
  12. 12. Design systems offer advantages, while restricting other parts of the current process. It’s a trade off
  13. 13. Design systems allow others to focus on generating value. Elevator Pitch
  14. 14. 2ndRESEARCH
  15. 15. Design systems need to know the reason they exist. What problem are we solving?
  16. 16. WHOARE OURUSERS? – Users – Product Teams
  17. 17. COMPONENTINVENTORY
  18. 18. THEGOAL – Create a shared vision – Define realistic scope – Decide on UX Principles – Name it
  19. 19. 3rdDESIGN
  20. 20. WETRADE PERFECTION FORSPEEDAND CONSISTENCY
  21. 21. NAMINGhelps with adoption
  22. 22. 4thBUILD
  23. 23. DRY
  24. 24. WET
  25. 25. BUTTON Variations – Primary – Secondary – Outline – Ghost Properties – Label – Sub-Label – Icon – Animated States – Default – Hover – Active – Disabled
  26. 26. 644 × 4 × 4
  27. 27. 804 × 4 × 5
  28. 28. 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
  29. 29. 3605 × 6 × 12
  30. 30. DRY+WET
  31. 31. DOCUMENTATION – Vision – UX Principles + Patterns – Components – Tokens – Change log – Contact page
  32. 32. eg. Storybook eg. zeroheight
  33. 33. 5thMAINTAIN
  34. 34. EVERYTHINGis a public API
  35. 35. 1.4.2 Major.Minor.Bugfix Semantic Versioning
  36. 36. SCALINGhow to build rigid and stay flexible
  37. 37. WRAPUP
  38. 38. LINKS+ARTICLES tsc.li/followup KEEPINCONTACT @tim_schoch in/schochtim ICONS icofont.com simpleicons.org PICTURES Me 

×