Процесс внедрения страницы-лендинга на сайт: от макета до релиза

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

Проблема

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

Решение

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

Реализация

Работа проводилась в несколько этапов

1 этап. Подготовка макета

SEO-специалист подготовил подробное ТЗ, а дизайнер отрисовал макет в Figma для трех разрешений: ПК, планшет и мобильные устройства, используя UI-kit.

Отрывок из ТЗ на макет

Скриншот из Figma

Этап 2. Верстка и интеграция на сайт

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

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

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

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

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

Итоги работы

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

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