При создании веб-сайтов дизайнеры и разработчики используют различные методики. Кто-то , кто-то использует мудборды и UI-киты, кто-то занимается прототипированием и определением основных элементов.

Мы расскажем о методологии «Атомарный дизайн», созданной Брэдом Форстом, разработчиком интерфейсов из США. Эта методика получила популярность среди веб-дизайнеров благодаря своей простоте и эффективности. Как можно использовать Atomic Design в работе, что это такое и как поэтапно его внедрить - читайте в статье.

Понятие атомарного веб-дизайна

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

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

Атомы

Атомы в веб-интерфейсе - базовые элементы, которые нельзя разбить на еще меньшие, не потеряв при этом их функциональности . К таким частям относятся:

  • кнопки;
  • веб-формы;
  • иконки;
  • поля ввода;
  • чекбоксы;
  • текстовые стили и другие базовые элементы.

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

Молекулы

Объединение атомов называется молекулой. Например, если мы комбинируем друг с другом поле ввода, кнопку и чекбокс получается форма . Таким образом, соединения атомов веб-интерфейса образуют отдельные элементы системы.

В веб-дизайне молекулами могут быть:

  • формы;
  • навигация или меню сайта;
  • карточка товаров;
  • баннеры с подписями и прочее.

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

Организмы

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

К организмам можно отнести:

  • шапку сайта;
  • полностью оформленные карточки товаров с формами заказа и выбором характеристик (как создать идеальную - );
  • футер;
  • товарные сетки и прочее.

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

Шаблоны

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

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

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

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

Страница

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

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

В чем еще «фишка» атомарного дизайна? Есть ресурсы, в которых страницы в разделах выглядят разрозненно, нет общего стиля. С помощью Atomic Design создается единая концепция сайта, где расписано, как должны выглядеть отдельные атомы, молекулы, организмы и страницы в целом. Так можно добиться единой атмосферы и сделать сайт однородным.

Как применять Atomic design на практике

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

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

Стайл-гайд создается в несколько этапов:

  1. Сначала разрабатывается страница, в которую включены как ранее придуманные атомы, так и новые модули. Дизайн согласовывается с заказчиком.
  2. После этого веб-страница разбирается на детали, которые описываются в стайл-гайде. Как правило есть отдельные правила для названия атомов, которые потом используют разработчики при написании кода.
  3. Остальные страницы создаются с помощью разработанного документа.

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

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

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

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

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

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

Технология атомарного дизайна подходит не только для разработки веб-сайтов, но и для создания программного обеспечения, мобильных приложений и других объектов. К примеру, Брэд Форст применяет методику к известному приложению Instagram и разбивает его на несколько частей:

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

Как атомарный дизайн поможет в работе

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

1. Оптимизация ресурсов

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

2. Повторное использование

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

3. Эффективная организация работы

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

4. Простота понимания

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

5. Легкость в поддержке

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

Чем отличается атомарный дизайн от UI-китов

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

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

Здесь указано несколько вариантов кнопок, их состояния (активное, при наведении, при нажатии), а также другие . Однако, UI-kit не будет таким полным, как разработанная дизайн-система в соответствии с методологией Atomic Design.

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

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

Если кратко: Atomic Design с использованием Sketch – это будущее разработки продуктового дизайна.

Следуйте за мной

Брэд Фрост, потрясающая личность из видеоролика, является одним из основателей системы, о которой пойдет речь в этой статье. Atomic Design был разработан в ответ на этот цифровой, адаптивный мир, в котором мы все живем и работаем.

Мы создаем руководства по стилям, руководства по элементам, мудборды и прочие инструменты с целью упростить понимание и будущее применение наших дизайнов. Точно также разработчики используют вещи вроде Bootstrap, Foundation, Bourbon и прочие похожие инструменты, чтобы ускорить процесс кодинга. Когда мы работаем в команде, с помощью таких вещей жизнь заметно облегчается. И вот именно для этого существует Atomic Design.

Atomic design больше пригоден для дизайна большой картины в целом, чем создания какой-то отдельной сущности или страницы. Этот инструмент отлично подойдет для дизайна ядра системы.

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

Атомы

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

Молекулы

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

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

Организмы

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

Пример организма – главная навигация на страничке, которая включает лого, ссылки навигации и поле поиска или кнопку регистрации.

Шаблоны

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

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

Страницы

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

Страницы не всегда являются необходимостью, но кто же не любит красивую визуализацию?

Почему Sketch?

