Атомарный дизайн — это методология создания систем дизайна, основанная на разделении интерфейса на структурированные элементы. Есть пять отчётливых уровней, но мы используем более упрощенную структуру из трех:

• Атомы

• Молекулы

• Огранизмы

В контексте веб-интерфейсов атомы — это самые мелкие элементы, такие как поля ввода, кнопки или иконки.

Молекулы — это комбинация атомов между собой, наши строительные блоки, которые можно соединять для создания организмов. Они имеют собственные свойства и играют роль скелета нашей системы дизайна. Например, отдельные поле ввода и кнопка могут быть не так полезны сами по себе, но объединив их, мы получаем функциональный блок, который можно использовать для взаимодействия с пользователем.

Организмы — это сочетания молекул, которые формируют более крупные, самостоятельные разделы интерфейса. Эти элементы включают сложные комбинации, например, навигационные панели, карточки продуктов или контактные формы.