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
   

   View Slide

2. View Slide

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

   View Slide

4. View Slide

5. View Slide

6. What is a system?
   

   View Slide

7. View Slide

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

   View Slide

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

   View Slide

10. View Slide

11. A system is more than a
    collection of elements.
    

    View Slide

12. View Slide

13. View Slide

14. Purpose
    Connections
    Elements
    

    View Slide

15. Purpose
    Connections
    Elements
    

    View Slide

16. View Slide

17. View Slide

18. Utility
    Quick scanning
    High density of information
    Multi tasking
    Informal learning
    Reflection
    Connecting with people
    Focusing on the subject
    

    View Slide

19. View Slide

20. A design system is a set of
    coherent patterns that
    facilitate and encourage
    certain types of behaviour.
    

    View Slide

21. Purpose
    Connections
    Elements
    Semantic Structural Visual Behavioural
    

    View Slide

22. Semantic Structural Visual Behavioural
    Connections
    

    View Slide

23. View Slide

24. Name things based on their
    global function – the function of
    a module in the context of the
    whole system, rather than a page.
    

    View Slide

25. “Course poster” – ?
    

    View Slide

26. “Discussion” – ?
    

    View Slide

27. “Billboard”
    “Billboard”
    

    View Slide

28. View Slide

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

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. Whisper box
    

    View Slide

34. View Slide

35. Semantic Structural Visual Behavioural
    Connections
    

    View Slide

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

    View Slide

37. Molecules vs Organisms
    

    View Slide

38. Molecule
    Organism
    

    View Slide

39. Molecule
    Organism
    

    View Slide

40. View Slide

41. View Slide

42. Standalones
    

    View Slide

43. Helpers
    

    View Slide

44. Organisms (Standalones) – well
    defined and independent parts or
    sections of a page.
    Molecules (Helpers) – supporting
    elements, typically part of other
    components.
    

    View Slide

45. Does it really matter?
    

    View Slide

46. What matters is not the
    structure itself but that
    it’s shared and understood
    by the people who use it.
    

    View Slide

47. Semantic Structural Visual Behavioural
    Connections
    

    View Slide

48. View Slide

49. “The subatomic particles”
    

    View Slide

50. View Slide

51. View Slide

52. Relationships between
    the visual patterns
    

    View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. Spacious
    Typographic contrast: high
    Spacing: “spacious”
    

    View Slide

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

    View Slide

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

    View Slide

60. Spacious
    Regular
    Compact
    

    View Slide

61. View Slide

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

    View Slide

63. Define not only the elements
    themselves but the relationships
    between them.
    Treat core brand patterns
    separately, don’t mix them
    with modules.
    

    View Slide

64. Semantic Structural Visual Behavioural
    Connections
    

    View Slide

65. View Slide

66. View Slide

67. Stylistic rule
    vs
    Design pattern
    

    View Slide

68. View Slide

69. A building or a town is given its
    character, essentially, by those
    events which keep on happening
    there most often.
    Christopher Alexander
    “
    

    View Slide

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
    

    View Slide

71. Think of modules not as
    isolated entities but families
    joined by a shared purpose.
    

    View Slide

72. How do you test a module?
    

    View Slide

73. View Slide

74. View Slide

75. View Slide

76. Test if individual modules
    help to achieve the desired
    behaviour they were designed
    to achieve.
    

    View Slide

77. A design system is not only
    about the elements – it’s
    the purpose and connections
    that hold it together.
    

    View Slide

78. No system can exist
    in isolation.
    

    View Slide

79. View Slide

80. View Slide

81. Evolving a design system is
    a gradual piecemeal process,
    not the result of a master
    design plan.
    

    View Slide

82. THANK YOU
    Alla Kholmatova @craftui
    

    View Slide