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

Глава 2: Методология атомарного дизайна (часть 1)

Атомы, молекулы, организмы, шаблоны, страницы

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Атомы

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

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

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

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

Молекулы

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

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

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

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

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

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

Организмы

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

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

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

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

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

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

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

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

Шаблоны

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

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

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

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

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

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

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

Теперь, когда мы создали скелет для наших страниц, давайте нарастим на него мясца!

Страницы

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

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

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

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

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

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

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

Если вам понравился перевод, дайте нам знать — нажмите кнопку Recommend.

Источник

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

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

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

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

Вы можете смешивать и сочетать компоненты

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

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

Простой способ создания руководства по стилю

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

Понятный макет

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

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

Легче программировать

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

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

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

Не базируется на дизайнах Pixel Perfect

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

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

Быстрое прототипирование

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

Проще обновить и удалить части сайта

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

Больше модулярности в структуре файла

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

Меньше компонентов в совокупности

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

Если для дизайна требуется заголовок с размером шрифта 4.5em, но уже существует размер 4em из списка атомов, то разработчик скорее выберет 4em, чем создаст совершенно новый заголовок. Таким образом, в совокупности будет использовано намного меньше атомов, что, в свою очередь, сделает сайт более аккуратным и «компактным».

Pattern Lab

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

Первоначальная версия написана в PHP. Поэкспериментировать с атомарным дизайном и понять, как он работает, можно на сайте Pattern Lab.

Ищете исполнителя для реализации проекта?

Проведите конкурс среди участников CMS Magazine

Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈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

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

Источник