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

Пример описание типа пользователя, его целей и задач по методологии VPC

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

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

Если мы разрабатываем проект для омниканальной среды, если мы знаем что у пользователя есть разные точки контакта и каналы взаимодействия с проектируемым сервисом, то начинаем работу с построения карты клиентского опыта (CJM).

Пример картирования пользовательского пути для омниканального сервиса

Дизайн-концепция — это документ в котором отражена графическая стилистика и основные ключевые особенности будущего дизайн-проекта. Дизайн-концепция позволяет увидеть часть финального результата и составить полноценное представление о целом продукте до его полной реализации. Для проектов с сильной бренд-составляющей — это так называемый look’n’feel бренда перенесенный в digital-среду. Для информационных и B2B-проектов тоже нужна концепция. Она отражает основные компоновочные решения, палитру используемых цветов, типографическое решение, стиль иллюстраций и служебной графики.

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

Фрагмент презентации дизайн-концепции проекта. Дизайн-концепции представлена на примерах оформления главной и внутренней страниц проекта.

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

Варианты дизайн-концепции проекта

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

На прототипе легко показать и проверить основные сценарии использования будущего цифрового продукта. Для проектов, которые должны работать и на мобильных устройствах, вначале разрабатываем прототип мобильной версии (в соответствии с принципом mobile first).

Пример и демонстрация работы интерактивного прототипа

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

В среднем дизайнер-оформляет 50-150 дизайн-макетов для каждого проекта

При проработке дизайн-макетов UI-дизайнер решает несколько важных вопросов:

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

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

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