Разработка сайта-визитки для инженерно-строительной компании Баус
ЗаказчикГруппа Компаний Баус (строительство зданий, сооружений, дорог, мостов и трубопроводов Южного Федерального округа).ЗадачаРазработать под ключ корпоративный сайт с полным перечнем услуг, который будет являться полноценным представительством компании в Интернете.
Кто заказчик
«БАУС» — группа компаний, предоставляющая услуги по дорожно-мостовому проектированию, архитектурно-строительному проектированию, монтажу инженерных сетей и коммуникации, землеустройству и кадастровым работам, строительному контролю и инженерным изысканиям.
Задачи и особенности проекта
Специфика узконаправленная, сложная. Нам предстояло решить задачу — создать для ребят корпоративный сайт, который будет интересен обычному пользователю.
Сайт должен был иметь разветвленную структуру с большим количеством информационного контента, который в дальнейшем потребуется для его продвижения в поисковой выдаче. При этом контент не должен быть сухим и безжизненным. Важно соблюсти баланс и сделать понятный и информативный сайт-визитку.
Приступаем к созданию сайта
Используемая CMS: MODX
Процесс разработки состоял из стандартных этапов:
Аналитика и проектирование, в рамках которых мы совместно с заказчиком разработали ТЗ.
Прототипы и дизайн — разработаны макеты в соответствии с ТЗ и бренд-буком заказчика.
Верстка, интеграция, настройка функционала.
Дизайн и фирменный стиль
Целевая аудитория компании — не всегда технически продвинутые пользователи, поэтому мы использовали проверенные интерфейсные решения и классические цвета и шрифты. Пользование сайтом должно быть максимально комфортным.
К выбору цветов подошли с психологической точки зрения.
Основной цвет сайта — белый. Это классическое решение, которое позволяет легко доносить до клиента информацию и делает изучение текстов более легким.
Голубой и синий — вызывают доверие и позволяют клиенту более спокойно и обстоятельно выбирать подрядчика.
Тёмно-серый — спокойный цвет, который не перетягивает на себя внимание. На этом оттенке приятно выглядит белый текст и иконки. Он не создает напряжение для глаз, как, например, черный.
Структура сайта и интересные фишки
Главная страница
Эксперты по конверсии и владельцы сайтов отмечают факт: видеоинформация повышает интерес к офферу и лояльность потребителей (больше регистраций, подписок на услуги/сервисы). Поэтому на главной странице было принято решение внедрить кроссбраузерное фоновое видео с превью-изображением.
Видео решает такую важную задачу, как подача основной информации + видеоряд. Это позволяет задействовать ассоциативное свойство памяти. Клиент видит привычные образы из своей жизни с информацией, которую мы хотим ему донести, тем самым повышая доверие к компании. Также на главной странице для удобства пользователя была размещена поисковая строка.
Блок «Услуги компании»
Основным акцентом на сайте должен был выступить визуально понятный список услуг. За основу мы взяли композицию с круговой диаграммой. А чтобы макет не выглядел слишком «просто», добавили необычное решение — генерируемая в реальном времени анимация иконок. В итоге получилось интерактивное представление списка услуг.
С помощью такого интерактивного элемента услуги подаются более интересно, и клиент запоминает эту «фишку». Также был анимирован переход к описанию услуги и обратно. В мобильной версии данный функционал работает в упрощенной форме. Это сделано для того, чтобы не нагружать сайт и не увеличивать скорость загрузки.
Блоки «Этапы работ» и «Достижения компании»
Раздел «Этапы работ» нужен, чтобы покупатель представлял стадии работы и понимал, что его ждет после заявки или оплаты. Ниже — блок с достижениями, перейдя по которым можно посмотреть кейсы в необходимой отрасли. Этот раздел поможет пользователю быстро познакомиться с опытом компании в том или ином направлении. Здесь — чем больше точных цифр и фактов, тем лучше.
Блок с реализованными проектами
Дальше — портфолио. Здесь представлены проекты, в которых компания достигла привлекательных результатов
Блоки, без которых никуда
Чтобы пользователь мог поближе познакомиться с компанией, убедиться в ее надежности и профессионализме, мы добавили разделы «Наша команда» и «Благодарности и рекомендации» с отзывами от благодарных клиентов.
Внутренние страницы
Было разработано более 30 макетов, включая адаптивную версию для планшетов и смартфонов.
Можно было ограничится макетами страниц при основном разрешении, а адаптивную версию сделать на этапе вёрстки, но для более точного воплощения идеи мы собрали макеты на адаптивные версии, чтобы уже на основании них реализовать смещение блоков при адаптации. Так, у клиента было четкое представление, какой продукт он получит в итоге.
Мобильная версия сайта
Результаты
Несмотря на узконаправленную специфику ниши, нам удалось разработать корпоративный сайт с полноценным списком услуг — удобный, лаконичный и понятный. Главная задача выполнена: мы сделали хороший информативный, но при этом «сочный» сайт-визитку для инженерно-строительной компании.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
