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

Atomic design & PatternLab

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Max Kovalev Max Kovalev
December 05, 2014
Design
1
190

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
210

Other Decks in Design

See All in Design
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
1.1k
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
2
730
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
590
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.5k
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
480
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
130
コンテンツ作成者の体験を設計する
Avatar for Chiaki Okamoto chiilog
0
130
富山デザイン勉強会_デザイントレンド2026.pdf
Avatar for keita keita_yoshikawa
3
150
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
280
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
180
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
3
670
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
3
200

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
93
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
320
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
86
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
5.8k

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