Атомарный дизайн: сколько концепций предложить заказчику, чтобы он остался доволен?

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

Но сначала немного теории.

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

Зачем?

Из таких атомов можно быстро собрать любые страницы в рамках проекта.

Методологию атомарного дизайна разработал веб-дизайнер Брэд Фрост. Он сравнил веб-дизайн с химией: природные вещества состоят из атомов, а интерфейсы — из элементов.

Атомы. Строительный материал для страницы: формы, кнопки, цвета, иконки, анимации. Они задают единый стиль интерфейса, их нельзя разбить на еще более мелкие элементы.

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

Организмы — группировки атомов и молекул, которые составляют сложные части интерфейса: логотип, шапка со всеми кнопками, поле поиска, список соцсетей.

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

Страницы — это последняя стадия. Здесь можно выявить ошибки, сделанные на предыдущих этапах.

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

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

Разработка концепции дизайна — это отдельная большая задача. В нее входит:

После этого начинается разработка самого дизайна. Она проходит в 2 этапа:

1) Первый — создание мудборда. Мудброд — это доска настроения, на которой мы собираем референсы по дизайну, которые прислал клиент и подобрал арт-директор. Для этого мы выясняем у заказчика его предпочтения.

2) Создание дизайна. Мы используем атомарный подход. Применяем его на крупных проектах, в которых используется несколько страниц и их состояний.

Разрабатывать мы начинали от меньшего к большему. Первым делом выбрали шрифт и цветовую палитру. Затем приступили к инпутам и тегам. Из готовых компонентов отрисовали TapBar, хедер, карточки и UI-элементы.

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

После того, как отрисованы буквы и цвета, формируем кнопки, инпуты и контролы.

Опираясь на предыдущие этапы, мы формируем целые блоки. Идем от простого к сложному.

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

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

Мы не боимся, что не попадем в ожидания, так как:

а) скрупулезно проводим предпроектную аналитику и визуальное брифование;

b) совместно с арт-директором студии изучаем, что нравится заказчику, исследуем его ЦА и конкурентов.

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

Чтобы не пропустить новые статьи, подписывайтесь на блог Пиробайта. А если вам нужен дизайн для собственного проекта — оставьте свои контакты данные в форме обратной связи на нашем сайте.

Если у вас есть задача разработать сайт или мобильное приложение, то напишите в Телеграм, мы это обсудим: https://t.me/sashadzen

Заказать разработку сайта, веб-сервиса или мобильного приложения на нашем сайте: https://vk.cc/cuglQZ

Партнерская программа, где мы платим от 10 000 до 200 000 рублей за контакты тех, кому нужен дизайн или разработка: https://vk.cc/cuglXT

Телеграм-канал Саши Комбарова про управление агентством, проектами, людьми: https://t.me/sasha_kombarov

Телеграм-бот, который бесплатно выдает чек-листы, памятки и регламенты по управлению, маркетингу, аналитике, дизайну и разработке: https://t.me/regulations_pyro_bot