From Purpose to Patterns

At the heart of every well functioning design system are effective design principles. In this talk I share insights from my long-term research on what makes effective design principles, how to define them, and how principles translate into design patterns in practice.

Transcript

1. From purpose to patterns Alla Kholmatova @craftui
2. Teams with effective design systems are first teams with effective design principles.
3. genuine #1 Good principles are
5. Visual and tactile. — Trello
9. Design for humans. — Citymapper
11. Can you point to examples that demonstrate this principle? Test
12. have a point of view #2 Good principles
13. Simple. Useful. Enjoyable.
15. Direction over choice. — Medium
19. Be timeless, not cutting edge. — TED
21. Could an opposite principle work for another company? Test it
22. Relevant Irrelevant? Usable Unusable?
23. Timeless Cutting edge Direction Choice Bold Understated
24. 1 2 3 4
25. Souce: Tips from Lyft: Let Your Brand Drive Your UX Decisions
26. Actionable #3 Good principles are
27. Generic Specific Aspirations Rules “Universal” “One column layouts only”
28. Source: Experience Principles at Deliveroo by Jonny Burch
29. Source: Experience Principles at Deliveroo by Jonny Burch
30. Reduce concepts to increase confidence. — Windows UX
31. • Have you introduced a new concept? • Why? Is it necessary? • Can you get rid of unneeded concepts? • Does the UX continue the same concept? — Windows UX
33. Bold Optimistic Practical, with a wink
34. memorable #4 Good principles are
36. Grandma first — Wonderbly
38. This is for everyone — Government Digital Service
39. Ideal number
40. Will your team be able to remember these principles? Test it
42. Is it in TUNE? — Spotify
43. Source: How our new design principles have shaped the way we work at Domain by Jon Hollamby
44. • genuine • opinionated • actionable • memorable Good principles are
45. Defining your principles
46. Purpose informs principles
47. Purpose and values Principles Design patterns
49. Spread the ideas as far and as wide as possible Timeless, not cutting edge Conventional familiar patterns
50. Know who the principles are for
51. Source: Creating Etsy’s Design Principles by Magera Moon
52. Souce: Creating Etsy’s Design Principles by Magera Moon
53. Source: Creating Etsy’s Design Principles by Magera Moon
54. Principles kick off workshop
56. • not more than 3-5 • work together as a set • opposite mustn’t be negative • practical examples
58. Simple over flexible
60. Robust over subtle
63. Fun, not formal
64. Everything’s going swimmingly You're about halfway through your switch to Bulb. We thought we'd pop by to keep you in the loop. We'll take your first monthly payment of £71 on the 11th of May.
68. Test and evolve
70. When we design a new component, we want to make sure it addresses all four of those. Each piece should live up to it. Roy Stanfield, Principal Interaction Designer, Airbnb “
74. • purpose informs principles • know who they are for • workshop to find shared themes • test and evolve Tips for defining your principles:
75. Redesigning Pinterest, Block By Block Andreas Pihlström A Matter Of Principle Julie Zhuo Design Doesn’t Scale Stanley Wood 7 Steps to Creating Differentiated User Experiences Jonathan Lovatt-Young An open source collection of Design Principles Ben Brignell Creating Great Design Principles Jared M. Spool Principles To Build By Stephen Anderson Exclusive Design Vasilis van Gemert