$30 off During Our Annual Pro Sale. View Details »

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.

Alla Kholmatova

March 15, 2016
Tweet

More Decks by Alla Kholmatova

Other Decks in Design

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