Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Atomic design & PatternLab

Avatar for Max Kovalev Max Kovalev
December 05, 2014
Design
1
180

Atomic design & PatternLab

Web Not Bombs: Frontend #5 (Minsk);
WildCardConf'15 (Riga);
Avatar for Max Kovalev

Max Kovalev

December 05, 2014
Tweet

More Decks by Max Kovalev

See All by Max Kovalev
SMACSS
Avatar for Max Kovalev maxkovalev
3
110
Usability через тестирование
Avatar for Max Kovalev maxkovalev
1
200

Other Decks in Design

See All in Design
セブンデックス カルチャーブック
Avatar for セブンデックス sevendex
1
14k
PF_濵村ひろみ_202503
Avatar for 濱村ひろみ maru_design78
0
160
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.4k
Haley's adventure chase
Avatar for Ivette Molina ivettetwin
0
180
株式会社デイトラ様│コーポレートサイト│コンセプトシート
Avatar for Haruka_CAPEO haruka_capeo
0
1.8k
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
Avatar for Yu Morita securecat
1
210
札幌の雪を観光資源に変える：デザインプログラムSESSAの挑戦
Avatar for Ittyanm ittyann
0
230
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
Avatar for r.aoki u_ri_ta
2
190
BPStudy#213〜ビジネスアナリシスとDDD（ドメイン駆動設計）パネルディスカッション資料 / BPStudy213-panel
Avatar for haru860 haru860
0
220
デザイナーとPMの両ロール_３つのポイント
Avatar for toy toy1618
1
300
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3k
RAKSUL_DESIGN_DECK_20250319
Avatar for RAKSUL raksulrecruiting
0
290

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
42
2.3k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
30
970
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
750
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
23
1.6k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k

Transcript

  1. Атомарный дизайн и Patternlab Max Kovalev, EPAM Systems

  2. None
  3. None

  4. Интерфейсы

  5. getbootstrap.com

  6. None

  7. foundation.zurb.com

  8. Типичные проблемы • Много лишнего или чего-то не хватает •

    Следование код-стилю, наименованиям, структуре • Несовместимость с текущей версией проекта • Проблема с коллаборацией • Понимают только разработчики • ... 8

  9. Style Guides / Pattern Libraries

  10. google.com/design/spec/material-design

  11. pea.rs

  12. starbucks.com/static/reference/styleguide/

  13. 13

  14. Плюсы • multi-device Web • Сокращение времени разработки • Удобное

    тестирование UI • Один "язык" • Простая поддержка в будущем 14

  15. А что клиент? • Время на создание • Рассматривается как

    дополнительный проект • Не полные кейсы • ... 15

  16. sourcejs.com

  17. We’re not designing pages, we’re designing systems of components Stephen

    Hay “

  18. Atomic web design

  19. Brad Frost

  20. None

  21. Атом label input button color font

  22. Молекула navigation forms text social messages

  23. Организм header footer article comments latest posts

  24. None
  25. None
  26. None

  27. Особенности • Mustache • JSON • Apache* • PHP 5.3.6+

    27

  28. Создание проекта 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

  29. Создание проекта (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

  30. Структура • source/ • _data/ • _patterns/ • css/ •

    fonts/ • images/ • js/ 30

  31. Структура • .. /_patterns/ • atoms/ • molecules/ • organisms/

    • teplates/ • pages/ 31

  32. Структура • .. /atoms/ • meta/ • head.mustache • footer.mustache

    32

  33. Паттерны

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None

  40. Особенности • Watcher, auto-reload • In-browser responsive tool • Page

    Follow • Keyboard Shortcuts • ... 40

  41. demo.patternlab.io

  42. Почитать • Сборник ресурсов - 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

  43. Спасибо • @maxkovalev_ • fb.me/kovalev.max • speakerdeck.com/maxkovalev 43