The benefits and pitfalls of "Atomic Design"

1. Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.
Atomic Design
Digital Experience Design & Strategy
Workshop #6
February 4, 2016

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
Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.
3
A Periodic Table

4. 4 4
Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.
4
The Elements of
Atomic Design

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
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
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
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
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
Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.
10
An Atomic
Strategy to
Design

11. 11 11
Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.
11
Designing from
the inside out

12. 12 12
Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.
12
The Influence
factor
Page
Template
Organism
Molecule
Atom

13. 13 13
Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.
13
Reading your
blocks

14. 14 14
Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.
14
Establish the
constraints that
define your
“design
opportunity”

15. 15
Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.
In Summary…

16. 16 16
Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.Copyright©Epsilon2015EpsilonDataManagement,LLC.Allrightsreserved.
16
Thank you.