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
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
1
1.1k
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
440
Первая беседа о Карте реализации историй
ashapiro
0
270
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
300
Night Shift (beginning sequence)
cpineda57
0
870
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
170
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
130
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
200
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
490
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2k
Fleet Gas Station
joshtang
0
130
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
1
480
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.7k
Adopting Sorbet at Scale
ufuk
73
9k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Optimizing for Happiness
mojombo
376
69k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
The Pragmatic Product Professional
lauravandoore
31
6.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Designing the Hi-DPI Web
ddemaree
280
34k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
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