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
200
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
120
Usability через тестирование
Avatar for Max Kovalev maxkovalev
1
220

Other Decks in Design

See All in Design
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
440
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.6k
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
270
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
180
The Art of Messy the Maid
Avatar for Marz Starz marzstarz
0
120
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
1.3k
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
1
6.8k
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
200
CULTURE DECK／Marketing Director
Avatar for M-HAND,Inc. mhand01
0
1.4k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
4
1.2k
全員がアウトプットを出せる時代、 誰を採用する?
Avatar for NishaMe nishame
0
610
社長の宿題への回答 「新卒×AI」が生み出す価値
Avatar for さき saki822
2
180

Featured

See All Featured
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
240
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
170
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
240
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
350
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
390
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
230
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
810
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.8k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
450
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2k

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