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 & PatternLab
Search
Max Kovalev
December 05, 2014
Design
1
180
Atomic design & PatternLab
Web Not Bombs: Frontend #5 (Minsk);
WildCardConf'15 (Riga);
Max Kovalev
December 05, 2014
Tweet
Share
More Decks by Max Kovalev
See All by Max Kovalev
SMACSS
maxkovalev
3
110
Usability через тестирование
maxkovalev
1
200
Other Decks in Design
See All in Design
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
900
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
400
freee + Product Design FY25Q4
freee
4
15k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
360
信念を持つ方法
magi1125
0
170
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
210
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
330
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
800
数理的アプローチで挑むスマホ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
700
AI時代に淘汰されないデザインのしごと
akinen
1
170
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
500
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
630
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
A better future with KSS
kneath
238
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Raft: Consensus for Rubyists
vanstee
140
7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Producing Creativity
orderedlist
PRO
346
40k
GitHub's CSS Performance
jonrohan
1031
460k
KATA
mclloyd
31
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Transcript
Атомарный дизайн и Patternlab Max Kovalev, EPAM Systems
None
None
Интерфейсы
getbootstrap.com
None
foundation.zurb.com
Типичные проблемы • Много лишнего или чего-то не хватает •
Следование код-стилю, наименованиям, структуре • Несовместимость с текущей версией проекта • Проблема с коллаборацией • Понимают только разработчики • ... 8
Style Guides / Pattern Libraries
google.com/design/spec/material-design
pea.rs
starbucks.com/static/reference/styleguide/
13
Плюсы • multi-device Web • Сокращение времени разработки • Удобное
тестирование UI • Один "язык" • Простая поддержка в будущем 14
А что клиент? • Время на создание • Рассматривается как
дополнительный проект • Не полные кейсы • ... 15
sourcejs.com
We’re not designing pages, we’re designing systems of components Stephen
Hay “
Atomic web design
Brad Frost
None
Атом label input button color font
Молекула navigation forms text social messages
Организм header footer article comments latest posts
None
None
None
Особенности • Mustache • JSON • Apache* • PHP 5.3.6+
27
Создание проекта git clone * php core/builder.php -g php core/builder.php
-w, -wr, -gc, ... * https://github.com/pattern-lab/patternlab-php.git 01. 02. 03. 28
Создание проекта (with node) git clone * npm install npm
install -g grunt-cli grunt serve * https://github.com/pattern-lab/patternlab-node.git 01. 02. 03. 04. 29
Структура • source/ • _data/ • _patterns/ • css/ •
fonts/ • images/ • js/ 30
Структура • .. /_patterns/ • atoms/ • molecules/ • organisms/
• teplates/ • pages/ 31
Структура • .. /atoms/ • meta/ • head.mustache • footer.mustache
32
Паттерны
None
None
None
None
None
None
Особенности • Watcher, auto-reload • In-browser responsive tool • Page
Follow • Keyboard Shortcuts • ... 40
demo.patternlab.io
Почитать • Сборник ресурсов - styleguides.io • Книга "Atomic Design"
- atomicdesign.bradfrost.com • Improving Code Readability With CSS Styleguides - smashingmagazine • Designing Products That Scale - medium.com/@bradhaynes • Design Systems: Building for the Future - css-tricks.com 42
Спасибо • @maxkovalev_ • fb.me/kovalev.max • speakerdeck.com/maxkovalev 43