Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Atomic design

156 views

Published on

The benefits and pitfalls of "Atomic Design"

Published in: Design
  • Be the first to comment

  • Be the first to like this

Atomic design

  1. 1. Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. Atomic Design Digital Experience Design & Strategy Workshop #6 February 4, 2016
  2. 2. 2 2 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 2 Atomic Design …all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe. Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.
  3. 3. 3 3 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 3 A Periodic Table
  4. 4. 4 4 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 4 The Elements of Atomic Design
  5. 5. 5 5 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 5 The Atom Typically, an “atom” has no intrinsic meaning or value by itself; it requires other atoms to become an interaction
  6. 6. 6 6 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 6 The Molecule DealersA molecule combines atoms into a single interaction; often functional, but generally devoid of context
  7. 7. 7 7 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 7 The Organism An organism combines interactions in such a way as to provide choice, and thereby meaning
  8. 8. 8 8 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 8 The Template A template is a digital ecosystem in which organisms co-exist; sometimes supporting each other, sometimes competing for resources Header Hero Spot Featured Items Find a Dealer Models Design Your Own Heritage Sign Up for Emails Footer
  9. 9. 9 9 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 9 The Page A page is simply a specific instance of a template, with all abstraction replaced by specific content
  10. 10. 10 10 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 10 An Atomic Strategy to Design
  11. 11. 11 11 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 11 Designing from the inside out
  12. 12. 12 12 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 12 The Influence factor Page Template Organism Molecule Atom
  13. 13. 13 13 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 13 Reading your blocks
  14. 14. 14 14 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 14 Establish the constraints that define your “design opportunity”
  15. 15. 15 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. In Summary…
  16. 16. 16 16 Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved. 16 Thank you.

×