Atoms, Modules and Other Fancy Particles - Part I

Atoms, Modules and Other Fancy Particles - Part I

As many of us move away from designing pages toward designing systems, one concept keeps coming up: modularity. Modular systems promise to be scalable, maintainable, and easier to work with – but what if the “system” we end up with doesn’t perform as well as we expect? What if the result is disappointing – an overly simplistic “patched together” design, that’s not nearly as scalable and adaptable as we’d hoped?

In this talk we’ll look at what it actually means to have a resistant design system and a shared pattern language in your team. We’ll talk through the steps to get there, as well as mistakes, stumbling blocks, and lessons learnt.

E8f68e199b61f63780758ca20d573b62?s=128

Alla Kholmatova

March 15, 2016
Tweet

Transcript

  1. 2.
  2. 4.
  3. 5.
  4. 7.
  5. 8.

    A system is an interconnected set of elements coherently organised

    in a way that achieves something. Donella Meadows, Thinking in Systems “
  6. 9.

    A system is an interconnected set of elements coherently organised

    in a way that achieves something. Donella Meadows, Thinking in Systems “
  7. 10.
  8. 12.
  9. 13.
  10. 16.
  11. 17.
  12. 18.

    Utility Quick scanning High density of information Multi tasking Informal

    learning Reflection Connecting with people Focusing on the subject
  13. 19.
  14. 20.

    A design system is a set of coherent patterns that

    facilitate and encourage certain types of behaviour.
  15. 23.
  16. 24.

    Name things based on their global function – the function

    of a module in the context of the whole system, rather than a page.
  17. 28.
  18. 30.
  19. 31.
  20. 32.
  21. 34.
  22. 40.
  23. 41.
  24. 43.
  25. 44.

    Organisms (Standalones) – well defined and independent parts or sections

    of a page. Molecules (Helpers) – supporting elements, typically part of other components.
  26. 46.

    What matters is not the structure itself but that it’s

    shared and understood by the people who use it.
  27. 48.
  28. 50.
  29. 51.
  30. 53.
  31. 54.
  32. 55.
  33. 56.
  34. 59.

    Spacious Typographic contrast: high Spacing: “spacious” Regular Typographic contrast: regular

    Spacing: “regular” Compact Typographic contrast: low Spacing: “cosy”
  35. 61.
  36. 63.

    Define not only the elements themselves but the relationships between

    them. Treat core brand patterns separately, don’t mix them with modules.
  37. 65.
  38. 66.
  39. 68.
  40. 69.

    A building or a town is given its character, essentially,

    by those events which keep on happening there most often. Christopher Alexander “
  41. 70.

    Learn and progress Discover new content Purchase SIGNPOST SPOTLIGHT BILLBOARD

    FOOTER PROMO RUN PROGRESS PROGRESS TOGGLE COMMENT BLOCK COURSE BLOCK STANDFIRST STANDFIRST WEEK PROGRESS CARD TESTIMONIAL
  42. 73.
  43. 74.
  44. 75.
  45. 77.

    A design system is not only about the elements –

    it’s the purpose and connections that hold it together.
  46. 79.
  47. 80.
  48. 81.