Невозможно перестараться, оптимизируя работу над дизайном. Можно подойти к вопросу глобально и воспользоваться методологией атомарного дизайна, а можно ограничиться UI-kit. Разбираемся, какие инструменты для чего используются, как их не перепутать и получить именно то, что нужно для вашего проекта.
Атомарный дизайн
Главное свойство атомарного дизайна в том, что это не технология, а методология. С помощью атомарного дизайна можно создать полную дизайн-систему вне зависимости от программы, в которой вы привыкли работать. Это система содержит информацию о компонентах интерфейсов и дает возможность быстрее переходить от абстрактного уровня к конкретному.
В 2013 году эту методологию предложил Бред Фрост и описал ее в книге Atomic Design. Он провел аналогию между интерфейсами и химией: точно так же, как все вещества во Вселенной состоят из атомов, все интерфейсы состоят из компонентов. Эти элементы можно разложить на 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 – ее часть.