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.

Transcript

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! “ ”
7. Language Process Experience
8. Language
10. Controlled vocabularies
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”
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
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
37. Creating new modules
38. Image credit: littleBits http://littlebits.cc/
39. Welcome area kit
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?
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
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 requirements.
69. Focus not only on the technical efficiency, but the effect modularity will have on your users’ experience.
71. Alla Kholmatova @craftui