Хотя Sketch еще не стал таким мощным центром разработки дизайна, как Adobe Illustrator или Photoshop, это потрясающий инструмент для работы по методологии Atomic Design.

Организация

Sketch – это своего рода удачное дитя любви Adobe Illustrator и Photoshop. Несомненно, Sketch еще очень молод, но уже достаточно мощен, и помимо этого, невероятно прост в работе.

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

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

Модульность

Sketch отлично подходит для Atomic Design из-за простоты создания модульных систем. Вы не только можете добиться идеальной организации со слоями, как в Adobe Photoshop, вы также можете создавать модульные элементы. В Sketch такие элементы называются символами.

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

Для начала нарисуйте свой элемент, каким вы хотите его видеть.

Затем выделите его и кликните на кнопку Create Symbol (создать символ) на верхней панели инструментов.

Совет от профессионала: Чтобы превратить элементы с текстом в идеально модульные символы в Sketch, обязательно отметьте галочкой опцию Exclude Text Value from Symbol в наборе инструментов справа.

Чтобы сделать это, вам нужно сначала выделить текст в символе, если вы этого не сделаете, вы не увидите нужную опцию в наборе инструментов.

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

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

Всегда, когда хотите разместить один из созданных элементов, нужно просто кликнуть на дропдаун Insert , найти опцию Symbols и выбрать символ, который хотите вставить.

Конвертация в код

Экспорт в код

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

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

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

HTML

Как и при использовании Bootstrap или Foundation, у нас есть стилизованные элементы. Все, что осталось сделать – добавить класс к элементу в нашем коде HTML.

Здесь нужно превратить элементы в HTML-страничку, которую будут видеть только разработчики из команды. Можно создать страничку элементов с нужным примененным классом, чтобы проверить, как это все выглядит в браузере, на различных экранах.

Брэд Фрост и Дэйв Олсон из Pattern Lab создали отличный пример, посмотрите:

Использование шаблонизаторов

Это бонус для тех, кто освоил шаблонизаторы и CSS, вроде swig, jade, haml и множество других языков, доступных сегодня.

Множество организмов, которые мы создали, станут частичными шаблонами (partials), как только конвертируются в код.

Мы сделали это

Теперь можно притвориться, будто вы разбираетесь в науке. И до определенной степени, вы таки разбираетесь в этом. Atomic Design – это наука высококачественного дизайна.

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

Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики “Атомарный дизайн”.

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

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

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

Вступительное слово

Джош Кларк и Дэн Молл

На дворе стоял 2013 год. Мы в компании Брэда Фроста собрались в Бруклине на залитой солнечным светом кухне в гостях у Дженнифер Брук. Наша четверка как раз начала работать над новым веб-сайтом для TechCrunch. Мы рисовали эскизы страниц, мучаясь с новыми требованиями адаптивного дизайна. Неожиданно Брэд достает ноутбук и заявляет: “Я тут поэксперементировал с новой идеей…”

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

Улыбаясь, как сумасшедший, Брэд спросил: “Круто, правда?”

Мы же смотрели на экран с каменными лицами. Кто-то вежливо покашлял.

А затем Брэд Фрост, фронт-энд разработчик, вдруг заговорил как Брэд Фрост, химик. Он говорил об атомах, молекулах и организмах - о том, как крупные элементы дизайна могут быть разбиты на меньшие части и даже могут стать частью других крупных элементов. Другими словами, вместо готового блюда, он показал нам его ингредиенты.

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

Свою идею Брэд называл “атомарный дизайн”, и она полностью изменила наш подход к работе в этом потрясающем мульти-девайсном мире. Сумев взглянуть на интерфейс сразу в двух измерениях - на макро-уровне (страницы) и микро-уровне (элементы) - мы смогли упростить разработку. Мы ввели более строгие требования к функции каждого элемента; у нас появились привычки, сделавшие наш UX лучше; и, что действительно важно, мы начали работать быстрее и более согласованно. Атомарный дизайн стал для нас супер-силой!

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

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

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

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

Энергия и энтузиазм Брэда во всем, что связано с интернетом и его творцами, поистине безграничны. На протяжении многих лет он оттачивал мастерство адаптивного дизайна и делился своими наработками.

Его сайт This Is Responsive - это готовый ресурс для поиска решений любых задач, связанных с UX. У него есть блог и Твиттер, где он также делится проблемами и их решениями. Когда дизайнеры и разработчики следуют указаниям Брэда Фроста, они попадают в быстрый и плотный поток вдохновения, необходимого для создания красивых и жизнеспособных веб-сайтов. Эта книга удваивает эффект.

