Разработали многостраничный сайт для застройщика «Соколия» за 31 день

В 2024 году клиент решил сменить профиль, отстроиться от бренда «Великан» и создать новую компанию — застройщика «Соколия». Ему нужен был для нее сайт, и за его разработкой он обратился к нам.

Под брендом «Соколия» клиент вышел на рынок недавно, но у него уже было агентство недвижимости, через которое он продавал дома и участки. Также со временем он начал сам строить некоторые объекты.

Нам нужно было разработать имиджевый многостраничный сайт, который объединит все проекты застройщика и поможет:

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

У клиента были технические требования к сайту:

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

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

Застройщик выделил несколько сегментов целевой аудитории:

• люди, которые хотят построить дом «под ключ»,
• инвесторы и риелторы,
• обеспеченные пожилые люди от 60 лет, которые хотят повысить уровень жизни.

Ядро целевой аудитории — молодые семьи (30 — 40 лет), которые рассматривают для жизни более природный и экологичный вариант, чем может предоставить современный город.

Перед началом разработки мы составили план работ с конкретными датами и запросили у клиента нужные материалы для наполнения сайта.

Составили план по разработке сайта. В нем мы показали, сколько времени займет каждый этап.

Мы планировали сделать все за 31 рабочий день:

• 2 дня — на проработку структуры, анализ ЦА, создание портретов ЦА, анализ конкурентов и CJM сайта;
• 7 дней — на проектирование основных сценариев пользователя и страниц: «Главная», «О компании», «Блог», страница с проектом, страница с участком, «Контакты»;
• 8 дней — на дизайн всех страниц;
• 5 дней — на верстку главной страницы, страницы о компании, блога и адаптацию для всех устройств;
• 3 дня — на верстку и адаптацию страниц для проектов;
• 6 дней — на верстку и адаптацию страниц для земельных участков и блока с их локацией.

Далее мы запросили у клиента необходимые материалы: краткое описание ЦА и конкурентов, брендбук компании, тексты для сайта, изображения и рендеры. Они нужны, чтобы наполнить сайт контентом.

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

Поэтому сначала мы прогрели аудиторию информацией о проекте, его основных преимуществах, инфраструктуре и расположении, далее показали дома и вставили call-to-action. Такой подход позволяет:

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

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

Вот такая структура у нас получилась:

• главная страница с УТП и призыв к действию,
• раздел о проекте — описание поселка, инфраструктура, генплан,
• каталог участков с фильтрами,
• условия покупки (рассрочка, ипотека, акции),
• документы и ход строительства,
• новостной блог с полезными статьями об ИЖС.

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

Чтобы предугадать поведение пользователя, мы разработали CJM (customer journey map) — карту клиентского пути, которая позволила продумать сценарий взаимодействия пользователя с сайтом.

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

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

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

Сайт должен был получиться:

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

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

У нас нет шаблонных решений, например, одинаковых элементов или сочетаний цветов — каждый проект мы разрабатываем с нуля под конкретные задачи клиента.

На этом этапе мы перенесли дизайн с нарисованного макета в Figma на платформу Tilda и адаптировали сайт под разные устройства.

Также мы добавили на сайт дополнения, которые были нужны клиенту: квиз, блог, раздел про инвестиционную привлекательность и интеграцию с Яндекс Картами.

Квиз в поп-апе

Мы добавили на сайт квиз в поп-апе — всплывающем окне, которое появляется через 20 секунд после того, как пользователь зашел на сайт. Квиз на сайте позволяет собирать дополнительные заявки. Он открывается автоматически и удерживает внимание пользователя с помощью интерактивных вопросов. В конце пользователю предлагают бонус — каталог квартир, скидку или другой полезный материал — в обмен на контакты. Такой подход повышает вовлеченность и мотивирует посетителя оставить заявку, даже если изначально он не планировал этого делать. В результате мы получаем больше контактов потенциальных клиентов.

Еще одно дополнение, которое мы добавили по просьбе клиента, — это раздел с блогом.

Раздел с блогом

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

Раздел про инвестиционную привлекательность

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

Интеграция с Яндекс Картами

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

Для этого мы отрисовали карту в графическом редакторе и нанесли на нее точки с локациями.

Мы присвоили номер каждому участку и вставили каталог земельных участков на сайт «Соколии».

Затем при верстке в Tilda добавили на карту интерактивные элементы с помощью hover-анимации. Благодаря ей пользователь может нажать на конкретный участок на карте, после чего у него появится список доступных к покупке участков в разных ценовых сегментах. Так он сможет выбрать нужную локацию и ценовой сегмент.

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

Либо пользователь может перейти в Яндекс Карты и посмотреть участок по кадастровому номеру непосредственно на карте.

Саму карту мы интегрировали на сайт через API Яндекса и добавили брендинговые иконки с логотипом «Соколии».

На финальной стадии разработки мы добавили на сайт все изображения и описания.

На этом этапе мы завершили работу по разработке сайта и приступили к SEO-оптимизации. Она нужна, чтобы потенциальные клиенты могли найти сайт в поиске по релевантным запросам. Также она увеличивает органический трафик без расходов на рекламу.

В рамках базовой SEO-оптимизации мы:

• подключили панели вебмастеров Google Search Console и Яндекс Вебмастер, чтобы отслеживать рекомендации от систем и технические ошибки на сайте;

• настроили регион сайта (Симферопольский район) в Яндекс Вебмастере. Яндекс опирается на него, когда формирует выдачу пользователям из этого региона;

• открыли страницы для индексации, чтобы поисковые системы начали показывать сайт в поиске — обычно после разработки на Tilda все страницы закрыты от индексации;

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