Purpose Before Action: Why you need a Design Language System
2 likes416 views
This document discusses the need for and benefits of a design language system. It outlines a process for developing a design language system that includes assembling a team, defining core values, conducting market research and user personas, developing style guides, pattern libraries, and components. It also discusses considerations for whether to build a system from scratch or adapt an existing one. The overall process aims to establish consistency while allowing flexibility, and emphasizes collaboration, iteration and usability testing.
Purpose Before Action: Why you need a Design Language System
- 1. Purpose Before Action: Why you need a Design Language System 1 Carrie Lloyd, Visual Design Lead, IBM Chris Reckling, Director of Design, IBM
- 2. Agenda 2 Why do you need a design language system? What is a design language system? The guide to the system Lessons Learned Q&A
- 3. Why do you need a design language system? 3
- 4. 2 Designers, Same Outcome Different Results 4 Reckling’s Law: Given the same outcome, no two designers will come up with the same design. 3 apps, 3 profiles
- 5. The Architect I’m going to use object oriented JavaScript and abstract everything into reusable components that only I know how to use! Two developers + Same design = Different code 5 Reckling’s Law: Given the same design, no two developers will implement it exactly the same way. The Shortcutter I’ll just take <someone else’s system> and use that to start with and try to implement the spec The Inventor I don’t care if this was done 500 times before, I know a better way to do it and I’m the one coding it!
- 6. 6 The Blank Canvas Problems you may encounter without a design system Group Name / DOC ID / Month XX, 2018 / © 2018 IBM Corporation Distributed teams Designing for desktop, mobile, browserMore than one designer on the team 6
- 7. Flexibility Benefits of a Design System (FYI: You are using a system whether you write it down or not!) 7 Efficiency AgilityConsistency
- 8. What is a design language system? 8
- 9. Style What does <the thing> look like? Colors Typography Grid Icons Writing What is a design language system? 9 Pattern Library What is <the thing>? Components Patterns Best Practices Usage Guidelines How do I use <the thing>? Context When to use it Why to use it Tools How is <the thing> implemented? CSS HTML Javascript React components Sketch Library
- 11. Some Examples 11
- 12. 12
- 17. Should I use someone else’s system? 17
- 18. Should I use someone else’s system? Considerations. 18 Do you need to fit into the ecosystem of apps? (iOS or Android, for example) Can you infuse your own brand values within someone else’s system? Do you have time to make a system from scratch? Do you have the skills on hand? Can you start with someone else’s and make it your own! (That’s what we did!)
- 20. What about native mobile apps? 20 Follow the OS guidelines first Use the native controls and styles as much as possible You decide font sizes, colors, screen layouts You decide icons (for the most part) You decide the user experience and interactions
- 22. Assemble Team Project Definition Tools to collaborate Mood Boards Develop Personas Market Research Define Core Values And user test along the way… Element Collages Code as you go Prioritize Patterns Document rationale Style Tiles Interface Inventory Process
- 23. Assemble your team ID FED ManagerVDUX UXR
- 24. Developers Who are the users of the design system? 24 Designers Customers & Partners User Researchers
- 26. Seamless The experience IS the product Human By people, for people 26 Thoughtful Delightful decision-making Measurable Assess success Evolving Restlessly reinvent
- 27. Get Inspired 27
- 28. Inspiration comes in many forms 28 Market trends - what’s hot, what’s not Competition - how will you be better Other sources - the world around you
- 30. 30 Spotify
- 31. 31 AirBnB
- 32. 32 Etsy
- 33. Mood boards 33
- 34. 34
- 35. 35
- 36. 36
- 37. 37 Conceptual ideas driven by mood boards Personal individualized, diverse expressive Playful bright, unabashed, human Dimensional spacious, luminous material Focused minimal, provides clarity Organic soft, atmospheric, natural Valuable quality, craftsmanship Cohesive (but not homogenous)
- 38. Know Yourself 38
- 39. Interface Inventory 39 Patterns you use today Helps prioritize new work (Skip this step if a new project)
- 40. 40
- 42. Style tiles 42
- 43. 43
- 44. 44
- 45. 45
- 46. 46
- 48. 48
- 49. 49
- 50. 50
- 51. 51
- 53. 53
- 54. 54
- 55. 55
- 56. 56
- 57. 57
- 58. Show me it! 58
- 62. Playbacks Lessons Learned 62 Agile Practice User Research Code
- 63. Q&A 63 Carrie Lloyd carrene@us.ibm.com Chris Reckling chris_reckling@us.ibm.com URL to public site goes here