Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From Purpose to Patterns

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.

Alla Kholmatova

June 16, 2018

More Decks by Alla Kholmatova

Other Decks in Design


  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

  4. None
  5. Visual and tactile. — Trello

  6. None
  7. None
  8. None
  9. Design for humans. — Citymapper

  10. None
  11. Can you point to examples that demonstrate this principle? Test

  12. have a point of view #2 Good principles

  13. Simple. Useful. Enjoyable.

  14. None
  15. Direction over choice. — Medium

  16. None
  17. None
  18. None
  19. Be timeless, not cutting edge. — TED

  20. None
  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

  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
  32. None
  33. Bold Optimistic Practical, with a wink

  34. memorable #4 Good principles are

  35. None
  36. Grandma first — Wonderbly

  37. None
  38. This is for everyone — Government Digital Service

  39. Ideal number

  40. Will your team be able to remember these principles? Test

  41. None
  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

  45. Defining your principles

  46. Purpose informs principles

  47. Purpose and values Principles Design patterns

  48. None
  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

  55. None
  56. • not more than 3-5 • work together as a

    set • opposite mustn’t be negative • practical examples
  57. None
  58. Simple over flexible

  59. None
  60. Robust over subtle

  61. None
  62. None
  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.
  65. None
  66. None
  67. None
  68. Test and evolve

  69. None
  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 “
  71. None
  72. None
  73. None
  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