Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Atomic DesignDigital Experience Design & Strategy Workshop #6

February 4, 2016

2 2

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

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

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

3

A Periodic Table

4 4

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

4

The Elements of Atomic Design

5 5

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

5

The Atom

Typically, an “atom” has no intrinsic meaning or value by itself; it requires other atoms to become an interaction

6 6

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

6

The Molecule

DealersA molecule combines atoms into a single interaction; often functional, but generally devoid of context

7 7

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

7

The Organism

An organism combines interactions in such a way as to provide choice, and thereby meaning

8 8

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

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

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

9

The Page

A page is simply a specific instance of a template, with all abstraction replaced by specific content

10 10

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

10

An Atomic Strategy to Design

11 11

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

11

Designing from the inside out

12 12

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

12

The Influence factor

Page

Template

Organism

Molecule

Atom

13 13

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

13

Reading your blocks

14 14

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

14

Establish the constraints that define your “design opportunity”

15

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

In Summary…

16 16

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

Copyright ©

Epsilon 2015 E

psilon Data M

anagement, LLC

. All rights reserved.

16

Thank you.