Атомарный дизайн: химия между вами и клиентом

Дело началось в 2013 году, когда разработчик интерфейсов и настоящий фанат мобайла Брэд Фрост выпустил книгу Atomic Design. Термин быстро стал популярным, разошелся по миру и в 2015 добрался до нашего дизайн-комьюнити. Сами не знаем, почему раньше про него не писали, так что не спрашивайте.

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

Сейчас расскажем, как это все наращивается и соединяется.

Этапы атомарного дизайна

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

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

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

Организмы. Молекулы складываются друг с другом (и с атомами, да) в отдельные разделы интерфейса: шапка сайта или подвал, сетка товаров — если речь об интернет-магазине.

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

Страницы. Шаблоны «с мясом», то есть с примерами настоящего контента. На них проверяют состоятельность всей дизайн-системы.

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

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

Про путаницу с дизайн-системами и UI-китами

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

UI-киты — это библиотеки компонентов. И всё.

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

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

Ее также можно использовать для создания дизайн-систем, как это было, например, с Рамблером. И до определенного момента — для создания UI-китов. Если быть точными, до четвертого этапа. Ведь как мы помним, в атомарном дизайне последняя стадия, страница с настоящим контентом, позволяет проверить состоятельность всех предыдущих. Для библиотеки компонентов этого просто не требуется, но почему бы не использовать сам принцип на предыдущих этапах?

В то же время разрабатывать продукты, UI-киты и дизайн-системы можно как-то иначе, по другой методике. У атомарного дизайна есть и критики, и фанаты. Дизайнер из Киева Игорь Сивец написал целый отчет о том, к чему привело внедрение подхода в их команде. Перескажем в двух словах.

Несколько улучшений от внедрения атомарного дизайна

Компания, в которой работает Игорь, занимается разработкой для крупных корпоративных клиентов. С 2016 года команда использует атомарный дизайн для проектирования дизайн-систем, и за это время успела достигнуть некоторых успехов.

1. Сократили время и усилия на разработку. Когда каждый элемент задокументирован, переделывать придется значительно меньше. Вам не нужно изобретать велосипед, ведь вы сразу видите все детали проекта. А как только ваша библиотека компонентов станет достаточно большой, вы сможете очень быстро собирать новые страницы.
2. Решили проблему коммуникации. Успех любого проекта во многом зависит от того, удалось ли дизайнерам и разработчикам найти общий язык. Как оказалось, с атомарным дизайном работать гораздо проще. У любого члена команды есть полная документация, и в результате возникает гораздо меньше недоразумений.
3. Дисциплинировали дизайнеров. В большой команде дизайнеров с разным опытом не бывает одинакового видения относительно структуры макетов слоев и файлов. А еще очень просто забыть описать простые и пограничные состояния для различных компонентов. Все это не лучшим образом сказывается на отношениях между дизайнерами и разработчиками. Атомарная методология требует: а) документирования каждого нового компонента в макетах; б) структурирования слоев определенным способом. Это помогает решить вышеописанные проблемы.

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

Заключение

Сам автор атомарного дизайна Брэд Фрост приводит в своей книге цитату вице-президента по управлению проектами компании Happy Cog о гибких подходах в разработке:

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