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. Alla Kholmatova @craftui ATOMS, MODULES AND OTHER FANCY PARTICLES

  2. None
  3. http://bradfrost.com/blog/post/atomic-web-design/

  4. None
  5. None
  6. What is a system?

  7. None
  8. A system is an interconnected set of elements coherently organised

    in a way that achieves something. Donella Meadows, Thinking in Systems “
  9. A system is an interconnected set of elements coherently organised

    in a way that achieves something. Donella Meadows, Thinking in Systems “
  10. None
  11. A system is more than a collection of elements.

  12. None
  13. None
  14. Purpose Connections Elements

  15. Purpose Connections Elements

  16. None
  17. None
  18. Utility Quick scanning High density of information Multi tasking Informal

    learning Reflection Connecting with people Focusing on the subject
  19. None
  20. A design system is a set of coherent patterns that

    facilitate and encourage certain types of behaviour.
  21. Purpose Connections Elements Semantic Structural Visual Behavioural

  22. Semantic Structural Visual Behavioural Connections

  23. None
  24. Name things based on their global function – the function

    of a module in the context of the whole system, rather than a page.
  25. “Course poster” – ?

  26. “Discussion” – ?

  27. “Billboard” “Billboard”

  28. None
  29. Name things collaboratively and refer to them by their names.

  30. None
  31. None
  32. None
  33. Whisper box

  34. None
  35. Semantic Structural Visual Behavioural Connections

  36. http://bradfrost.com/blog/post/atomic-web-design/

  37. Molecules vs Organisms

  38. Molecule Organism

  39. Molecule Organism

  40. None
  41. None
  42. Standalones

  43. Helpers

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

    of a page. Molecules (Helpers) – supporting elements, typically part of other components.
  45. Does it really matter?

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

    shared and understood by the people who use it.
  47. Semantic Structural Visual Behavioural Connections

  48. None
  49. “The subatomic particles”

  50. None
  51. None
  52. Relationships between the visual patterns

  53. None
  54. None
  55. None
  56. None
  57. Spacious Typographic contrast: high Spacing: “spacious”

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

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

    Spacing: “regular” Compact Typographic contrast: low Spacing: “cosy”
  60. Spacious Regular Compact

  61. None
  62. Treat core brand patterns separately, don’t mix them with modules.

  63. Define not only the elements themselves but the relationships between

    them. Treat core brand patterns separately, don’t mix them with modules.
  64. Semantic Structural Visual Behavioural Connections

  65. None
  66. None
  67. Stylistic rule vs Design pattern

  68. None
  69. A building or a town is given its character, essentially,

    by those events which keep on happening there most often. Christopher Alexander “
  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
  71. Think of modules not as isolated entities but families joined

    by a shared purpose.
  72. How do you test a module?

  73. None
  74. None
  75. None
  76. Test if individual modules help to achieve the desired behaviour

    they were designed to achieve.
  77. A design system is not only about the elements –

    it’s the purpose and connections that hold it together.
  78. No system can exist in isolation.

  79. None
  80. None
  81. Evolving a design system is a gradual piecemeal process, not

    the result of a master design plan.
  82. THANK YOU Alla Kholmatova @craftui