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

© Брэд Фрост

Брэд Фрост и Дэйв Олсен, парни, стоящие за сайтом patternlab.io, называют это - «Строй системы, а не страницы»

Что значит «Строить системы, а не страницы»?

По мне, Строительство систем значит не создание дизайна и не разработка страниц интерфейса целиком. Это маленький элемент, вроде кнопки. И все мелкие компоненты объединяются в единые группы, такие как label, box, table, form.  В итоге, конечные страницы просто собираются из этих готовых групп. Это и есть идея «Строительства систем»

Теперь можем углубиться в модули атомарного дизайна.

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

• Атомы
• Молекулы
• Организмы
• Шаблоны
• Страницы

Иерархия атомарного дизайна (изображение 1)

Атомы

Вот здесь, те маленькие элементы/молули назваются «Атомом». Атомы – это вроде, строительных блоков приложения.

(изображение 2)

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

Молекулы

Молекулы обеспечивают большую функциональность. Молекулы – это группы атомов, связанных вместе, и являются наименьшими фундаментальными единицами. Например, (изображение 3). Текстовое поле ввода и кнопка объединены в форму поиска и могут что-то делать вместе.

(изображение 3)

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

(изображение 4)

Организмы

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

(изображение 5)

Шаблоны

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

dribbble.com (изображение 6)

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

Страницы

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

(изображение 7)

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

• Атомы – это элементы пользовательского интерфейса, которые невозможно разбить дальше, и они служат элементарными строительными блоками интерфейса.
• Молекулы – это наборы атомов, которые образуют относительно простые компоненты пользовательского интерфейса.
• Организмы – это относительно сложные компоненты, которые образуют отдельные части интерфейса.
• Шаблоны размещают компоненты в макете и демонстрируют основную структуру содержимого дизайна.
• Страницы применяют реальный контент к шаблонам и формулируют варианты, чтобы продемонстрировать окончательный интерфейс и проверить устойчивость дизайн-системы.

(изображение 8)

Заключение

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

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

© Брэд Фрост

***