Будь такая возможность, Брэд постучался бы дверь каждого дизайнера и разработчика, чтобы лично донести свои идеи. Мы с восхищением (и легкой завистью ) наблюдали, как Брэд словно ураган пронесся по всем шести континентам, распространяя знания среди сотен команд и компаний. (Вероятно, вскоре атомарный дизайн доберется и до Антарктики! ) Но поскольку Брэд Фрост все-таки не может быть во всех местах сразу, мы рады, что он рассказал о своих идеях в этой книге, полной смысла и тонкого юмора.

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

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

Используем подсказки из химии

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

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

Пример химического уравнения, в котором атомы водорода объединяются с кислородом и образуют молекулы воды.

Химические уравнения демонстрируют химические реакции. Часто такой реакцией становится объединение атомов элементов для образования молекул. В приведенном выше примере мы видим, как водород и кислород объединяются и образуют молекулы воды.

В природе атомы объединяются для образования молекул. Молекулы в дальнейшем могут объединиться и образовать относительно сложные организмы . Давайте рассмотрим это подробнее:

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

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

Периодическая таблица химических элементов.

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

Методология атомарного дизайна

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

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

Периодическая таблица HTML-элементов Джоша Дака.

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

Да здравствует атомарный дизайн!

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

  1. Атомы
  2. Молекулы
  3. Организмы
  4. Шаблоны
  5. Страницы

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

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

Атомы

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

К атомам интерфейсов относятся веб-формы, поля ввода и кнопки.

В природе каждый атом обладает своими уникальными свойствами. Атом водорода содержит один электрон, а атом гелия - два. Присущие атомам химические свойства оказывают огромное влияние на способ их применения (взрыв дирижабля Гинденбург был настолько мощным из-за того, что его отсеки были заполнены чрезвычайно огнеопасным водородом, а не более инертным гелием ).

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

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

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

Молекулы

В химии молекулами называют группы атомов, связанных друг с другом и таким образом приобретающими определенные свойства. Молекулы воды и молекулы пероксида водорода состоят из одних и тех же атомов: водорода и кислорода. Однако, они обладают разными свойствами и ведут себя тоже по-разному.

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

Молекула формы поиска состоит из поля поиска, формы ввода и кнопки Search.

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

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

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

Теперь, когда у нас есть простые, функциональные и многоразовые компоненты, которые мы можем системно использовать, встречайте организмы!

Организмы

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

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

Организм хедера состоит из молекулы формы поиска, атома логотипа и молекулы навигации.

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

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

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

Одни организмы состоят из разных молекул, другие состоят из одной и той же молекулы, повторяемой снова и снова. Зайдите на страницу каталога любого интернет-магазина, и вы увидите список товаров, представленных в виде сетки.

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

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

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

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

Шаблоны

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

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

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

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

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

Марк Боултон о важности разработки базовой структуры контента страницы:

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

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

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

Наполнив макет домашней страницы Time Inc. реальным контентом, мы видим, что все базовые шаблоны эффективно работают.

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

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

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

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

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

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

And much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way.

In searching for inspiration and parallels, I kept coming back to chemistry. The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.

Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.

Pages

Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

Pages are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around.

The page stage is essential as it’s where we test the effectiveness of the design system. Viewing everything in context allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.

Pages are also the place to test variations in templates. For example, you might want to articulate what a headline containing 40 characters looks like, but also demonstrate what 340 characters looks like. What does it look like when a user has one item in their shopping cart versus 10 items with a discount code applied? Again, these specific instances influence how we loop back through and construct our system.

Why Atomic Design

In a lot of ways, this is how we’ve been doing things all along, even if we haven’t been consciously thinking about it in this specific way.

Atomic design provides a clear methodology for crafting design systems. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.

Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.

Pattern Lab

In order to apply this methodology in my work, I (along with the help of the great Dave Olsen) created a tool called Pattern Lab to actually create these atomic design systems. I’ll cover Pattern Lab in detail later, but feel free to check it out on Github .

Further Reading

  • So Andy Clarke has been setting the stage for these types of conversations for a long while now. In fact, he wrote a chapter for Smashing Book 3 called “Becoming Fabulously Flexible: Designing Atoms and Elements.” I had no idea that existed, so how about that! I highly encourage you to check that out. I also highly encourage you to take a look at his tool called Rock Hammer Vimeo .

    I’m really excited to dive in deeper and develop more tools and thoughts around these concepts.

    Update: since writing this original article, I wrote a book called that dives into this topic in more detail, which you can buy in /or formats. Thanks!