Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Systems, the Full Story

52 views

Published on

Slides from my talk at the Design Leadership 2019 conference in Melbourne

Published in: Design
  • Be the first to comment

  • Be the first to like this

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 

×