Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Atomic Design. Eh?
Search
Roger Dudler
May 16, 2015
Design
8
4.4k
Atomic Design. Eh?
A modular design and front-end approach for the masses?
Try Frontify on
https://frontify.com
Roger Dudler
May 16, 2015
Tweet
Share
More Decks by Roger Dudler
See All by Roger Dudler
Build Pattern Libraries - A step-by-step guide
rogerdudler
2
420
Building the Web in 2018
rogerdudler
7
9.3k
9 Sideproject Success Factors & Quick Wins
rogerdudler
1
8.9k
Bridging the Gap between Design and Development
rogerdudler
15
12k
Other Decks in Design
See All in Design
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
130
UXデザインはなぜ定着しないのか?
designstudiopartners
0
740
PF_濵村ひろみ_202503
maru_design78
0
180
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
170
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
710
#Dubois Challenge 2025: Economics
ajstarks
0
130
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
210
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
470
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
Kid Cowboy 103
marilutwin
0
270
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Making Projects Easy
brettharned
116
6.3k
Thoughts on Productivity
jonyablonski
69
4.7k
Balancing Empowerment & Direction
lara
1
430
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Transcript
Atomic Design Eh? A modular design and front-end approach for
the masses?
What is it about? Modular Design Best Practice or a
way to optimise your workflow, maintainability and quality in design and front-end.
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.
Atomic Design Overview Atom Molecule Organism Template Page The atomic
design concept introduces the following terms
Atomic Design Overview Atom Molecule Organism Template Page Containers Building
Blocks You can group them into the building blocks and containers
Brad. Frost. Who? The guy who “invented” atomic design
Atom The “smallest” reusable thing Examples are Buttons, Input Fields,
Headings, etc.
Molecule The “bigger” reusable thing built with the “smallest” things
Examples are Search Box, Card Listing, Button Group, etc.
Organism A “biggest” thing built with the “smallest” and “bigger”
things Examples are Headers, Footers, Flight Search, etc.
Template A container with rooms for all the things Examples
are Home Layout, Blog Layout, etc.
Page A container filled with all the things Examples are
Home Page, Blog Page, etc.
Pattern Libraries Atom Molecule Organism Template Page Building UI or
pattern libraries is easier with a system like Atomic Design.
Pattern Libraries Atom Molecule Organism Template Page Start by adding
atoms to your pattern library
Pattern Libraries Atom Molecule Organism Template Page Extend it by
adding molecules
Pattern Libraries Atom Molecule Organism Template Page And if you
strive for a complete library, add organisms as well
So, this is it now, right? Atom Molecule Organism Template
Page
Not Quite Not everyone understands geek language or science ;)
Reality Atom? Molecule? Organism? WTF?
Alternatives S M L Layout Page Element Component Module Page
Plan Page
How to design? Atom Molecule Organism Template Page
How to design? Atom Molecule Organism Template Page What customers
like What developers like
Example
Tools PatternLab Frontify
Think in Systems and you’ll become a better designer or
developer - maybe :)
Visit us on www.frontify.com Thanks. Follow me on Twitter @rogerdudler