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
170
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
100
Usability через тестирование
maxkovalev
1
200
Other Decks in Design
See All in Design
Ubie Vitalsの取り組み紹介
8845musign
0
140
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.3k
The Fight
euralisw
0
110
Web 組版の課題とその解法
yamatoiizuka
0
110
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
530
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
620
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
160
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
240
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
Goodpatch Tour💙 / We are hiring!
goodpatch
28
690k
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
330
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
331
56k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
How to Ace a Technical Interview
jacobian
272
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Statistics for Hackers
jakevdp
789
220k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Product Roadmaps are Hard
iamctodd
44
9.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