Словарь

Атомарный дизайн (Atomic design)

Методология в UI-дизайне, позволяющая наиболее оптимальным образом проектировать дизайн-систему. Концепция сформулирована разработчиком интерфейсов Брэдом Фростом под лозунгом «Создавайте системы, а не страницы». Иными словами, вместо того, чтобы проектировать, например, страницу интерфейса сразу целиком, логичнее собирать её по деталям. Из мельчайших элементов собирать более крупные и формировать таким образом модульные страницы и блоки, что при необходимости их будет легко изменить в любом месте и любом объёме, убрав или заменив нужный элемент.

Пример атомарного дизайна SimpleOne
Пример атомарного дизайна SimpleOne

Пять последовательных этапов атомарного дизайна

Атомы (Atoms)

Базовые кирпичики (HTML-элементы), из которых состоит интерфейс. Их невозможно разбить на более мелкие элементы без потери функционального значения. Сюда входят кнопки, цвета, иконки, строки ввода, цветовые палитры, анимация. Как и в природе, атомы интерфейса не могут существовать сами по себе и обретают смысл только в тех или иных сочетаниях друг с другом. Служат библиотекой шаблонов.

Отдельные атомы: лейбл, строка ввода, кнопка
Отдельные атомы: лейбл, строка ввода, кнопка (источник)

Молекулы (Molecules)

Простейшие группы атомов, функционирующие вместе как единый смысловой юнит. Такой юнит можно целиком вставлять, перемещать и копировать в тех местах интерфейса, в которых необходима функция данного юнита. Служат основой дизайн-систем, так как предназначены для многократного применения в едином интерфейсе. Молекулы образуют полноценные строительные блоки для работы. Из них можно построить организмы.

Единая молекула: поиск
Единая молекула: поиск (источник)

Организмы (Organisms)

Более сложные группировки атомов и молекул, составляющие относительно сложные дискретные секции интерфейса. Могут состоять из одинаковых и/или разных типов молекул. Например, организм с титульных страниц сайта может состоять из множества различных компонентов: лого, системы навигации, формы поиска, блока ссылок на социальные сети. А организм товарной сетки будет состоять из одной многократно повторяющейся молекулы, содержащей, например, фото, название и цену товара. На данном этапе проектирование становится достаточно наглядным для формирования визуального стиля интерфейса, внесения правок и обсуждения с заказчиком.

Организм: меню сайта
Организм: меню сайта (источник)

Шаблоны (Templates)

Здесь аналогия с химической структурой веществ заканчивается, и начинается специфика UI-дизайна. Шаблоны состоят в основном из групп организмов, скомпонованных вместе для формирования пустых макетов страниц. Схематично иллюстрируют расположение организмов и контента на страницах интерфейса — их размер, формат и т. п. Помогают внести конкретику в работу с относительно абстрактными молекулами и организмами, структурируют их.

Шаблон страницы сайта
Шаблон страницы сайта (источник)

Страницы (Pages)

Конкретизированные экземпляры шаблонов. Страницы заполняются реальным контентом. На данном этапе наиболее явно показывается эффективность всей дизайн-системы. Конкретный вид страницы выявляет все ошибки на предыдущих этапах, а дизайн-система, сформированная по принципу атомарного дизайна, позволяет безболезненно, точечно и быстро их поправить на уровне атомов, молекул или организмов.

Пример страницы в атомарном дизайне
Пример страницы в атомарном дизайне (источник)
Пользуясь настоящим сайтом, вы даете свое согласие на использование файлов cookies