Атомарный дизайн и
Patternlab
Max Kovalev, EPAM Systems
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Интерфейсы
Slide 5
Slide 5 text
getbootstrap.com
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
foundation.zurb.com
Slide 8
Slide 8 text
Типичные проблемы
• Много лишнего или чего-то не хватает
• Следование код-стилю, наименованиям, структуре
• Несовместимость с текущей версией проекта
• Проблема с коллаборацией
• Понимают только разработчики
• ...
8
Slide 9
Slide 9 text
Style Guides / Pattern Libraries
Slide 10
Slide 10 text
google.com/design/spec/material-design
Slide 11
Slide 11 text
pea.rs
Slide 12
Slide 12 text
starbucks.com/static/reference/styleguide/
Slide 13
Slide 13 text
13
Slide 14
Slide 14 text
Плюсы
• multi-device Web
• Сокращение времени разработки
• Удобное тестирование UI
• Один "язык"
• Простая поддержка в будущем
14
Slide 15
Slide 15 text
А что клиент?
• Время на создание
• Рассматривается как дополнительный проект
• Не полные кейсы
• ...
15
Slide 16
Slide 16 text
sourcejs.com
Slide 17
Slide 17 text
We’re not designing pages, we’re designing systems of components
Stephen Hay
“
Почитать
• Сборник ресурсов - 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