Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Atomic design & PatternLab

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

Atomic design & PatternLab

Web Not Bombs: Frontend #5 (Minsk);
WildCardConf'15 (Riga);

Avatar for Max Kovalev

Max Kovalev

December 05, 2014

More Decks by Max Kovalev

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

Other Decks in Design

See All in Design
Webデザイナー中田美穂_ポートフォリオ
Avatar for miho nakada omy
0
130
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
3
2.7k
RawrXD: The Sword
Avatar for Sean Natarajan seanvraj_arts
0
120
東京都市大学 都市生活学部×一般社団法人オープン企画イベント　「誰もがデザイナーである」とはどういうことか？ 【エツィオ・マンズィーニ氏 特別来日・基調講演】
Avatar for Kimura Atsunobu a2k
1
110
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
Avatar for keita keita_yoshikawa
0
100
Starfall (2025)
Avatar for Rachel Poon rezaline
0
120
PAMPHLET.pdf
Avatar for M-HAND,Inc. mhand01
0
1.8k
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
Avatar for Ayumi Suzuki ayumidesign
0
230
インターンから2年 新卒フロントエンドエンジニアから見た サイボウズのアクセシビリティ
Avatar for tak taku10101
0
160
1000人規模の組織でデザインハーネスを導入するための第一歩
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
5
4k
開発・制作におけるUI・UXデザインの重要性について～UI・UXデザインってなんだろう～
Avatar for yomogi_sakura yamasaku
0
230
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
300

Featured

See All Featured
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
250
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
390
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
440
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
330
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
500
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.1k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.6k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
520
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.7k

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