Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modular design at work

Alla Kholmatova
September 14, 2015

Modular design at work

As many of us move away from designing pages toward designing systems, one concept keeps coming up: modularity. The benefits of a modular approach are well covered, but what about the risks and the logistics of implementing it?

Modularity might appear to be a simple concept at first, but making it work for your team requires significant effort and commitment. In this session Alla will look at how modular design affects both our teams and our users, as well as the products we create. She’ll share some of the challenges her team’s gone through while transitioning their design process toward modularity, and the lessons they’ve learned on the way.

Presented at SmashingConf Freiburg.

Alla Kholmatova

September 14, 2015

More Decks by Alla Kholmatova

Other Decks in Design


  1. Alla Kholmatova @craftui

  2. We’re not designing pages, we’re designing systems of components. Stephen

    Hay, Responsive Design Workflow “ Modularity matters now more than ever. Brad Frost, Atomic Design “
  3. They are just like LEGO! “ ”

  4. None
  5. None
  6. None
  7. Language Process Experience

  8. Language

  9. None
  10. Controlled vocabularies

  11. None
  12. By naming objects we bring them into existence… we draw

    them out from nothingness. James Britton, Language & Learning “
  13. “Course poster”

  14. “Discussion”

  15. “Billboard” “Billboard”

  16. “Billboard”

  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. Establish a shared language foundation by building a pattern library

    as a team.
  25. Name elements collaboratively, based on their agreed high level function.

  26. Make your design language part of the everyday conversations, to

    keep it alive and evolving.
  27. Process

  28. None
  29. None
  30. 1. Sketches of key environments 2. Library of core objects

    3. New environments
  31. 1. Sketches of key environments 2. Library of core objects

    3. New environments
  32. None
  33. None
  34. None
  35. None
  36. None
  37. Creating new modules

  38. Image credit: littleBits http://littlebits.cc/

  39. Welcome area kit

  40. None
  41. Start with the big picture. Define patterns. Then use those

    patterns as foundation for modular pages.
  42. Set up your pattern library as an environment where UI

    decisions are made, not just documented.
  43. Involve people from different interests to design and test new

    modular kits.
  44. Image credit: littleBits http://littlebits.cc/

  45. Experience

  46. When pieces are so easy to re-arrange, how do you

    achieve balance and tell a coherent story?
  47. “Design standards master”?

  48. Atomic design and chemistry?

  49. Image credit: Makelight http://www.makelight.io/

  50. Image credit: Makelight http://www.makelight.io/

  51. Image credit: Makelight http://www.makelight.io/

  52. 28 story segments 3 helper story segments 1 bridge story

    segment Intro Outro Cover
  53. Intros Outros Standard segments Heroes Bridges Helpers

  54. What if you need to break the rules?

  55. None
  56. None
  57. Integrated Modular Flexibility for exceptions Few shared components No need

    to reconfigure Low flexibility for exceptions Many shared components Need to reconfigure
  58. Image credit: OFIS architects

  59. Image credit: OFIS architects

  60. Image credit: “The Box” by Sibyl Kramer

  61. Course emails

  62. None
  63. None
  64. None
  65. None
  66. None
  67. Identify simple rules for classifying elements based on their role

    in the overall design.
  68. Determine the degree of modularity based on your product’s unique

  69. Focus not only on the technical efficiency, but the effect

    modularity will have on your users’ experience.
  70. None
  71. Alla Kholmatova @craftui