Кейс по созданию лендинг пейдж для продажи кровельных мембран

Производство
ПВХ-мембран
ТЕХНОНИКОЛЬ

Разработка лендинга

ПРОЦЕСС РАБОТЫ

Игорь
Проект-менеджер

Алексей
Дизайнер

Слава
Верстальщик

Лена
Копирайтер

Катя
Старший дизайнер

СПЕЦИАЛИСТЫ

Ислам
Разработчик

СРОК

ИНСТРУМЕНТЫ

27
дней

ЗАДАЧА ПРОЕКТА

Корпорация ТЕХНОНИКОЛЬ запускала рекламную кампанию для своих готовых кровельных систем с ПВХ мембранами.
Для этой цели было необходимо разработать посадочную страницу с презентацией необходимого перечня готовых систем.

ЗАКАЗЧИК

Корпорация ТЕХНОНИКОЛЬ

Ведущий международный производитель надёжных и эффективных строительных материалов и систем

Работаем с 2018

22 проекта

ПЕРВЫЙ ЭТАП | 1 ДЕНЬ

Разработка прототипа сайта

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

ПОП-АПП

Прототипы всплывающих окон

Задача

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

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

Решение

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

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

ВТОРОЙ ЭТАП | 3 ДНЯ

Дизайн-концепция

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

Поиск референсов

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

ШАГ 1

Первые наброски

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

ШАГ 2

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

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

Обсуждение внутри студии

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

ШАГ 3

Финальные штрихи

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

ШАГ 4

Увеличили ширину плашек на весь экран, чтобы предать всему сайту ощущение масштабности

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

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

У нас родилась финальная дизайн-концепция, которая удовлетворяет все пожелания заказчика. Все визуальные элементы на сайте
подобраны так, чтобы сохранить в себе дизайн-код ТЕХНОНИКОЛЬ. При этом всё складывается в самобытную дизайн-систему.

ТАКИМ ОБРАЗОМ

ТРЕТИЙ ЭТАП | 3 ДНЯ

Продолжение дизайна страницы

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

Дизайн поп-аппа Кровельных систем

СЕДЬМОЙ ЭТАП | 1 ДЕНЬ

Адаптивы и ТЗ для верстальщика

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

ПЯТЫЙ ЭТАП | 4 ДНЯ

Вёрстка. Разработка. Оптимизация

Сверстали сайт. Серверную часть проекта реализовали на 1С-Битрикс, т. к. большинство сайтов заказчика
работают на этой CMS. Оптимизировали скорость загрузки страницы.

ЗАКЛЮЧИТЕЛЬНЫЙ ЭТАП | 1 ДЕНЬ

Тестирование. Проверка. Передача

Тестирование сайта

Протестировали работу сайта на исправность. Проверили отображение в нескольких браузерах и на мобильных устройствах Andriod и IOS.

СДАЧА ПРОЕКТА

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

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

Проверка дизайна

Вычитали текст на сайте,
проверили на орфографические и пунктуационные ошибки.

Проверка
текста

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

Игорь Костромин
CEO студии

Оставить заявку

Написать в Telegram

Давайте обсудим
ваш проект

МЕДИА

Telegram

YouTube

VC.ru

DSGNERS!

Данный сайт носит информационно-справочный характер
и ни при каких условиях не является публичной офертой