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

Анализ технического задания

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

• Стиль: современный, технологичный, индустриальный премиум.

• Ассоциации: надежность, безопасность, устойчивость к высокой нагрузке, работа в любую погоду.

• Минимализм, чистая сетка, много «воздуха», крупная типографика, аккуратные тени.

• Фотографии/рендеры оборудования — ключевой визуальный элемент.

• Недопустимо: устаревшие декоративные эффекты, «пестрые» иконки, неуместные стоки.

Также была представлена цветовая палитра (два варианта на усмотрение исполнителя) и информация о самом первом экране:

• Крупный визуал оборудования (стойка/терминал/шлагбаум) в современном окружении или на чистом фоне.

• Короткий список преимуществ (3 пункта) рядом с УТП: «Антивандально/улица», «Сервис 24/7», «Интеграции и отчетность».

• Липкая шапка (header) с основным CTA на десктопе и фикс-кнопка действия на мобайле.

Прототипирование

Изучив задание, мы приступили к работе над структурой блока. Одной из основных задач было показать рендер оборудования так, чтобы он был заметен и в то же время не занимал всё свободное пространство. Мы решили объединить все продукты клиента (стойка, терминал и шлагбаум) в одно изображение и разместить его снизу. Благодаря такому решению, у нас осталось достаточно воздуха для заголовка, преимуществ и текста с CTA. Сверху мы разместили шапку, где указали основные пункты меню, предусмотрев индикацию страницы, на которой находиться пользователь.

Создание дизайна

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

Посмотреть проект

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