# Стоимость вёрстки лендинга: что учесть в оценке и запуске

От чего зависит цена вёрстки лендинга: содержание, блоки, адаптив, действия и подключения — как согласовать состав и принять результат

Автор: Редакция KEIVO
Дата публикации: 2026-10-29
Обновлено: 2026-10-29
Канонический URL: https://keivo.ru/blog/verstka-lendinga/

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



Два лендинга могут выглядеть одинаково на скриншоте — крупный заголовок, фотография, описание услуги и кнопка

На первом кнопка скачивает готовый файл, на втором открывает форму и передаёт обращение в систему компании — если оценивать оба только по картинке, важная часть работы останется за кадром

Разберём один учебный лендинг: что попадёт в первоначальную оценку, какие изменения добавят задачи и как запросить у исполнителя сопоставимое предложение




## Какие вводные нужны, чтобы оценить лендинг

Для примера возьмём вымышленную страницу ремонта велосипедов — компания подготовила текст, фотографии, перечень работ и документ с условиями

В макете есть первый экран, карточки работ, ответы на вопросы и кнопка «Скачать условия» — предусмотрены широкая и мобильная версии, публикацией занимается разработчик компании

Это исходные условия примера, а не описание клиента KEIVO — ниже будем менять по одному условию и смотреть, что добавляется к работе


![Генеративная иллюстрация лендинга: первый экран и структура одностраничного сайта на ноутбуке](/blog/_media/p1-20261029/a14-cover-5e3cf3d2c0ee.webp)

Генеративная иллюстрация KEIVO — вымышленные интерфейсы, не клиентский проект



## Как состав блоков влияет на цену вёрстки

Вместо строки «один лендинг» запишем отдельные результаты — исполнитель сможет указать стоимость по ним или объединить их в своё предложение, сохранив понятный состав




| Часть лендинга | Задача в этом примере | Что будет готово |
|---|---|---|
| Первый экран | Сверстать заголовок, фото и кнопку по двум макетам | Содержание читается на широком и узком экране |
| Карточки работ | Сделать общий компонент и заполнить готовыми текстами | Карточки используют одну сетку и перестраиваются на телефоне |
| Вопросы | Реализовать раскрытие готовых ответов | Ответ открывается мышью, касанием и с клавиатуры |
| Скачивание | Связать кнопку с переданным документом | Открывается актуальный файл с условиями |
| Адаптация | Проверить промежуточные размеры и длинный текст | Блоки не перекрывают друг друга, ссылки доступны |
| Передача | Подготовить исходники и пояснение для разработчика компании | Он может собрать и разместить согласованную версию |




Тексты и фотографии уже готовы, поэтому их создание в этом примере не включено — если у вас вместо материалов стоят заглушки, отдельно назовите того, кто их заменит

Четыре одинаково устроенные карточки и четыре разных по поведению блока — разные задачи — попросите исполнителя отметить, что будет переиспользоваться, а что придётся делать отдельно

Стоимость и оценку трудозатрат заполняет исполнитель после просмотра макета — у строк с неизвестными условиями попросите указать, что нужно выяснить для расчёта




## Что происходит после нажатия кнопки

Теперь владелец меняет скачивание на «Записаться на ремонт» — в заявке нужны контакт и описание проблемы

К исходному составу добавляются поля, ошибки, ожидание отправки, обработка данных и проверка получения — уточнить нужно и место получения обращения, например уже действующую систему компании




- Посетитель заполняет поля Подписи объясняют, что вводить, ошибки помогают исправить данные

- Страница отправляет запрос На время ожидания человек видит состояние отправки

- Система принимает данные Ответ об успехе или ошибке определяет сообщение на странице

- Сотрудник получает обращение Заказчик проверяет тестовую запись в выбранном месте получения


Учебная схема KEIVO — работы, которые добавились вместо ссылки на файл





В смете недостаточно заменить слово «ссылка» на «форма» — исполнитель должен указать, делает ли он только интерфейс или подключает всю цепочку

Проверка полей в браузере не заменяет проверку на сервере — это ограничение описано в [MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation)




Если собственного обработчика нет, его создание или выбор сервиса остаётся отдельным решением — существование нарисованной формы не определяет ни способ реализации, ни стоимость подключения

## Как будет работать лендинг на телефоне

Изменим второе условие примера: дизайнер передал только широкий экран

Теперь исполнителю нужно предложить порядок блоков, поведение меню, размеры изображений и вид карточек на телефоне — это проектирование недостающей версии, а не только реализация уже принятого решения

