Atomic Design
Eh?
A modular design and front-end approach for the masses?
Slide 2
Slide 2 text
What is it about?
Modular Design
Best Practice
or a way to optimise your workflow, maintainability
and quality in design and front-end.
Slide 3
Slide 3 text
Why do we care?
Design and front-end carries a whole
lot of complexity these days.
We need best practices and a
common language for the team to
commit to and work with.
Slide 4
Slide 4 text
Atomic Design Overview
Atom Molecule Organism Template Page
The atomic design concept introduces the following terms
Slide 5
Slide 5 text
Atomic Design Overview
Atom Molecule Organism Template Page
Containers
Building Blocks
You can group them into the building blocks and containers
Slide 6
Slide 6 text
Brad. Frost.
Who?
The guy who “invented” atomic design
Slide 7
Slide 7 text
Atom
The “smallest” reusable thing
Examples are Buttons, Input Fields, Headings, etc.
Slide 8
Slide 8 text
Molecule
The “bigger” reusable thing built with the “smallest” things
Examples are Search Box, Card Listing, Button Group, etc.
Slide 9
Slide 9 text
Organism
A “biggest” thing built with the “smallest” and “bigger” things
Examples are Headers, Footers, Flight Search, etc.
Slide 10
Slide 10 text
Template
A container with rooms for all the things
Examples are Home Layout, Blog Layout, etc.
Slide 11
Slide 11 text
Page
A container filled with all the things
Examples are Home Page, Blog Page, etc.
Slide 12
Slide 12 text
Pattern Libraries
Atom Molecule Organism Template Page
Building UI or pattern libraries is easier with a system like Atomic Design.
Slide 13
Slide 13 text
Pattern Libraries
Atom Molecule Organism Template Page
Start by adding atoms to your pattern library
Slide 14
Slide 14 text
Pattern Libraries
Atom Molecule Organism Template Page
Extend it by adding molecules
Slide 15
Slide 15 text
Pattern Libraries
Atom Molecule Organism Template Page
And if you strive for a complete library, add organisms as well
Slide 16
Slide 16 text
So, this is it now, right?
Atom Molecule Organism Template Page
Slide 17
Slide 17 text
Not Quite
Not everyone understands geek language
or science ;)
Slide 18
Slide 18 text
Reality
Atom?
Molecule?
Organism?
WTF?
Slide 19
Slide 19 text
Alternatives
S M L Layout Page
Element Component Module Page Plan Page
Slide 20
Slide 20 text
How to design?
Atom Molecule Organism Template Page
Slide 21
Slide 21 text
How to design?
Atom Molecule Organism Template Page
What customers like
What developers like
Slide 22
Slide 22 text
Example
Slide 23
Slide 23 text
Tools
PatternLab
Frontify
Slide 24
Slide 24 text
Think in Systems
and you’ll become a better designer or developer - maybe :)
Slide 25
Slide 25 text
Visit us on www.frontify.com
Thanks.
Follow me on Twitter @rogerdudler