Обычно так происходит просто потому, что руки штатных разработчиков заняты платящими клиентами, а не собственным маркетингом. Именно так ко мне и попал этот заказ в 2020–2022 годах, в статусе фрилансера. Демо сайта до сих пор доступно и открыто.
Вёрстка · кейс
Кейс: вёрстка лендинга для веб-студии LAMPA
Забавная деталь этого проекта: заказчик — сама небольшая веб-студия, которая делает сайты и занимается SEO-продвижением для других. Даже профильные компании иногда отдают собственный сайт на аутсорс фрилансеру, а не делают его силами своей команды.
Что нужно было сверстать
Главная страница студии на HTML, CSS и JS — классическая структура сайта веб-студии:
- Хедер с кнопкой «Оставить заявку» и телефоном
- Блок «Кто мы» и услуги (разработка сайтов и SEO-продвижение)
- Блок преимуществ на четырёх иконках
- Процесс работы в шесть шагов — от брифа до тестирования и запуска
- Блок FAQ и форма связи в подвале с повторным призывом оставить заявку
По репозитории проекта — 19 коммитов, соотношение CSS 57% / HTML 42% / JS 1%: упор явно сделан на внешний вид, а не на интерактивную логику.
Что было технически интересным
Кнопка «Оставить заявку» встречается на странице несколько раз — в шапке, в блоке услуг, в футере — и должна выглядеть одинаково узнаваемо в любом месте, при этом не превращаться в навязчивый повтор одного и того же визуального блока. Это стандартная задача для лендинга «под заявку»: конверсионная кнопка должна быть буквально везде, куда может долистать пользователь, но вёрстка должна оставаться разнообразной, а не выглядеть как одна и та же секция, скопированная пять раз.
Блок «Готовый сайт всего за 6 шагов» — нумерованный процесс, который на десктопе обычно раскладывается в горизонтальную линию шагов, а на мобильном должен аккуратно схлопываться в вертикальный список без потери логики нумерации. FAQ-блок собран по тому же принципу, что я использую и на своём сайте сейчас, — вопрос и разворачивающийся ответ, без отдельной JS-библиотеки под аккордеон.
Почему я вспоминаю именно этот кейс
Он хорошо показывает разницу между вёрсткой каталожного сайта (как в кейсе с типографией PrintMSK) и вёрсткой классического лендинга услуг: здесь никакой карусели товаров и загрузки файлов, зато важны повторяющиеся конверсионные блоки, ритм секций «проблема → решение → призыв к действию» и лёгкость, с которой пользователь долистывает страницу целиком, а не бросает на середине.
Нужна вёрстка лендинга с формой заявки?
Расскажите про макет — оценю объём работы и сроки под адаптив и мобильную версию, без обязательств.
Веб-разработчик, Краснодар. Делаю сайты под ключ на Vue/Nuxt и React/Next, вёрстку по макетам из Figma и PSD, сайты на WordPress и SEO-продвижение — сам, без субподрядчиков.
Работаю с 2GIS, Яндекс.Бизнесом, самозанятость оформлена официально с 2024 года. С клиентами по всему Краснодарскому краю и удалённо по России.