Разработка сайта-визитки для строительной компании Баус

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

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

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

Используемая CMS: MODX

Процесс разработки состоял из стандартных этапов:

-  Аналитика и проектирование, в рамках которых мы совместно с заказчиком разработали ТЗ.

-  Прототипы и дизайн – разработаны макеты в соответствии с ТЗ и бренд-буком заказчика.

-  Верстка, интеграция, настройка функционала.

Дизайн и фирменный стиль

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

К выбору цветов подошли с психологической точки зрения.

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

-  Голубой и синий — вызывают доверие и позволяют клиенту более спокойно и обстоятельно выбирать подрядчика.

-  Тёмно-серый — спокойный цвет, который не перетягивает на себя внимание. На этом оттенке приятно выглядит белый текст и иконки. Он не создает напряжение для глаз, как, например, черный.

Главная страница

Эксперты по конверсии и владельцы сайтов отмечают факт: видеоинформация повышает интерес к офферу и лояльность потребителей (больше регистраций, подписок на услуги/сервисы). Поэтому на главной странице было принято решение внедрить кроссбраузерное фоновое видео с превью-изображением.

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

Блок «Услуги компании»

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

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

Блоки «Этапы работ» и «Достижения компании»

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

Блок с реализованными проектами

Дальше — портфолио. Здесь представлены проекты, в которых компания достигла привлекательных результатов

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

Внутренние страницы

Было разработано более 30 макетов, включая адаптивную версию для планшетов и смартфонов.

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

Мобильная версия сайта

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