О чем штурмят веб-дизайнеры. Этапы создания дизайн-концепции

Арт-директор Аша Саакян и продюсер Алёна Титова раскрывают подход агентства Nimax к созданию дизайн-концепций сайтов.

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

Дизайн-концепция сайта формирует общее видение визуальной части проекта с учетом всех источников требований и пожеланий к дизайну:

• брендбука компании;
• бизнес-задач сайта;
• трендов;
• видения рабочей группы заказчика;
• решений дизайн-группы исполнителя.

Если кратко: дизайн-концепция помогает заказчику и исполнителю смотреть в одном направлении. Так дальнейшая работа над дизайном страниц сайта становится предсказуемой и прозрачной.

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

При этом дизайн страниц может быть не финальным, мы формируем общее видение и пути развития. На этапе концепции происходят поиски:

• направления и стилистики;
• идей по анимации;
• элементов айдентики (или идей раскрытия элементов фирменного стиля на сайте);
• лейаутов и композиций блоков;
• цветовой схемы и шрифтов;
• референсов по фотоконтенту, набросков иллюстраций и тд.

Также необходимо выбрать приоритетные страницы.

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

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

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

Весь процесс можно разделить на три основных блока: исследование, создание дизайн-концепции и ее презентация.

1. Этапы исследования: предпроектный аудит и информационная архитектура.

2. Этапы создания дизайн-концепции: мудборд и стайлборд, генерация идей, скетчи и выбор идеи и создание макетов.

3. Презентация концепции.

Чтобы приступить к дизайн-концепции сайта, всей команде необходимо получить понимание по многим пунктам:

• бизнес-задачи и процессы клиента;

• особенности целевой аудитории;

• контент;

• структура сайта;

• технические ограничения.

Поэтому мы начинаем работу с этапа предпроектного аудита. На самом деле, этот этап начинается с первого обращения заказчика, после которого аккаунт-менеджер (или любое другое контактное лицо) знакомится с бизнесом заказчика, проводит первичный брифинг. Аккаунт передаёт собранную информацию команде, которая углубляется в проект вместе с заказчиком на Т-сессиях.

T-сессия — это групповая стратегическая сессия, где совмещается глубокая экспертиза заказчика в своей отрасли и широкая экспертиза агентства.

В результате предпроектного аудита команда получает ответы на вопросы:

• какие задачи должен решать сайт;
• какова структура будущего проекта;
• какой сегмент ЦА будет основным посетителем сайта;
• в чем ценности и уникальность продукта/услуги и т.д.;
• какие эмоции должен вызывать дизайн проекта;
• какие рекламные кампании планируются у клиента при запуске.

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

Что делаем?

1. Проводим интервью (одно или несколько) с заказчиком.

В ходе интервью у всей команды формируется представление о специфике бизнеса, о товарах, услугах и УТП компании, ЦА, конкурентах, бизнес-логике и процессах.

2. Проводим аудит.

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

3. Формулируем выводы и задачи.

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

Что в результате:

• сформулированы задачи проекта;

• составлено подробное описание проекта с выводами;

• составлено ТЗ на проект.

Инструменты, которые используем для предпроектного аудита:

• Miro для общей структуры;
• Readymag для презентаций;
• Google Docs для хранения всей информации по проекту;
• ActiveCollab для планирования работ и ведения задач.

Результатом этапа информационной архитектуры будут структурированные прототипы страниц будущего сайта с понятным контентом и пользовательскими сценариями.

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

Что делаем?

1. Собираем подробное дерево сайта.
2. Структурируем и упорядочиваем контент на страницах.
3. Составляем доступную навигацию.
4. Создаем ТЗ для контента, если потребуется.

Что в результате:

• составлено подробное дерево будущего сайта;
• составлены прототипы страниц;
• составлено ТЗ на контент, если он не был готов заранее.

Инструменты, которые используем для создания информационной архитектуры:

• Miro для общей структуры;
• Readymag для презентаций;
• Google Docs для хранения всей информации по проекту;
• ActiveCollab для планирования работ и ведения задач.

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

Мудборд — доска, отражающая настроение проекта. Он может содержать текст, фотографии и иллюстрации. Мудборд не должен передавать стилистику проекта.

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

Стайлборд — доска, отражающая стилистическое направление проекта.

Дизайнер смотрит референсы, собирает идеи по стилям — формирует стайлборд. Референсы могут быть сгруппированы по направлениям:

• шрифты;

• анимация;

• иллюстрации;

• цветовые решения;

• геометрия;

• сетки и композиция.

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

Что делаем?

1. Собираем образы, показывающие настроение проекта.
2. Смотрим референсы.
3. Предлагаем решения по типографике.
4. Составляем цветовые схемы.
5. Определяемся с фотостилем.
6. Находим подходящие композиционные решения для блоков сайта.

Что в результате:

• составлен мудборд;
• составлен стайлборд;
• составлен список референсов с комментариями от дизайнера.

Инструменты, которые используем при составлении мудборда и стайлборда:

• Figma для создания доски с комментариями;
• Pinterest для создания доски;
• Google Docs для хранения всей информации по проекту;
• ActiveCollab для планирования работ и ведения задач.

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

На этом этапе вся команда уже погружена в процессы.

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

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

На этом скрине можно увидеть наброски идей в результате внутреннего штурма веб-дизайнеров Nimax.

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

• Поможет ли идея решить задачи бизнеса?
• Не противоречит ли идея фирменному стилю?
• Идея — гибкая и масштабируемая?
• Подходит ли идея для целевой аудитории проекта?
  
• Реализуема ли идея в рамках ресурсов, которые есть у клиента и команды исполнителей?

Что делаем?

1. Проводим штурм.
2. Набрасываем идеи
3. Описываем идеи.

Что в результате:

• составлен список идей с описаниями;
• созданы скетчи страниц и наброски иллюстраций к ним или подобраны референсы;
• составлена презентация идей.

Инструменты, которые используем на этапе генерации идей:

• Figma;
• Photoshop/Illustrator;
• Pinterest;
• ActiveCollab для планирования работ и ведения задач.

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

Иногда одна идея дополняет другую и они объединяются в одно продуманное решение.

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

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

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

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

Что делаем?

1. Штурмим с командой и подключаем заказчика к отбору идей.
2. Выбираем лучшую идею и дополняем ее.
3. Примеряем идею на имеющийся прототипы

Что в результате:

• нарисованы макеты;
• анимированы блоки;
• составлена презентация.

Инструменты, которые применяем на этапе выбора идей и создания макетов:

• Figma;
• Photoshop/Illustrator;
• Readymag;
• Principle;
• ActiveCollab для планирования работ и ведения задач.

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

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

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

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

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

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

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

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

Подписывайтесь на телеграм-канал Школы Nimax — там вы найдете больше полезной информации о веб-дизйне, брендинге, маркетинге, digital PR и управлении трафиком.