Сайт строительной компании СтройХаус

Описание

Новый сайт для компании по строительству загородных домов: от UX и структуры
до дизайн-системы и подготовки макета к вёрстке.

ЗАДАЧА
Разработать сайт, который станет полноценной точкой контакта в воронке
продаж. Старый сайт работал медленно, имел слабую структуру и плохо
индексировался в поиске. Нужен был сайт с нуля.

КОНТЕКСТ
У компании развитые соцсети — там клиенты знакомятся с брендом и формируют
первое впечатление. Сайт продолжает этот путь: человек изучает проекты,
услуги, отзывы, детали строительства и принимает решение обратиться. Сайт
должен был стать не только маркетинговым инструментом, но и удобным местом
сбора всей информации о компании. Старый сайт с этой ролью не справлялся и
снижал эффективность воронки.

БИЗНЕС-ЗАДАЧИ САЙТА
- Повышать доверие
- Презентовать услуги
- Информировать посетителей
- Отвечать на вопросы клиента
- Привлекать обращения из поиска
- Конвертировать посетителей в заявки

АНАЛИЗ И РЕШЕНИЯ
Начали с брифинга — разобрали бизнес компании, аудиторию, услуги и
технические требования. Конкурентный анализ показал проблему: сайты
строительных компаний часто выглядят хорошо, но не дают полезной информации и
понятного следующего шага — человек теряется и уходит. Поэтому сделали акцент
не только на визуале, но и на информативности, структуре и навигации.

КЛЮЧЕВАЯ ИДЕЯ
Сайт как инструмент принятия решения, а не презентация компании. Структуру
построили вокруг сценария клиента:
- понять, чем занимается компания
- изучить проекты
- сравнить варианты
- посмотреть отзывы
- разобраться в дополнительных услугах
- перейти к консультации или посещению выставочного дома

ВИЗУАЛЬНОЕ РЕШЕНИЕ
Выбрали классические паттерны навигации, понятные любой аудитории, вместо
ультрасовременного дизайна — так сайтом легче пользоваться. Увеличили базовый
размер шрифта для удобства чтения с любых экранов.

ЧТО БЫЛО СДЕЛАНО
- Главная страница на 12 экранов
- Каталог проектов с переключением между категориями — дома, бани, гаражи —
без перехода в отдельные разделы
- Кейсы вместо галереи: задача клиента, особенности проекта, решения,
результат
- Отзывы со ссылками на первоисточники (Яндекс, Google, 2ГИС) — клиент может
проверить их подлинность
- Дополнительные услуги (беседки, ландшафтный дизайн, автополив) в отдельном
блоке с переходом на подробные страницы
- Футер с быстрым доступом к контактам и соцсетям
- Дизайн-система
- Проект подготовлен к вёрстке

МОБИЛЬНАЯ АДАПТАЦИЯ
Сделал компьютерную версию первично (Desktop First) и как самостоятельный
дизайн — по просьбе клиента, чтобы десктоп-версия не выглядела как растянутая
мобильная. Сетку и размеры элементов заложил с учётом адаптации, поэтому
мобильная версия потребовала минимальных правок.

ПОДГОТОВКА К РАЗРАБОТКЕ
После утверждения дизайна передал проект разработчику. В Figma собрал
дизайн-систему с компонентами и состояниями, структурировал и переименовал
элементы для удобной ориентации в макете. Сложных анимаций на сайте нет; для
микроанимаций подготовил каталог со скоростью и примерами поведения.
Разработчик получил структурированный проект, готовый к вёрстке, а не набор
разрозненных экранов.

Презентация проекта