Атомарный дизайн

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

Методологию атомарного дизайна разработал Брэд Фрост — веб-дизайнер, спикер и писатель. Он сравнил веб-дизайн с химией: природные вещества состоят из атомов, а интерфейсы — из элементов.

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

Строгой последовательности этапов не существует, иногда они проектируются параллельно друг с другом, чтобы в итоге получилась единая картина. Метод отлично подходит для объемных проектов, которые часто нуждаются в доработке.

Рассмотрим каждый этап подробнее.

Атомы

Атомы — основные элементы, на которых строится интерфейс: кнопки, checkbox, поисковая строка, иконки, изображения, шрифты, заголовки, формы для заполнения.

Сначала необходимо определить из каких деталей будет состоять макет страницы и разработать их дизайн.

Пример: элементы, которые будут использоваться на каждой странице.

Цель атомов: создать единый общий стиль интерфейса.

Молекулы

Молекулы — объединение атомов между собой. Например: поле ввода + кнопка +  иконка = готовая веб-форма. Теперь элементы не просто детали интерфейса, а единый работающий механизм.

Объединенные детали атомов:

Цель: запустить процесс функционирования элементов и сформировать главную линию веб-сайта.

Организмы

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

Цель: спроектировать готовые секции сайта, из которых он будет состоять.

Шаблоны

Шаблоны — соединение разделов страницы (организмов) друг с другом, благодаря чему получается готовый «скелет» или эскиз сайта. Выполняется без цветовой палитры. На этой же стадии устанавливаются характеристики элементов: размеры заголовков и иллюстраций, количество символов.

Цель: представить базовую структуру будущего интерфейса.

Страницы

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

Атомарный дизайн позволяет создать не просто функциональный интерфейс, но и полное проектирование системы.

Главные преимущества:

• Отвечает за единую концепцию сайта: стиль, цветовую палитру, набор шрифтов.
• Позволяет на любом этапе внести корректировки и вовремя отследить ошибки.
• Дает возможность использовать ранее созданные элементы несколько раз, изменив их дизайн на нужный.
• Функционирует с любыми языками программирования.
• Оптимизирует ресурсы. Вся новая информация о компонентах обязательно должна быть задокументирована, благодаря чему количество работы заметно сокращается и возникает меньше вопросов у сотрудников.
• Позволяет смешивать разные компоненты между собой и менять местами разделы сайта.

Атомарный дизайн может потребовать больше времени на разработку, но в конечном итоге это будет оправданным шагом.

Брэд Фрост об атомарном дизайне: «Это не линейный процесс, а скорее, ментальная модель, помогающая нам думать о наших пользовательских интерфейсах как о едином целом и в то же время о наборе частей».

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

Фундамент атомарного дизайна — библиотека паттернов:

• Содержит документ, где расписана единая концепция будущего интерфейса и размещены основные элементы.
• Ускоряет взаимодействие внутри команды, тем самым экономя время и финансовые затраты.
• Упрощает проверку доступности на всех устройствах и во всех браузерах.
• Дает возможность вносить изменения на любом этапе работы.

При создании библиотеки паттернов для своего проекта необходимо понимать, что сложнее всего поддерживать ее работоспособность в будущем. Если библиотека составлена некорректно, она принесет больше проблем, чем реальной пользы.

Благодаря 3-м фишкам атомарного дизайна этого можно избежать.

Комфорт и скорость

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

Согласованность элементов

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

Доступность

Чем проще библиотека паттернов, тем чаще к ней будут обращаться разработчики. Библиотека паттернов, которая построена из «атомарных» элементов, является самой удобной в использовании и простой в понимании.

Благодаря атомарному дизайну можно создать библиотеку паттернов для своего проекта по простым и четким шагам.

Для того, чтобы использовать систему атомарного проектирования на практике, Брэд Фрост с командой веб-разработчиков Дейвом Олсеном и Брайаном Муэнцмейером создали Pattern Lab.

Pattern Lab — один из инструментов для реализации атомарного дизайна и генератор статистических сайтов. Он помогает собрать все части дизайна в единую конструкцию.

Основные шаги при работе с Pattern Lab

Атомарный дизайн подходит не только для сайтов, но также для приложений и других интернет-ресурсов.

Рассмотрим, как это может выглядеть на примере

Для начала обратимся к элементам, которые у нас уже разработаны и готовы участвовать в создании интерфейса:

Как они могут быть использованы:

Готовые элементы в разных состояниях:

Атомарный дизайн знаменит тем, что однажды созданные элементы можно использовать много раз и сочетать друг с другом всеми возможными способами.

Также можно разработать несколько вариантов шаблонов для разных целей.

Например, если необходимо создать на сайте форму с открытым вопросом — готовый блок, элементы будут расположены таким образом:

Если форма опроса требуется другая, создаем следующий шаблон и добавляем необходимые элементы:

После того как формы составлены, мы размещаем их на странице для опроса:

Страницу тоже можно сделать элементом и копировать ее столько раз, сколько нужно:

Теперь все данные будут собраны в одном месте и в любой момент можно будет внести изменения, что значительно упрощает работу и экономит время.

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

Пример UI-kit:

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

То есть для того, чтобы пустить в ход все элементы, которые содержит в себе UI-kit, необходим атомарный дизайн. Он направлен на создание четкой системы для решения конкретных задач, а не просто содержит в себе перечень компонентов.

UI-kit можно отнести к части атомарного дизайна, но он не содержит никаких примеров и описаний.

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

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