В предложении должны появиться два отдельных результата: согласованный мобильный вариант и его вёрстка — иначе заказчик ждёт одну композицию, а разработчик собирает другую по своему усмотрению

Если мобильный макет готов, всё равно остаётся проверка между контрольными размерами — длинное название работы может перенестись, а карточки не должны из-за этого перекрыть кнопку

Что передать вместе с дизайном, разобрано в [памятке по подготовке макета](/blog/podgotovit-maket-k-verstke/)

## Как сопоставить цену и результат

Для нашего лендинга получились разные варианты заказа — их удобно сопоставить до обсуждения итоговых сумм




| Вариант | Что остаётся от исходного задания | Что нужно добавить к предложению |
|---|---|---|
| Готовые макеты и скачивание | Интерфейс, адаптация, готовый документ | Ничего сверх первоначального списка |
| Вместо файла нужна запись | Те же информационные блоки | Состояния формы, обработка, доставка и проверка результата |
| Нет мобильного дизайна | Содержание и широкий экран | Разработка и согласование мобильных правил |
| Нет своего разработчика | Реализация страницы | Размещение, проверка на домене и передача доступа к результату |
| Материалы ещё готовятся | Структура страницы | Заполнение финальными материалами и повторная проверка изменившихся блоков |




Если нужны сразу несколько изменений, перенесите в запрос все соответствующие строки — они не исключают друг друга


Пример запроса оценки

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



Дайте этот список всем участникам сравнения — тогда различие суммы можно обсуждать вместе с конкретным объёмом, а не пытаться угадать, что каждый включил в слово «лендинг»

Более общий разбор состава сметы есть в [статье о стоимости вёрстки сайта](/blog/stoimost-verstki-sayta/)

## Что проверить перед публикацией

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

Попросите включить эти проверки в состав передачи — о замечании полезно писать «после неверного телефона не видно подсказки», а не «форма работает плохо»

В [гайде о заказе вёрстки](/blog/kak-zakazat-verstku-po-maketu/) есть пример записи такого замечания и повторной проверки

## Кто отвечает за запуск

В исходном примере размещает разработчик компании — если его нет, добавьте к оценке публикацию и проверку публичного адреса

Для замены действующего лендинга также нужен способ вернуться к предыдущей версии при сбое — эту работу нельзя подразумевать только потому, что заказан новый дизайн

Заголовок страницы, описание и разрешение индексации проверяют на рабочем URL — техническая доступность не гарантирует попадание в поиск, но случайный запрет оставлять нельзя

Если содержание выводится скриптами, особенности его обработки Google описаны в [документации JavaScript SEO](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)

## Как связать лендинг с измерениями

Если нужна аналитика, назовите счётчик и событие отдельной строкой заказа — например, скачивание условий или успешная отправка обращения

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

Настройка рекламы, платные сервисы и дальнейшая поддержка имеют свой состав — рядом с разовой работой сохраните отдельный список таких расходов

## С чего начать свой расчёт

Откройте макет и составьте список блоков по образцу первой таблицы — затем добавьте действия посетителя, недостающие мобильные решения и того, кто публикует страницу

Неизвестные пункты оставьте вопросами — их можно обсудить до оценки, вместо того чтобы считать включёнными бесплатно

На [странице услуги KEIVO](/services/verstka/) описан результат вёрстки — [скачайте бриф](/materials/brief-na-verstku.md), чтобы собрать вводные в одном файле

## Вопросы о лендинге


### Цена считается по количеству блоков?

Количество помогает описать страницу, но не объясняет поведение блоков — повторяющиеся карточки, форма с обработкой и подбор вариантов требуют разной работы, поэтому к списку добавляют действия и состояния



### Что можно убрать, чтобы сократить объём?

Начните с функций, без которых посетитель всё ещё сможет решить задачу — например, используйте готовый документ вместо разработки подбора вариантов, если это подходит вашему предложению — изменение нужно отразить и в макете, и в составе работы



### Можно гарантировать конверсию готового лендинга?

На обращения влияют предложение, аудитория, источники посещений и обработка заявок — выполнение макета само по себе не определяет будущий коммерческий результат



## Источники

- [MDN — проверка формы в браузере и на сервере](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation)
- [Google — основы JavaScript SEO](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)
- [W3C — уведомления о результате действия](https://www.w3.org/WAI/tutorials/forms/notifications/)

Технические источники проверены 29 октября 2026 года — учебный разбор оценки подготовлен редакцией KEIVO