Atomic design
1 like301 views
Atomic design is proposed as a communication tool in design and stakeholder meetings to establish a common language using a framework of atoms, molecules, organisms, templates and pages to describe user interface elements from smallest building blocks to full pages and sites, aiming to improve understanding between roles and facilitate collaboration. Examples are given of how atomic design could be applied in a workshop assigning product design work, highlighting benefits like a centralized knowledge base and clearer communication across teams. Frustrations between roles like UX designers and developers stemming from lack of shared understanding are used to motivate atomic design as a solution.
Atomic design
- 1. Atomic design as a communication tool in design and stakeholder meetings Clovis Six UX Researcher & Product Manager Internet Architects @clovissix #WUDAtomicCom Saskia Videler Content Strategist The Dutchess @saskiavideler
- 2. Clovis’ story • Full stack developer • Front end team lead • Visual designer • UX designer & researcher • Product manager • Sketch-noter • User experience researcher • Product manager Data governance software company (10 -> 160) Agency Before:
- 3. Saskia’s story • Content Process Streamlining • Content Style Guide • Content Guidelines • Content Workshops • Content Design • Content Architecture • Web Copywriting • Social Media Marketeer Content Strategy, est. 2011 Before:
- 4. Atomic design as a communication tool in design and stakeholder meetings
- 5. Ever had the feeling like nobody was visualising your ideas correctly?
- 6. Or that you have the greatest problem trying to visualise other people’s ideas? Countless review meetings, all taking an emotional toll and precious time, often sending you back to the drawing board.
- 7. Quotes What are your frustrations over the roles you need to work with?
- 8. Developer: ”They have great ideas that almost never work in real life.”
- 9. UX Designer: ”Developers don’t tend to work constructively with us.”
- 10. Project Manager: ”A lot of stakeholders fail to see the system as a whole.”
- 11. Product Manager: ”UX Designers don’t validate their work.”
- 12. Content Strategist: ”Communicating about technical aspects when you don’t have a technical background is hard, just as communicating about content is hard when you’re not a content person.”
- 13. Clovis: ”Sometimes it’s as if they’re all living on their island of expertise throwing shit at each other.”
- 14. Problemo numero uno? Communication • Lack thereof • Overuse • Misuse • Wrong tooling or too much tooling • No common/shared language
- 15. Atomic design as a communication tool in design and stakeholder meetings
- 16. Atomic design: how it works
- 17. Atoms Molecules Organisms Templates Pages Thanks to @brad_frost for the insight and nature for the wonderful example.
- 18. Atoms Molecules Organisms Templates Pages • Building blocks • Indivisible • Abstract • Less useful stand-alone • Great reference
- 20. `
- 21. Atoms Molecules Organisms Templates Pages • Group of atoms • Smallest compound • More specific • Does only one thing (and does it well) • Backbone of your system
- 23. Atoms Molecules Organisms Templates Pages • Groups of molecules bound together • Complex molecules • Distinct section • Similar or different molecules • Standalone, portable and reusable • Note: organisms can contain other organisms!
- 25. Atoms Molecules Organisms Templates Pages • Page-level • Groups of organisms • Begin their life as wireframe • Increase fidelity over time • Very concrete • Customer facing
- 27. Atoms Molecules Organisms Templates Pages • Highest fidelity • Real content • Entry-point for most stakeholders • Effectiveness system • Variation testing
- 29. • A way to describe your framework as the natural world would • Create a common cross-departmental design language • Communicate clearly • Complex systems are easier to maintain • Centralized knowledge • Accessible knowledge
- 30. • Ability to interface with the outside world much more efficient en easily (work with agencies or customers) • Product governance or ability to describe all design at any time, linked to business decisions, content decisions, dev decisions, etc • Build a system of ownership • Company culture decides what, how, when and why…
- 31. Assignm ent Sells customized dreams and items to appear inside them Assignment • Build a product page for their unicorns • Use their atomic design toolbox (Enveloppe) Cut, copy, write, draw, organize, invent and converge to 1 page. • Desktop & mobile • 1h, groups of 4 • Think about constraints, reasoning, greater whole, translation into the mobile realm, work needed, re-use, research etc. Glitter Inc.
- 32. • Define 5 elements • Key items to work out: • Look and feel • Behavior • Dependencies • Construction (atoms, molecules, …) • Business rules and reasons • Marketing, UX, dev research • Content • Responsiveness • Testing • Make up some of the information that would be useful to you to know for those elements, that otherwise you have to figure out.