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

Atomic design & PatternLab

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
8
9.9k
hicard_credential_202601
Avatar for hicard hicard
0
200
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
320
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
140
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
2
660
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
0
130
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
160
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
1.1k
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
280
2026_01_07_３DプリントはじめましたLT.pdf
Avatar for HideakiTakechi hideakitakechi
0
140
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1.1k
Treasure_Hunting
Avatar for Sol Metts solmetts
0
320

Featured

See All Featured
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
410
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
400
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.4k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
64
54k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
87
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k

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