Как отличить атомарный дизайн от UI-kit

UX и дизайн

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

Атомарный дизайн

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



В 2013 году эту методологию предложил Бред Фрост и описал ее в книге Atomic Design. Он провел аналогию между интерфейсами и химией: точно так же, как все вещества во Вселенной состоят из атомов, все интерфейсы состоят из компонентов. Эти элементы можно разложить на 5 уровней.

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

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

UI-kit

UI-kit набор элементов интерфейса: навигации, кнопки, табы, вкладки, баннеры. Главное, что в UI-kit прописаны все стили, размеры, их поведение при взаимодействии и состояния.

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




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

Для максимальной скорости работы готовый UI-kit должен быть переведен в код, к которому сможет обращаться верстальщик.

Почему эти понятия путают

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

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

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

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

В агентстве «ДАЛЕЕ» создают UI-kit в конце работы над дизайном, когда сайт начинает содержать больше определенного числа уникальных шаблонов, например, такие проекты как, «Поговорим от Сбербанка», «Pony Express». На проекте «Альфа-Тревел» специалисты агентства воспользовались готовой дизайн-системой Альфа-Банка, поэтому сайт нового продукта получился полностью в стиле бренда, а главное – с привычной для пользователей механикой действия.

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

Итак, ключевые отличия атомарного дизайна и UI-kit:

  • UI-kit собирается после завершения дизайна проекта;
  • В методологии атомарного дизайна существует страница как высший уровень конкретики, в UI-kit никогда не бывает такого уровня;
  • Атомарный дизайн принимают как методологию с самого начала работы над дизайном;
  • Атомарный дизайн – это расширенная дизайна-система, а UI-kit – ее часть.