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

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

Дизайн сайтов претерпел огромные изменения с начала веб индустрии. Если мы рассмотрим начало расцвета интернета в России, то это условно 2001 год, примерно с этого времени Интернет стал проникать в нашу жизнь повсеместно. Менялось время, менялся и дизайн. Первое, о чем я сразу хочу сказать, что в веб-разработке существуют так называемые тренды. Это новые решения в дизайне, снискавшие популярность у пользователей и разработчиков. Они могут надолго закрепиться и стать некоторым стандартом разработки сайтов. Или же довольно быстро кануть в лету.

Что такое атомарный дизайн сайта

Одним из новых трендов, который становится стандартом дизайна, является атомарный дизайн сайта .

Что это и в чем его отличие? Ответить на этот вопрос нам поможет знание причин его происхождения. Главная причина проста. Это мобильные пользователи. Пользователей, сидящих в сети с мобильных устройств, все больше и больше. Они уже давно перевалили за 50% практически по всем нишам и стабильно приближаются к 70% от общего трафика. Когда разработчики обратили внимание на эту проблему, то первичным решением было создание мобильной версии сайта. Дизайнерам и разработчиком приходилось фактически делать два сайта: основной, в который вкладывалась большая часть усилий, и второй, поменьше, мобильный. Распространенность мобильных устройств с возможностью выхода в сеть достигла наивысшей точки, поэтому мобильный трафик игнорировать больше нельзя.

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

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

Элементы атомного дизайна

В структуре атомарного дизайна прослеживается 5 основных уровней:

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

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

Молекулы - это соединение атомов в первые осмысленные блоки и приобретение первого разрозненного функционала.

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

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

Страницы - Финальная стадия дизайна.

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

Предлагаю читателям «Хабрахабра» перевод статьи Брэда Фроста (Brad Frost) «Atomic Web Design» .

Мы не проектируем страницы, мы проектируем системы компонент. - Stephen Hay

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

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

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

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

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

Что такое атомарный дизайн

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

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

Атомы

Атомы в природе - это основные строительные блоки материи. В контексте веб-интерфейсов атомы - это HTML тэги, такие как форма, поле ввода, или кнопка.

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

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

Молекулы

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

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

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

Организмы

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

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

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

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

Шаблоны

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

Шаблоны очень конкретные и предоставляют контекст ко всем довольно абстрактным молекулам и организмам. Именно шаблон позволяет видеть конечный дизайн. В моём опыте работы с этой методологией шаблоны начинаются с HTML wireframe"ов, но со временем становятся более точными. В итоге они становятся конечными продуктами. Bearded Studio в Питтсбурге имеют похожий процесс, при котором дизайны начинают разрабатывать чёрно-белыми и без разметки, но постепенно набирают конкретики и деталей до тех пор, пока не становятся конечными работами.

Страницы

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

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

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

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

Почему атомарный дизайн

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

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

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

Pattern Lab

Для применения этой методологии в своей работе я (с помощью

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Атомы

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

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

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

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

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

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

Молекулы

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

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

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

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

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

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

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

Организмы

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

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

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

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

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

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

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

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

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

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

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

Шаблоны

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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