Разработка
landing page Порта

В «Студию ХОД» обратилась компания «ПОРТА», которая специализируется на автоматике для откатных и распашных ворот. Нашей задачей была разработка landing page под ключ с информацией об услугах компании, возможностью выполнить расчет по услугам и оставить заявку для связи с менеджером.

Came

О компании

ООО «ПОРТА» является сертифицированным дилером систем CAME в Санкт-Петербурге, предоставляет услуги по продаже автоматики для ворот, установке и сервисном обслуживании этого оборудования.

https://www.avtomatika-came.ru/

Came

Сайт “До”: Устаревший дизайн, который нуждался в обновлении;
Структура и функциональные возможности устарели.
https://admass.io — Канада

Задачи проекта

Создать landing page для компании ПОРТА и обратить внимание пользователей на 2 основных типа оборудования: автоматика на откатные и распашные ворота от производителя CAME.
На лендинге клиент хотел показать все доступные варианты продукции с ценами, а также сделать возможность индивидуального подбора комплекта автоматики в зависимости от требований клиента.

Анализ целевой аудитории

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

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

Разработка прототипа

Came

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

При разработке прототипа сайта-одностраничника мы сделали упор на два вида продукции CAME:

  • Автоматика для откатных ворот;
  • Оборудование для распашных ворот.

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

Лендинг «ПОРТА» не перегружен большим количеством описаний – мы оставили только ту информацию, которая действительно важна для потенциального клиента.

Came

Адаптация сайта

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

Параллельно мы вели работу над адаптивной версией сайта, поскольку около 60-65 % пользователей пользуются интернетом с мобильного телефона. Адаптивность также является важным фактором для поискового продвижения ресурса.

Подбор стиля

Цвета

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

Типографика

Came

Разработка лендинга

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

Came
Первый экран
Фотография показывает главное преимущство оборудования
Преимущества
Используем простые и понятные иконки
Калькулятор
Разработали калькулятор для быстрого и удобного расчета стоимости услуги
Оборудование
На странице представлены 2 вида автоматики и галереи с выполенными работами по установке
Сервис
Кроме основных услуг, компания так же предоставляет сервис по обслуживанию
Карта
Прайс на дополнительные услуги сервиса удобно разбиты по геозонам и отмечены на карте города. Это сразу дает клиенту понять, на какую стоимость ему рассчитывать
Форма обратной связи
Форму подчеркиваем фотографией с воротами и машиной, чтобы клиент обратил внимание

Разработка мобильной версии

Верстка и программирование

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

По итогу работы

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

Результатом стал современный функциональный landing page, полностью отвечающий запросу нашего клиента.

Came

Отзыв от клиента

Came

Остались вопросы?

С удовольствием проконсультируем Вас!

Заполните форму и наш менеджер свяжется с вами в ближайшее время.

Бесплатная консультация

С удовольствием проконсультируем Вас!

Заполните форму и наш менеджер свяжется с вами в ближайшее время.