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.

Transcript

1. Alla Kholmatova @craftui ATOMS, MODULES AND OTHER FANCY PARTICLES
3. http://bradfrost.com/blog/post/atomic-web-design/
6. What is a system?
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 “
11. A system is more than a collection of elements.
14. Purpose Connections Elements
15. Purpose Connections Elements
18. Utility Quick scanning High density of information Multi tasking Informal learning Reflection Connecting with people Focusing on the subject
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
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”
29. Name things collaboratively and refer to them by their names.
33. Whisper box
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
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
49. “The subatomic particles”
52. Relationships between the visual patterns
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
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
67. Stylistic rule vs Design pattern
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?
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.
81. Evolving a design system is a gradual piecemeal process, not the result of a master design plan.
82. THANK YOU Alla Kholmatova @craftui