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
事例で学ぶ！今日から使えるWebサービスUI改善ポイント
Avatar for NCDC ncdc
0
170
株式会社デイトラ様│コーポレートサイト│コンセプトシート
Avatar for Haruka_CAPEO haruka_capeo
0
2.2k
UXデザインはなぜ定着しないのか？
Avatar for Inside Design Studio designstudiopartners
0
740
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
0
110
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
210
Design Studio Deck | インクルーシブデザインスタジオCULUUM
Avatar for インクルーシブデザインスタジオCULUMU culumu
3
1.7k
組織で取り組むアクセシビリティのはじめ方
Avatar for cawpea masakiohsumi
0
150
1920*1080pxに設定したケース / Google Slide Size Test
Avatar for Arthur arthur1
0
2.9k
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
140
【最新】マズロー安達の弟子実績（1期-4期の26人分）
Avatar for マズロー安達 maslow_akkun
0
380
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.6k
PF_濵村ひろみ_202503
Avatar for 濱村ひろみ maru_design78
0
180

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.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