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.3k
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
410
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
実務のための マイクロ インタラクション入門
shingo2000
0
360
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
170
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
520
他人事じゃないWebアクセシビリティ入門
arihiro17
0
210
Designship 2023|想いを可視化するデザインの力
weddingpark
0
240
MiKS inc. Company PR en_202404
zakkerooni
0
170
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
860
リリース1ヶ月後で機能をなくした話
hinofu
1
700
Wolf and the seven goatkids
_limex_
PRO
0
450
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
Designing UIs without a UI designer
strongeron
0
120
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
What's new in Ruby 2.0
geeforr
337
31k
Designing for Performance
lara
601
67k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
The Language of Interfaces
destraynor
151
23k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Adopting Sorbet at Scale
ufuk
68
8.6k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
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