Кейс по созданию нового многостраничного сайта для завода металлических конструкций в городе Санкт-Петербург, Колпино. Делимся опытом: предыстория проекта, основные задачи и реализация, от блочной структуры, до результата.

Заказчик

ООО "ЗМК "Модуль" основанное в 2007 году, как производственное подразделение по выпуску сложных очистных сооружений, разрабатываемых одной из ведущих компаний в области очистки сточных вод - ЗАО "Креал". На сегодняшний день завод, получив бесценный опыт в области производства и монтажа высокотехнологичного оборудования, вышел далеко за рамки поставленной перед ним задачи и может предложить огромный спектр работ по изготовлению и монтажу металлоконструкций любой сложности.

Предыстория

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

Основные задачи

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

Реализация. Блочная структура

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

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

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

Реализация. Дизайн

В дизайне были использованы следующие цвета:

  • #fd2018
  • #27211d
  • #eeeded
  • #f8f8f8

Тематика сайта повлияла на дизайн: cтрогие закругления около 3px, четкие элементы и линия ширины. Основным шрифтом стал SF UI Text. На некоторые блоки была добавлена полупрозрачная точечная сетка. Дизайн не пестрит, он подчеркивает деятельность компании, подавая информацию в удобном для понимания виде, позволяет удобно перемещаться по страницам в поиске необходимой информации и акцентирует внимание только на важных элементах, подталкивая пользователя совершить целевое действие, а это именно то, что нужно.

Результат

Главная

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

Главная так же включила в себя блоки в следующем порядке:

  • Услуги (упорядоченные информативные блоки-ссылки).
  • Возможности (перечень основных возможностей компании).
  • Продукция (выполнено по аналогии с блоком услуг).
  • Преимущества (перечень основных преимуществ компании).
  • О нас (краткие сведения о компании).

Далее следуют общие блоки: клиенты и футер.

Услуга

Разумеется, основными страницами на сайте стали именно страницы с конкретной продукцией или услугой. Именно эти страницы будут являться посадочными для рекламной кампании Яндекс Директ (за редким исключением). Выделим некоторые элементы этих страниц:

  • Верхний блок содержит информацию о сроках и стоимости. Имеется возможность быстро вызвать и заполнить форму обратной связи.
  • Основной блок делится на две части: Левая содержит описание с возможностью добавления изображений изготовленной продукции/услуг, сразу после следует блок для быстрого перехода на страницу услуг, продукции и контактов. Правая же часть уместила в себе навигационное меню, сопровождающее пользователя по странице, содержащее в себе услуги или продукцию, в зависимости от страницы. А так же возможность быстро вызвать и заполнить форму обратной связи.

В мобильной версии навигация по услугам и продукции располагается над текстовым полем. Сразу после следует блоки с возможностями и клиентами соответственно.

Контакты

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

Итог

В итоге получили современный сайт, отразивший в себе деятельность компании, нацеленный на клиентов всех уровней. Удобная навигация и высокая информативность, возможность сделать заказ с каждой страницы в нескольких местах, удобная мобильная версия — залог высокой конверсии. Удобная система управления сайтом на основе CMS MODx Revolution.

О компании

Перейти на сайт.