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

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

История появления Atomic Design

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

Брэд Фрост

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

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

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

Знакомство с концепцией атомов

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

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

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

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

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

Химия как основа атомарного проектирования

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

Ориентируясь на окружающий нас мир, химия стала основной отправной точкой при формировании данной методологии, где в основе лежат 3 основных элемента:

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

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

5 этапов Атомарного проектирования

этапы Атомарного проектирования

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

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

Каждый из этих этапов играет важную роль.

Атомы

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

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

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

Молекулы

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

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

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

Организмы

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

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

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

Шаблоны

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

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

Страницы

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

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

5 преимуществ атомарного дизайна

  1. Гибкость и масштабируемость: Атомарный дизайн позволяет легко комбинировать и изменять компоненты, что делает его очень гибким и масштабируемым под различные потребности проекта. Вы можете легко добавлять, удалять или изменять атомы, молекулы и организмы, не затрагивая всю структуру страницы.
  2. Согласованность и единообразие: Используя атомарный дизайн, вы можете создавать согласованный и единообразный пользовательский интерфейс. Компоненты, такие как кнопки, поля ввода и карточки, будут иметь одинаковый стиль и поведение в разных частях сайта или приложения, что создает единое визуальное впечатление и повышает удобство использования.
  3. Повторное использование: Атомарный дизайн позволяет повторно использовать компоненты в разных проектах. Вы можете создать библиотеку атомов, молекул и организмов, которую можно будет использовать снова и снова. Это экономит время и усилия при разработке новых интерфейсов и обеспечивает единообразие в различных проектах.
  4. Упрощение сопровождения и обновлений: Благодаря разделению интерфейса на мелкие компоненты, атомарный дизайн упрощает сопровождение и обновление веб-страницы. Если вам нужно внести изменения в определенный компонент, вы можете сосредоточиться только на нем, не затрагивая остальные части страницы. Это ускоряет процесс разработки и обновления интерфейса.
  5. Улучшение совместной работы: Атомарный дизайн способствует более эффективной совместной работе между дизайнерами и разработчиками. Благодаря ясной структуре компонентов и их повторному использованию, команда может легко понять и использовать разработанные элементы. Это упрощает коммуникацию и сотрудничество между участниками проекта.

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