Атомарный дизайн — это методология, разработанная веб-дизайнером Брэдом Фростом, которая предлагает процесс создания дизайна от мельчайших элементов до более крупных. Основная идея состоит в том, чтобы начинать дизайн с самых простых элементов (шрифты, цвета, кнопки) и затем объединять их в единое целое (страница с собранным контентом).
Именно Брэд Фрост вдохновился химией и предложил свой уникальный подход к созданию дизайна. Вместо того, чтобы разрабатывать дизайн из макетов страниц, он предлагает начать с самых маленьких компонентов, таких как кнопки, шрифты, инпуты и другие мелкие элементы. Эти элементы называются атомами, и их объединение создает молекулы, как, например, картинки с подписью/ссылкой или форма авторизации.
Все вещества, включая организмы, состоят из атомов, которые объединяются в молекулы. Последние комбинируются и образуют организмы. Аналогичным образом и интерфейсы. Также состоят из маленьких компонентов. Это означает, что мы можем разделить интерфейсы на основные блоки и сочетать их постепенно, увеличивая сложность.
Брэд Фрост об атомарном дизайне: «Это не линейный процесс, а скорее, ментальная модель, помогающая нам думать о наших пользовательских интерфейсах как о едином целом и в то же время о наборе частей».
Поговорим о каждом из компонентов атомарного дизайна.
Атомы
Атомы — это фундамент, основные элементы, на которых строится интерфейс: кнопки, иконки, изображения, шрифты, заголовки, система отступов, сетка, чекбоксы, поисковая строка.
Молекулы
Молекулы — это совокупность атомов. Это уже не просто детали интерфейса, а единый работающий механизм. Молекулы — это полноценные элементы ui-дизайна, с которыми мы можем в дальнейшем строить страницы.
Организмы
Организмы — это уже крупные части дизайна интерфейсов, сочетание атомов и молекул вместе. На этой стадии становится понятно, как будет выглядеть интерфейс. Например, это может быть header (шапка сайта), футер, карточка товара.
Шаблоны
Шаблоны — это несколько организмов, собранных в один дизайн. Это может быть прототип сайта. Например, мы берем заголовок 1 уровня, заголовок 2 уровня, header, добавляем текст, форму, футер. Все это и есть полноценный шаблон.
Страницы
Страницы — это заключительный этап создания сайта. Это готовые дизайн-макеты с реальным собранным контентом. На этом этапе дизайнеры могут протестировать интерфейс, чтобы убедиться в его эффективности и доступности для пользователей.
Получается, атомарный дизайн имеет следующую формулу:
Атомы > Молекулы > Организмы > Шаблоны > Страницы
Заключение
Атомарный дизайн — это методология создания дизайна при помощи определенной культуры работы от меньшего к большему, то бишь это расширенная дизайн-система. Однако часто атомарный дизайн путают с ui-китом. Но это не так. Атомарный дизайн — это продуманный процесс создания дизайна, а Ui-kit — это библиотека всех элементов для проектирования пользовательского интерфейса в виде отдельного макета. Это только часть методологии атомарного дизайна.
Подробнее о Ui-kit в нашей статье:
https://dsgners.ru/ui/2205-kak-sdelat-bazovyiy-ui-kit
Атомарный дизайн нужен для того, чтобы создать систему проектирования и на протяжении всей работы над проектом иметь возможность молниеносно вносить правки. На первых этапах создания атомарного дизайна потребуется приложить немало усилий и потратить большое количество времени, но в итоге это станет структурированной дизайн-системой.
А вам уже удавалось работать с атомарным дизайном? Пишите свой опыт в комментариях.
