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

Основная задача дизайнера — это как сделать дизайн сайта, визуализировать прототип и адаптировать стилистику бренда под веб-среду. Если речь идёт о электронной коммерции, то назначение дизайна — сделать так, чтобы пользоваться продуктом было приятно и удобно.

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

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

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

Напомним, что на выходе предпроектного анализа получаем следующие документы:

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

Как сделать главную страницу сайта? На предпроектном анализе мы готовим визуальный бриф.

Он состоит из:

Заказчик выбирает те варианты, которые ему нравятся с визуальной точки зрения. Так мы понимаем вкус клиента, общий стиль и настроение проекта.

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

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

Стилистику типографики для контентных страниц собираем в отдельном макете, предусматривая базовые принципы оформления текста (заголовки, списки, абзацы, таблицы и изображения в тексте).

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

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

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

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

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

Всё это важно продемонстрировать верстальщику, чтобы UI-дизайн в результате получился таким, как планировалось.

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