Введение в атомный веб-дизайн

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

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

Вместо разработки коллекции веб-страниц, в концепции атомного дизайна сначала создаются простейшие компоненты интерфейса – атомы (кнопки, пункты меню и т.д.). Дополняется UI на четырех последующих этапах: молекулы, организмы, шаблоны и страницы.

Методология была разработана дизайнером Брэдом Фростом для создания успешных UI систем. Ей посвящена книга автора.

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

Иерархия атомного дизайна

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

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

Ниже мы рассмотрим каждую из стадий более подробно.

1. Атомы

Так же как и в химии, атомы – наименьшие неделимые частицы дизайна. Это базовые HTML элементы: кнопки, ярлыки, поля форм.

Конечно, не все HTML элементы являются атомами. Например, article и section не могут быть мельчайшими элементами веб-страницы.К атомам относятся и такие элементы, как шрифты, цвета, разрешения и другие CSS правила. По словам автора концепции “атомы наглядно демонстрируют все базовые стили”.

Пример

На этой странице заголовки рекомендованных постов можно считать одним из типов атомов. Для них используется одинаковый HTML и CSS код и эти элементы отличаются от всего остального контента.

2. Молекулы

Молекулы состоят из группы атомов. Это следующая стадия иерархии атомного дизайна.

К молекулам относятся простейшие UI элементы, которые состоят из нескольких HTML компонентов: строка поиска или рекомендованные посты в правой панели.

Организация в молекулы дает атомам определенную цель. В группе они поддерживают и дополняют друг друга.

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

Пример

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

3. Организмы

Организмы состоят из групп молекул, атомов и иногда других организмов. В веб-дизайне организмы – это более сложные UI компоненты, которые представляют собой определенные секции страницы: хедер, футер, боковая панель.

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

Пример

Боковую панель можно считать организмом. Здесь она состоит из строки поиска (один тип молекул, повторяется один раз) и нескольких рекомендованных постов (второй тип молекул, повторяется много раз).

4. Шаблоны

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

Шаблоны состоят из организмов. Это элементы страницы без финального контента. Цель шаблона – представить структуру будущего контента.

Шаблоны отражают взаимодействие атомов, молекул и организмов в контексте разметки. Это своеобразный скелет страницы.

Пример

Пример шаблона – дизайн домашней страницы со стандартными изображениями и блоками текста lorem ipsum. Атомы, молекулы и организмы находятся на своих местах, но со схематическим контентом.

5. Страницы

Страницы – последняя стадия иерархии атомного дизайна. На этом этапе шаблоны заполняются реальным контентом (текстом, изображениями, видео) и приобретают вид конечного UI.

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

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

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

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

Пример

Ниже представлен пример стадии страницы для сайта из предыдущего пункта. Выглядит совсем по-другому.

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

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