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.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
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
840
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
740
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
470
株式会社Muture_ソーシャル推進事業
muture
PRO
0
130
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
110
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
420
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
610
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
160
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
550
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
120
7 Core Values of Round-L
wired888
0
1.4k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Writing Fast Ruby
sferik
628
62k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Faster Mobile Websites
deanohume
309
31k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The World Runs on Bad Software
bkeepers
PRO
70
11k
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