Атомарный дизайн (Atomic Design) — это методология проектирования веб-интерфейсов, придуманная американским разработчиком Брэдом Фростом (Brad Frost) в 2013 году. В ее основе лежит идея из школьного курса химии: любая сложная материя во Вселенной состоит из базовых, неделимых частиц (атомов), которые объединяются в более сложные структуры (молекулы), а те — в целые организмы.
Простыми словами: вместо того чтобы рисовать сразу готовую страницу (как картину на холсте), дизайнер сначала рисует мельчайшие строительные блоки (цвета, шрифты, иконки, простые кнопки). А затем из этих блоков, как из конструктора LEGO, собирает сложные элементы (меню, формы поиска, карточки товаров) и, наконец, целые страницы. В 2026 году Атомарный дизайн является фундаментом для построения всех корпоративных Дизайн-систем (Design Systems) в мире (от Apple Human Interface Guidelines до Google Material Design).
5 уровней Атомарного дизайна
Методология делит архитектуру любого интерфейса на пять строгих уровней усложнения:
Уровень 1: Атомы (Atoms)
Это базовые, неделимые элементы дизайна, которые не имеют смысла, если их разбить на более мелкие части.
Примеры:
кнопка (без текста), поле для ввода текста (input), текстовая метка (label), иконка, цвет (Design Token), шрифт. В HTML-коде атом — это одиночный тег, например
Вопросы и ответы
Атомарный дизайн (Atomic Design) — это методология проектирования веб-интерфейсов, придуманная американским разработчиком Брэдом Фростом (Brad Frost) в 2013 году. В ее основе лежит идея из школьного курса химии: любая сложная материя во Вселенной состоит из базовых, неделимых частиц (атомов), которы
В глоссарии термин отнесён к категориям: SEO.
Простыми словами: вместо того чтобы рисовать сразу готовую страницу (как картину на холсте), дизайнер сначала рисует мельчайшие строительные блоки (цвета, шрифты, иконки, простые кнопки). А затем из этих блоков, как из конструктора LEGO, собирает сложные элементы (меню, формы поиска, карточки товаров) и, наконец, целые страницы. В 2026 году Атомарный дизайн является фундаментом для построения всех корпоративных Дизайн-систем (Design Systems) в мире (от Apple Human Interface Guidelines до Google Material Design).
Методология делит архитектуру любого интерфейса на пять строгих уровней усложнения:
Консистентность (Единообразие) Если у вас в проекте 500 страниц, и вы решили изменить стиль кнопок (закруглить им углы), вам не нужно открывать 500 макетов. Вы меняете один Атом ("Кнопка").
Атомарный дизайн требует идеального порядка не только в файлах дизайнеров (Figma), но и на серверах разработчиков. Библиотеки компонентов (атомов и молекул) хранятся в репозиториях кода, откуда подтягиваются на боевые серверы сайта.