Атомарный дизайн
"Мы не проектируем страницы, мы проектируем системы компонент." — Stephen Hay
Атомарный дизайн - это методология создания дизайн-систем.
При использовании атомарного дизайна, компоненты разбиваются на пять уровней:
- Атомы
- Молекулы
- Организмы
- Шаблоны
- Страницы/экраны
Атомы
Базовые неделимые "строительные блоки" интерфейса.
К атомам относятся:
- текстовые блоки (label)
- поля ввода
- кнопки
- чекбоксы
- радио-кнопки
- вкладки
- и т.д.
Иногда, к атомам могут быть причислены и более абстрактные элементы:
- цвета
- шрифты
- анимации
- сетки
Атомы создают единый общий стиль интерфейса.
Молекулы
Молекула - это комбинация двух и более атомов, связанных вместе.
Например: панель из нескольких вкладок, текстовый блок + поле ввода + кнопка (= поле ввода поискового запроса).
Молекулы составляют основной каркас дизайн-системы. Важно помнить, что основной смысл молекул - переиспользование их в дизайне. Поэтому, несмотря на их составную природу, нельзя чрезмерно усложнять их.
Организмы
Организм - комбинация из двух и более молекул, связанных вместе.
Организмы представляют собой обособленные относительно сложные блоки в интерфейсе.
Пример организмов: шапка сайта, тулбар, основная навигация для сайта.
Именно на этапе появления организмов начинается формирование конечного продукта.
Шаблоны
Шаблон - комбинация из двух и более организмов, связанных вместе.
Шаблоны формируют итоговые страницы/экраны интерфейса.
На этапе создания и применения шаблонов становится понятна общая картина того, как будет выглядеть и работать UI.
Шаблоны - очень конкретные элементы и зависят от контекста, в котором проектируется интерфейс.
Шаблоны являются базовыми компонентами для страниц и экранов.
Шаблоны могут разрабатываться без конкретики, в черно-белом варианте и без точной разметки.
Страницы / экраны
Страница - это конкретный экземпляр шаблона.
На странице абстрактный контент шаблона (заглушки, lorem ipsum) заменяется на настоящий контент.
При разработке страниц проверяется корректность и эффективность дизайн-системы и принятых дизайн-решений. Если что-то не работает, то можно изменить что-либо на предыдущих этапах.
Связанные понятия:
Источники: