С петербургским застройщиком «Красная стрела» мы работаем много и результативно: поддерживаем и развиваем официальный сайт, ведём рекламную кампанию, создаём 3D-визуализации новостроек и отрисовываем планировки. В начале этого года список пополнился созданием лендингов. Рассказываем подробнее.
В конце 2017 года наш постоянный клиент принял решение сделать для каждого ЖК лендинг, включенный в структуру существующего сайта. О разработке сайта рассказывали в отдельном кейсе.
Задача
Перед нами стояла задача разработать шаблонный лендинг для всех жилых комплексов, находящихся в продаже: ЖК «Аист», МЖК «Горки Парк», МЖК «Неоклассика» и МЖК «Неоклассика-2». Эти лендинги должны были стать посадочными страницами для рекламных кампаний застройщика. Изначально была согласована одна структура для лендинговой страницы, но позже клиент скорректировал задачу: содержание лендинговой страницы не должно дублироваться в других разделах. При такой постановке задачи структура лендинга включала в себя следующие разделы.
На первом экране:
- изображение ЖК;
- основной блок с названием / логотипом, сроком сдачи, ценой «от…», площадью «от… до…», адресом, кнопкой «Выбрать квартиру»;
- кнопки «Акция», «Фотографии», «Расположение», ведущие на соответствующие разделы сайта.
Далее следуют:
- важные цифры, характеризующие проект;
- концепция проекта: текстовый блок;
- примеры планировок и кнопка «Выбрать квартиру», ведущая на страницу ЖК / цены;
- квартиры: текстовый блок + описание инженерии;
- архитектура: изображение + текстовый блок про архитектуру и технологию строительства;
- территория жилого комплекса: изображение + текстовый блок.
Процесс разработки сайта
Первый этап — дизайн-макеты. На этом этапе мы согласовали список блоков лендинга и приступили к отрисовке дизайн-макетов страницы:
Вместе с десктопной версией сделали мобильную:
Дизайн-концепция сайта разрабатывалась на основе дизайна текущего сайта, так как лендинг заменяет раздел «О проекте». Дизайн страницы корректировался 3 раза. На правки ушло 2 недели работы наших специалистов. Для лендингов мы также разработали иконки преимуществ:
Второй этап — верстка. Верстка в этом проекте статичная, для мобильной версии этой страницы предусмотрена отдельная мобильная верстка, которая будет внедряться вместе со всеми остальными разделами в рамках мобильной версии, о которых мы планируем рассказать в скором времени.
Третий этап — программирование. Так как у нас для лендинга шаблон один, а данные для каждого ЖК разные, то мы сделали административную часть сайта, где клиент может самостоятельно изменять все тексты и картинки блоков, а данные по ЖК и квартирам подтягиваются из базы данных сайта. Административная часть выглядит так:
Поскольку лендинги призваны превращать посещения в лиды, в шаблоне лендинга есть форма обратной связи, которая реализована через API виджета обратного звонка сервиса повышения конверсии «Ньютон». Пользователь может оставить свой номер телефона, и менеджер позвонит ему в течение 1 минуты.
Результат
Созданные четыре страницы теперь служат посадочными для рекламных кампаний застройщика. Цель, которую ставил перед нами клиент, достигнута. На работу над лендингами ушло 4 недели.
В нашем блоге вы можете почитать другие кейсы по разработке сайтов жилых комплексов.