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
What is Atomic Design?
Search
endam
July 30, 2019
Technology
0
33
What is Atomic Design?
To easy to understand what is Atomic Design
endam
July 30, 2019
Tweet
Share
More Decks by endam
See All by endam
Web開発における開発環境構築の歴史と変遷〜原始時代から現代(Docker)まで〜
endam
0
140
レガシーなフレームワークで不本意ながらもとことん頑張ってみた
endam
0
370
Angular × Atomic Designでデザインリニューアルを行った話
endam
2
540
僕たちはサービスの多言語化にどう立ち向かうべきか
endam
4
1.2k
Postman
endam
0
400
Engineer's Mind
endam
1
110
Be the best development team
endam
0
78
Yarnの導入
endam
0
490
Web APIの現場あるある解決特集〜こうして僕たちのAPIは使いやすくなった〜
endam
0
480
Other Decks in Technology
See All in Technology
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2k
自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation
biwashi
9
2.1k
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
110
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
630
Oracle Cloud Infrastructure:2024年4月度サービス・アップデート
oracle4engineer
PRO
1
110
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
700
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
660
"好き"との生活/Regularly update profile with GitHub Actions
judeeeee
0
150
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
5.1k
Terraformあれやこれ/terraform-this-and-that
emiki
4
420
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
530
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Happy Clients
brianwarren
91
6.4k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Clear Off the Table
cherdarchuk
83
310k
Infographics Made Easy
chrislema
237
18k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
What's new in Ruby 2.0
geeforr
337
31k
Optimizing for Happiness
mojombo
370
69k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Transcript
UUUU Welcome to Atomic Design Masayuki Yoshida
Topics ๏ What is Atomic Design ? ๏ Why did
Goalous decide to adopt Atomic Design ? ๏ How does Goalous use Atomic Design? ๏ Pros and Cons of Atomic Design
What is Atomic Design ?
Atomic Design is… ๏a design methodology that create big components
by combining small components. ๏It is composed of five component layers
https://www.youtube.com/watch?v=q5CB1za0NfA Refer this movie to know the role of each
layer https://www.youtube.com/watch?v=q5CB1za0NfA
Component Layers of Atomic Design
What's the difference between traditional design method and Atomic Design?
Traditional Design as top-down and decompose from page Page U
Atomic Design Design as bottom-up and combine minimum unit parts
Page U
Atomic Design is similar to Lego Various designs can be
made depending on the combination
Why did Goalous decide to adopt Atomic Design ?
Let's go over the previous Goalous system…
There are a lot of the negative legacies of technology
continued to accumulate in frontend system… System is collapsed so much! We need to remake system for future ! Damasa
System was like this…..
We have design problems same as system ๏Bad information architecture
๏Difficult to use service, especially beginner ๏Not transmitted advantages for customers
Finally we decided to do Service Renewal !
Renewal Development Concept ๏ Respond to design changes flexibly and
quickly ๏ Robust (design collapse is unlikely to occur) ๏ Unify service design rules We decided to adopt Atomic Design
Atomic Design is widespread around the world. it has been
already adopted by some famous services even Japan
How does Goalous use Atomic Design?
Refer presentation slides that Hiroko Suzuki created
Pros and Cons of Atomic Design
Pros ๏ The UI parts dependency greatly reduced (Lower component
doesn’t depend on upper component) ๏ The collaboration of design and development became smooth among developer, designer and even product owner ๏ It’s easy to develop after get used to Atomic Design
Cons ๏It is difficult to design follow Atomic Design until
get used to it even senior designer ๏Sometimes worry about how to separate components and which layer the component is
Conclusion ๏It was good decision for Goalous to adopt Atomic
Design ๏But Atomic Design is not silver bullet
Thank you for listening