Design Systems, Beyond Components: Spacing, Measurement & More
0 likes170 views
The document outlines Virtru's design system and its components, emphasizing the importance of effective spacing, typography, and content in enhancing user experience. It discusses the process of creating, updating, and measuring the success of design systems while addressing governance and extensibility. Moreover, it highlights collaboration tools and methods for ensuring consistent design implementation across teams.
Design Systems, Beyond Components: Spacing, Measurement & More
- 1. Copyright 2019 Virtru Corporation Beyond Components: Spacing, Measurement & More Jim Lane UX Advisor @ Virtru jlane@virtru.com @JimLaneNoVA /in/jimlane
- 2. Copyright 2019 Virtru Corporation Virtru Email Protection - Gmail (browser extension) - Outlook (native app) - iOS & Android (native app) Google Drive Encryption (browser extension) Secure Reader (web app) Administrative Dashboard (web app) … and more Image (up to 480px X 540px) Design & Product at Virtru 2 We help more than 5,000 organizations worldwide protect data wherever it’s created or shared so they can collaborate with confidence.
- 3. Copyright 2019 Virtru Corporation 3 + + = Virtuoso Design System ^ Tip: Synchronize updates via Slack SKETCH ABSTRACT STORYBOOK
- 4. Copyright 2019 Virtru Corporation Atoms No interactions Organisms > 1 interaction Molecules Only 1 interaction A OM 4 Terminology Grounded in Interactions Color Shape Typography Icons Buttons Fields Checkboxes Radio Headers Footers Navigation Forms
- 5. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation Spacing 5 Designing the Invisible: Spacing in Design Systems Art Klepchukov
- 6. Copyright 2019 Virtru Corporation Space affects every interface: - Margins - Paddings - Borders & radii - Shadow depths - Gutters - Default widths & heights But often chosen ad-hoc for any given interface Image (up to 480px X 540px) Applying a spacing scale 6
- 7. Copyright 2019 Virtru Corporation Image (up to 480px X 540px) Conscious spacing Geometric Progression: 24px base 7
- 8. Copyright 2019 Virtru Corporation | PRIVATE & CONFIDENTIAL default spacer = default line height establishes vertical rhythm Tip: Change Sketch nudging so it fits your spacing scale. 8
- 9. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation Content 9
- 10. Copyright 2019 Virtru Corporation Typography Capitalization 10 Content is the Foundation of an Experience
- 11. Copyright 2019 Virtru Corporation Typography Capitalization Content Patterns Editorial Style Guidelines Brand, Voice & Tone Product Lexicon Design System Documentation Information Architecture 11 Content is the Foundation of an Experience
- 12. Copyright 2019 Virtru Corporation 12 Creating a Copy System Along with Your Design System Bobby Wood https://uxdesign.cc/creating-a-copy-system-along-with-your-design-system-58afd89c3c12
- 13. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation Extensibility 13
- 14. Copyright 2019 Virtru Corporation 14
- 15. Copyright 2019 Virtru Corporation 15 White-labeling; Internationalization; Verticalization; Accessibility & Inclusion
- 16. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation Governance 16
- 17. Copyright 2019 Virtru Corporation 17 Governance: Managing a Design System ● Create new component locally ● Review with team ● Update in Virtuoso ● Notify design team; dedicated Slack channel ● Verify design implementation ● Notify engineering ● Review engineering implementation
- 18. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation Measurement 18
- 19. Copyright 2019 Virtru Corporation “You don’t succeed when you launch a living style guide or release a code kit.” 19 Measuring Design System Success Nathan Curtis https://medium.com/eightshapes-llc/measuring-design-system-success-d0513a93dd96
- 20. Copyright 2019 Virtru Corporation Consistency 20 What are we trying to accomplish? What are our OKRs? Adoption, Commitment, Recency Measuring Design System Success Nathan Curtis https://medium.com/eightshapes-llc/measuring-design-system-success-d0513a93dd96 Speed of delivery Cross-team alignment Capacity, Velocity, Sponsorship Participation, Commits, Employee Satisfaction
- 21. Copyright 2019 Virtru Corporation | PRIVATE & CONFIDENTIAL 21 Measuring the Impact of a Design System Cristiano Rastelli https://medium.com/@didoo/measuring-the-impact-of-a-design-system-7f925af090f7
- 22. Copyright 2019 Virtru Corporation Questions? Thank you! Jim Lane UX Advisor @ Virtru jlane@virtru.com @JimLaneNoVA /in/jimlane