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

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

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

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

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

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

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