Atomic Design — это методология создания интерфейсов, которая помогает строить сложные системы из простых, повторно используемых компонентов. Её предложил в 2013 году Брэд Фрост, вдохновившись уроками химии. Он выделил пять уровней абстракции: атомы, молекулы, организмы, шаблоны и страницы.
Главная идея: интерфейс проектируют снизу вверх — от самых маленьких, неделимых элементов к целым экранам. Это не жёсткий линейный процесс, можно возвращаться на шаг назад, но конечная цель — создать согласованную, масштабируемую и легко поддерживаемую систему, где компоненты «говорят» друг с другом.
Атомарный дизайн особенно актуален сегодня, когда количество устройств и экранов растёт. Статичные макеты в фотошопе перестают быть эффективными — нужны системы, которые показывают, как интерфейс будет работать в реальной жизни на разных платформах.
Пять уровней атомарного дизайна
- Атомы (Atoms). Самые базовые строительные блоки интерфейса. Это HTML-элементы, которые нельзя разбить на части без потери смысла: кнопки, поля ввода (input), лейблы (label). Важно: цвета, типографика и отступы считаются не атомами, а их свойствами (иногда их называют «дизайн-токенами» или «субатомными частицами»). Атомы сами по себе не имеют функциональности, она появляется только в составе молекул.
- Молекулы (Molecules). Группы атомов, объединённые в простой функциональный компонент. Например, объединив лейбл, поле ввода и кнопку, можно получить молекулу «поисковая строка».
- Организмы (Organisms). Сложные составные блоки, собранные из молекул, атомов и, возможно, других организмов. Они представляют собой законченные части интерфейса, которые можно использовать многократно: хедер, карточка товара, меню навигации, форма регистрации.
- Шаблоны (Templates). На этом уровне отходят от химической аналогии и переходят к структуре страницы. Шаблон — это набор организмов, расположенных в определённом порядке, который задаёт макет. Здесь ещё нет реального контента, только плейсхолдеры (текст-рыба, заглушки). Шаблоны помогают согласовать структуру с командой и заказчиком.
- Страницы (Pages). Высший уровень детализации. Это те же шаблоны, но наполненные реальным контентом: текстами, изображениями, реальными данными. На страницах проверяют, насколько дизайн-система жизнеспособна, как ведут себя компоненты с разным количеством данных (например, пустая корзина vs корзина с пятью товарами) и собирают обратную связь от пользователей.
Зачем нужен атомарный дизайн?
- Согласованность (консистенция). Кнопки выглядят и ведут себя одинаково на всех экранах, потому что они используют одни и те же атомы и молекулы.
- Масштабируемость. Легко добавлять новые функции или целые разделы, не пересобирая всё с нуля — достаточно использовать готовые компоненты.
- Эффективность разработки. Дизайнеры и разработчики говорят на одном языке (атомы, молекулы), проще передавать компоненты в код, можно использовать компонентный подход во фреймворках (React, Vue).
- Упрощение прототипирования. Имея библиотеку готовых атомов и молекул, новые страницы собираются быстро, как из кубиков.
- Экономия времени и денег. Компоненты переиспользуются, не нужно рисовать и верстать одно и то же по многу раз.
Методология хорошо работает при создании дизайн-систем (таких как Material Design, Lightning Design System) и особенно полезна для сложных продуктов, где много экранов и долгая поддержка. Начать внедрять её можно даже в уже существующем проекте — постепенно выделяя атомы и пересобирая интерфейс. А если вы только начинаете проект, атомарный дизайн поможет заложить прочную основу, которая будет легко расти вместе с продуктом.