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
430
Building the Web in 2018
rogerdudler
7
9.4k
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
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
560
minpaku-community-scrum-patterns
norinity1103
1
430
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
190
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
160
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
430
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
420
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
840
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
440
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
240
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
260
harutaka Vision Deck
zenkigenforrecruit
0
230
7 Core Values of Round-L
wired888
0
2.1k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Music & Morning Musume
bryan
46
6.8k
Unsuck your backbone
ammeep
671
58k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Facilitating Awesome Meetings
lara
56
6.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Language of Interfaces
destraynor
162
25k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Being A Developer After 40
akosma
91
590k
Rails Girls Zürich Keynote
gr2m
95
14k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
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