Давайте начнём прямо сейчас!
Оставьте заявку, заполнив контактные данные, и мы обсудим ваш проект.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
процесс разработки

Как разработать дизайн, который улучшит пользовательский опыт и попадёт в ожидания заказчика?

Максим Жуков
Сооснователь ecommerce-агентства KISLOROD
Концепт интернет-магазина Gloria Jeans
Задача дизайнера визуализировать прототип и адаптировать стилистику бренда под веб-среду. Если речь идёт о электронной коммерции, то назначение дизайна — сделать так, чтобы пользоваться продуктом было приятно и удобно.

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

В противном случае, все поведенческие характеристики и показатели конверсий систем аналитики будут говорить, что ваше субъективное представление о красоте и удобстве было ошибочным.
Скриншот из онлайн-курса «E-Commerce 2019: старт и масштабирование»
Тимофей Шиколенков. С 1997 года в электронной коммерции.
Автор бестселлера: «Ваш интернет-магазин от А до Я».

Презентация визуальной концепции

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

Напомним, что на выходе предпроектного анализа получаем следующие документы:
  1. Анализ поискового спроса и структуру сайта на основе семантического ядра.
  2. Конкурентный анализ
  3. Анализ клиентского опыта на основе методологии развития продукта (CJM).
  4. Анализ данных систем аналитики (веб-аналитика)
  5. Результаты визуального брифинга (moodboards)
  6. Результаты брифинга (интервьюирование ключевых лиц компании)
Несмотря на то, что мы в первую очередь ориентируемся на потребности целевой аудитории — пожелания и вкус заказчика тоже учитываются, но в рамках современных трендов в веб-дизайне.

На предпроектном анализе, мы готовим визуальный бриф.

Он состоит из:
  • Референсов по стилистике, актуальной для данной специфики бизнеса
  • Вариантов иконок, шрифтов
  • Элементов интерфейса и форм
Заказчик выбирает те варианты, которые ему нравятся с визуальной точки зрения. Так мы понимаем вкус клиента, общий стиль и настроение проекта.

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

После согласования стилистики главной страницы отрисовываются все остальные функциональные страницы. Особое внимание мы уделяем адаптивной версии, делая дизайн практически всех функциональных страниц в трёх разрешениях для основных типов устройств: десктоп, планшет и смартфон.
Готовый интернет магазин Glenfield
Стилистику типографики для контентных страниц собираем в отдельном макете, предусматривая базовые принципы оформления текста (заголовки, списки, абзацы, таблицы и изображения в тексте).

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

Без UI-кит существует риск забыть важные элементы интерфейса и не показать frontend-разработчику, что должно происходить в момент взаимодействия с ними пользователя. Это несомненно скажется на удобстве пользования сайтом и на качестве конечного продукта.

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

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

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

Ключевые мысли

  1. В основе создания дизайна интерфейса для eCommerce-проекта — потребность пользователя.

  2. Отстаиваем интересы пользователя, оперируя данными из предпроектного анализа.

  3. Визуальный брифинг позволяет нам понять вкус клиента, стилистику и настроение проекта.

  4. Наличие в производственном процессе UI-кита, типографики для контентных страниц и микро-, макро-анимаций должно быть строго регламентировано, иначе есть риск в результате получить интерфейс не таким, как планировалось.
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)

Рекомендованные статьи