ООО «СЗ» «Строй Дом» — застройщик жилого комплекса «Юго-Западный» в Тольятти
Квартал комфорт-класса в Автозаводском районе, на пересечении Московского проспекта и Приморского бульвара. Два 17-этажных дома рядом с новой набережной Волги и ключевой спортивной инфраструктурой города.
Предыдущий сайт собирался стихийно: в нём накопилось 12+ разнородных слайдов в одной карусели (факты, акции, интерьеры, двор — всё подряд), устаревший ипотечный калькулятор и хаотичные радиусы скругления. Конверсия в заявку была ниже ожидаемой, а до конца карусели доскролливали единицы.
Пересобрать сайт в единой дизайн-системе с понятной информационной архитектурой.
Сделать лендинг, который:
- Продаёт локацию. Главная ценность проекта — набережная, Жигулёвские горы и спортивный кластер вокруг. Это нужно было показать первым делом, а не закапывать в середине карусели.
- Раскладывает информацию по смыслу. Разбить монолитный слайдер на тематические блоки — инфраструктура, дома, двор-парк, расположение — чтобы каждый из них работал как самостоятельный SEO-индексируемый раздел.
- Убирает лишнее. Ипотечный калькулятор и дублирующиеся CTA-кнопки только рассеивали внимание. Оставить два понятных действия: «Оставить заявку» и «Подобрать квартиру».
- Выглядит современно. Стиль — лаконичный, без визуального шума, как у лучших застройщиков страны (ФАКТ., «Страна Девелопмент»).
Структура вместо карусели
Старый сайт страдал классической болезнью лендингов застройщиков: весь контент был упакован в один бесконечный слайдер, и до 60–70% информации пользователи просто не видели.
Разобрал эту карусель на 7 смысловых блоков с понятной навигацией:
- Hero — эмоциональный вход, воздух с Волги
- Локация и инфраструктура — факты в цифрах
- О домах — карусель с архитектурой, входными группами и безопасностью
- Двор-парк — благоустройство и озеленение
- Расположение — интерактивная карта
- Планировки — шахматка квартир
- Акции — актуальные офферы
- Способы покупки — ипотека, рассрочка, маткапитал, trade-in
- Ход строительства — ежемесячные отчёты
- Документация и контакты
CTA-дисциплина
Провел аудит всех кнопок на сайте. Было 5+ вариантов: «Перезвонить мне», «Получить консультацию», «Получить подборку» и др. Сократили до двух:
- «Оставить заявку» — оранжевая, основной CTA
- «Подобрать квартиру» — обводка, для раздела планировок
Единообразные скругления
Раньше на сайте соседствовали три разных радиуса скругления. Заменили на единую фирменную форму: полукруг для цифр и капсула для текстовых меток. Это создало визуальную целостность и сделало сайт узнаваемым.
Палитра
Основа — тёмный зелёный #284646 с градиентами (#266957 → #2D8161) и светлый зелёный #32A06E. Тёмно-зелёный градиент на hero-секции стал «воздухом с Волги» — подложка снизу вверх поверх фотографии, а не плоский текст на изображении. Оранжевый — акцент только для CTA.
Типографика
Заголовки — Unbounded (SemiBold–Black): геометричный, уверенный, ассоциируется с архитектурой. Основной текст — Wix Madefor Display (Regular–SemiBold): спокойный, читаемый, современный.
Инфографика
Ключевой блок «Локация и инфраструктура» построен на крупном зеленом заголовке с интересующей информацией + плашка подпись с важными цифрами
Крупные заголовки работают как якоря внимания: пользователь сканирует блок за 3 секунды и сразу понимает преимущество локации.
Акции
Каждая карточка — по единому шаблону: заголовок → выгода в плашке-полукруге → буллиты → срок действия → кнопка. Числа приведены к единому формату с пробелом-разделителем разрядов (вместо разнобоя «500 000» и «150.000»).
Сайт собран на Tilda, но это не просто «сайт на конструкторе» — это продуманная система, которая работает быстро и легко редактируется командой застройщика без привлечения разработчика.
Потоки 2.0 для хода строительства
Ежемесячные фотоотчёты — один из самых важных блоков для покупателя квартиры в строящемся доме. Раньше отчёты собирались вручную, и каждый месяц добавлять новый контент было трудоёмко.
Мы перевели блок «Ход строительства» на Потоки 2.0 (Tilda Feeds) — нативный инструмент для структурированного контента. Что это дало:
- Скорость загрузки. Раньше каждая фотография и каждый чеклист загружались отдельными элементами страницы. Сейчас контент хранится в базе Потоков и подгружается по запросу — страница стала легче на 40–60%.
- Простота обновления. Менеджер застройщика добавляет новый отчёт через удобную админку: выбирает месяц, дом, загружает фото, отмечает выполненные пункты в чеклисте. Без дизайнера, без вёрстки.
- Структура данных. Каждый отчёт — это запись с полями: месяц, дом, фотографии, чеклист. Это позволяет легко фильтровать по году и по номеру дома, а в будущем — масштабировать на новые объекты застройщика.
Автолейауты и стили Tilda
Весь сайт собран на автолейаутах — системе гибких контейнеров, которые автоматически адаптируются под содержимое. Это значит:
- Если в блоке акций появится третья карточка — она встанет в ряд без правки отступов.
- Если в документации добавится десятый PDF — аккордеон корректно раскроется.
- Если команда решит поменять шрифт или цвет — это делается в глобальных стилях Tilda одним кликом, и изменения применятся ко всему сайту.
Созданы кастомные стили для всех типовых элементов:
- Заголовки H1–H4 с привязкой к Unbounded
- Плашки-полукруги для цифр
- Капсулы для текстовых меток
- Карточки акций и способов покупки
- CTA-кнопки с двумя состояниями (заполненная / обводка)
Это позволяет маркетологу или контент-менеджеру редактировать сайт без дизайнера: новые акции, отчёты, изменения в документации — всё в едином стиле, без «поплывших» отступов и несоответствий.
Нативные элементы вместо костылей
- планировки квартир — интегрирована через iframe с актуальными данными из CRM.
- Интерактивная карта — Яндекс.Карты с фирменными зелёными иконками категорий (вместо случайных цветов).
- Документация — аккуратный аккордеон с иконками раскрытия и размерами файлов.
Итоговый дизайн
Результат — современный лаконичный лендинг в стиле ведущих девелоперских сайтов страны. Без визуального шума, без перегруза слайдерами, с чёткой иерархией и продающей структурой.
Что работает:
- Пользователь за 5 секунд на hero-экране понимает: это ЖК комфорт-класса на набережной Волги в Тольятти
- Блок с инфраструктурой «продаёт» локацию за 3 секунды через крупные цифры
- Каждый тематический блок индексируется поисковиками самостоятельно
- CTA-словарь дисциплинирует воронку: нет конкурирующих действий
- Ход строительства обновляется за 5 минут без дизайнера
- Глобальные стили гарантируют единообразие при любом количестве контента
Сайт получился не только «красивым», но и рабочим инструментом продаж, который застройщик может развивать самостоятельно.
