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
UXとUIの違いを自分の言葉で表現する: UX DAYS TOKYO
mizunashi_mana
0
180
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
760
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
280
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.1k
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
200
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
Storyboard Honey
rocioparronrubio
0
290
今日から意識できるアクセシビリティ
fumiko
0
270
How to get a Tiger to Tulsa
mcduckyart
0
110
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
560
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
390
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.6k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
For a Future-Friendly Web
brad_frost
179
9.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Become a Pro
speakerdeck
PRO
29
5.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
How to Think Like a Performance Engineer
csswizardry
25
1.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