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
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
170
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.2k
UXデザインはなぜ定着しないのか?
designstudiopartners
0
740
The Spectacular Lies of Maps
axbom
PRO
0
110
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.7k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
150
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.9k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
380
Bulletproof Design System with TypeScript
takanorip
6
3.6k
PF_濵村ひろみ_202503
maru_design78
0
180
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How GitHub (no longer) Works
holman
314
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
Speed Design
sergeychernyshev
32
1k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Building Adaptive Systems
keathley
43
2.7k
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