Разработка
landing page Порта
В «Студию ХОД» обратилась компания «ПОРТА», которая специализируется на автоматике для откатных и распашных ворот. Нашей задачей была разработка landing page под ключ с информацией об услугах компании, возможностью выполнить расчет по услугам и оставить заявку для связи с менеджером.
О компании
ООО «ПОРТА» является сертифицированным дилером систем CAME в Санкт-Петербурге, предоставляет услуги по продаже автоматики для ворот, установке и сервисном обслуживании этого оборудования.
https://www.avtomatika-came.ru/
Сайт “До”: Устаревший дизайн, который нуждался в обновлении;
Структура и функциональные возможности устарели.
https://admass.io — Канада
Задачи проекта
Создать landing page для компании ПОРТА и обратить внимание пользователей на 2 основных типа оборудования: автоматика на откатные и распашные ворота от производителя CAME.
На лендинге клиент хотел показать все доступные варианты продукции с ценами, а также сделать возможность индивидуального подбора комплекта автоматики в зависимости от требований клиента.
Анализ целевой аудитории
Анализ целевой аудитории — неотъемлемая часть работы над проектов. По итогу анализа, а иногда уже и в процессе, приходят новые решения для бизнеса.
Целевая аудитория проекта – мужчины от 27 лет, индивидуальные предприниматели и владельцы бизнеса. Клиенты ценят свое время, и приходят на сайт за конкретными услугами. Это подтолкнуло к решению выполнить дизайн в минималистичном стиле, без отвлекающих внимание деталей.
Разработка прототипа
Одним из важнейших этапов в разработке сайта является прототипирование. Для разработки качественного прототипа дизайнер изучил сайты конкурентов в сфере автоматики для ворот, выполнил аналитику рынка, исследовал целевую аудиторию. В процессе работы было создано около 5 прототипов.
При разработке прототипа сайта-одностраничника мы сделали упор на два вида продукции CAME:
- Автоматика для откатных ворот;
- Оборудование для распашных ворот.
От заказчика поступила просьба сделать онлайн-калькулятор для расчета одного из типов оборудования вместе с монтажом. В прототипе также учитывали расположение других блоков, кнопок, изображений и фрагментов текста.
Лендинг «ПОРТА» не перегружен большим количеством описаний – мы оставили только ту информацию, которая действительно важна для потенциального клиента.
Адаптация сайта
В первую очередь мы разработали дизайн-макет для десктопной версии, поскольку она содержит больше элементов. Во время отрисовки калькулятора было важно учесть все ограничения в мобильной версии. Мы постарались сделать его интуитивно понятным и удобным для пользователя.
Параллельно мы вели работу над адаптивной версией сайта, поскольку около 60-65 % пользователей пользуются интернетом с мобильного телефона. Адаптивность также является важным фактором для поискового продвижения ресурса.
Подбор стиля
Цвета
Основной фон одностраничника – нейтральный белый, а шрифт классический черный, что позволяет быстро считывать все важные данные. Ссылки и кнопки выполнены в классическом голубом цвете.
Типографика
Разработка лендинга
В дизайне чередуются блоки с инфографикой, карточками товаров, текстом и изображениями. На сайте присутствуют реальные фотографии с примерами работ. Кроме того, для повышения доверия пользователей размещен официальный сертификат на продукцию CAME.
Фотография показывает главное преимущство оборудования
Используем простые и понятные иконки
Разработали калькулятор для быстрого и удобного расчета стоимости услуги
На странице представлены 2 вида автоматики и галереи с выполенными работами по установке
Кроме основных услуг, компания так же предоставляет сервис по обслуживанию
Прайс на дополнительные услуги сервиса удобно разбиты по геозонам и отмечены на карте города. Это сразу дает клиенту понять, на какую стоимость ему рассчитывать
Форму подчеркиваем фотографией с воротами и машиной, чтобы клиент обратил внимание
Разработка мобильной версии
Верстка и программирование
После окончательного утверждения макета и дизайна, мы перешли к верстке и программированию калькулятора. Все кнопки лендинга ведут на онлайн-форму, где посетитель может оставить свои контакты. Перед сдачей готового проекта заказчику провели тестирование и убедились, что все формы и калькулятор работают корректно.
По итогу работы
В общей сложности работа над проектом составила 1 месяц. В разработке принимали участие дизайнер и программист. Фотографии для сайта были предоставлены клиентом. Весь остальной контент мы разработали сами.
Результатом стал современный функциональный landing page, полностью отвечающий запросу нашего клиента.
Отзыв от клиента
