Сверстали HTML на Bootstrap 5 по Figma-макету.
Лендинг по макету заказчика из Figma
Верстка лендинга по Figma-макету на Bootstrap 5 с адаптивной версией, калькулятором и формами для запуска таргетированной рекламы.
01 · Задача клиента
С чем пришли
Что было неудобно
Заказчик предоставил Figma-макет главной страницы без мобильной версии. Нужно было сверстать лендинг, адаптировать его под мобильные экраны и запустить на CMS MODX.
- Макет был только для основной версии страницы
- Нужна была адаптивная версия без отдельного дизайна
- Лендинг запускался под платный трафик
Где терялись данные
До запуска сайта клиенту не хватало понятной структуры, посадочных страниц и интерфейсов, которые помогают посетителю выбрать услугу или товар и оставить заявку.
Кто участвовал в процессе
- Владелец бизнеса
- Менеджер проекта
- Дизайнер
- Разработчик
02 · Решение
Что сделали
Доработали мобильную версию на основе опыта и структуры страницы.
Развернули чистую CMS MODX на хостинге заказчика.
03 · Схема процесса
Как теперь идут данные
Бизнес-задача → структура → интерфейс → CMS → заявки
Задача
ниша · услуга · товары
Структура
разделы · страницы
Интерфейс
дизайн · адаптив
CMS
контент · формы
SEO-основа
запросы · посадочные
Запуск
заявки · трафик
04 · Результат
Что изменилось
Макет перенесён в рабочий сайт
Лендинг стал доступен на CMS, а не остался статичным дизайном.
Добавлена мобильная версия
Страница адаптирована для трафика с разных устройств.
Формы и калькулятор поддерживают заявку
Интерактивные блоки помогают посетителю перейти к обращению.
05 · Стек
Технологии и системы
- MODX
- PHP
- HTML/CSS
- JavaScript
- SEO-структура
Интерфейс
Как это выглядит
Хотите похожий процесс?
Расскажите, как задача устроена сейчас, — предложим первый рабочий этап без лишней системы.