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.

E8f68e199b61f63780758ca20d573b62?s=128

Alla Kholmatova

June 16, 2018
Tweet

Transcript

  1. 4.
  2. 6.
  3. 7.
  4. 8.
  5. 10.
  6. 14.
  7. 16.
  8. 17.
  9. 18.
  10. 20.
  11. 24.
  12. 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
  13. 32.
  14. 35.
  15. 37.
  16. 41.
  17. 43.
  18. 48.
  19. 49.

    Spread the ideas as far and as wide as possible

    Timeless, not cutting edge Conventional familiar patterns
  20. 55.
  21. 56.

    • not more than 3-5 • work together as a

    set • opposite mustn’t be negative • practical examples
  22. 57.
  23. 59.
  24. 61.
  25. 62.
  26. 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.
  27. 65.
  28. 66.
  29. 67.
  30. 69.
  31. 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 “
  32. 71.
  33. 72.
  34. 73.
  35. 74.

    • purpose informs principles • know who they are for

    • workshop to find shared themes • test and evolve Tips for defining your principles:
  36. 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