Цена вёрстки лендинга зависит от того, что нужно реализовать на странице — число блоков само по себе не покажет объём работы, пока неизвестны адаптивы, действия посетителя и способ запуска
Два лендинга могут выглядеть одинаково на скриншоте — крупный заголовок, фотография, описание услуги и кнопка
На первом кнопка скачивает готовый файл, на втором открывает форму и передаёт обращение в систему компании — если оценивать оба только по картинке, важная часть работы останется за кадром
Разберём один учебный лендинг: что попадёт в первоначальную оценку, какие изменения добавят задачи и как запросить у исполнителя сопоставимое предложение
Какие вводные нужны, чтобы оценить лендинг
Для примера возьмём вымышленную страницу ремонта велосипедов — компания подготовила текст, фотографии, перечень работ и документ с условиями
В макете есть первый экран, карточки работ, ответы на вопросы и кнопка «Скачать условия» — предусмотрены широкая и мобильная версии, публикацией занимается разработчик компании
Это исходные условия примера, а не описание клиента KEIVO — ниже будем менять по одному условию и смотреть, что добавляется к работе
Как состав блоков влияет на цену вёрстки
Вместо строки «один лендинг» запишем отдельные результаты — исполнитель сможет указать стоимость по ним или объединить их в своё предложение, сохранив понятный состав
| Часть лендинга | Задача в этом примере | Что будет готово |
|---|---|---|
| Первый экран | Сверстать заголовок, фото и кнопку по двум макетам | Содержание читается на широком и узком экране |
| Карточки работ | Сделать общий компонент и заполнить готовыми текстами | Карточки используют одну сетку и перестраиваются на телефоне |
| Вопросы | Реализовать раскрытие готовых ответов | Ответ открывается мышью, касанием и с клавиатуры |
| Скачивание | Связать кнопку с переданным документом | Открывается актуальный файл с условиями |
| Адаптация | Проверить промежуточные размеры и длинный текст | Блоки не перекрывают друг друга, ссылки доступны |
| Передача | Подготовить исходники и пояснение для разработчика компании | Он может собрать и разместить согласованную версию |
Тексты и фотографии уже готовы, поэтому их создание в этом примере не включено — если у вас вместо материалов стоят заглушки, отдельно назовите того, кто их заменит
Четыре одинаково устроенные карточки и четыре разных по поведению блока — разные задачи — попросите исполнителя отметить, что будет переиспользоваться, а что придётся делать отдельно
Стоимость и оценку трудозатрат заполняет исполнитель после просмотра макета — у строк с неизвестными условиями попросите указать, что нужно выяснить для расчёта
Что происходит после нажатия кнопки
Теперь владелец меняет скачивание на «Записаться на ремонт» — в заявке нужны контакт и описание проблемы
К исходному составу добавляются поля, ошибки, ожидание отправки, обработка данных и проверка получения — уточнить нужно и место получения обращения, например уже действующую систему компании
- Посетитель заполняет поляПодписи объясняют, что вводить, ошибки помогают исправить данные
- Страница отправляет запросНа время ожидания человек видит состояние отправки
- Система принимает данныеОтвет об успехе или ошибке определяет сообщение на странице
- Сотрудник получает обращениеЗаказчик проверяет тестовую запись в выбранном месте получения
В смете недостаточно заменить слово «ссылка» на «форма» — исполнитель должен указать, делает ли он только интерфейс или подключает всю цепочку
Проверка полей в браузере не заменяет проверку на сервере — это ограничение описано в MDN
Если собственного обработчика нет, его создание или выбор сервиса остаётся отдельным решением — существование нарисованной формы не определяет ни способ реализации, ни стоимость подключения
Как будет работать лендинг на телефоне
Изменим второе условие примера: дизайнер передал только широкий экран
Теперь исполнителю нужно предложить порядок блоков, поведение меню, размеры изображений и вид карточек на телефоне — это проектирование недостающей версии, а не только реализация уже принятого решения
В предложении должны появиться два отдельных результата: согласованный мобильный вариант и его вёрстка — иначе заказчик ждёт одну композицию, а разработчик собирает другую по своему усмотрению
Если мобильный макет готов, всё равно остаётся проверка между контрольными размерами — длинное название работы может перенестись, а карточки не должны из-за этого перекрыть кнопку
Что передать вместе с дизайном, разобрано в памятке по подготовке макета
Как сопоставить цену и результат
Для нашего лендинга получились разные варианты заказа — их удобно сопоставить до обсуждения итоговых сумм
| Вариант | Что остаётся от исходного задания | Что нужно добавить к предложению |
|---|---|---|
| Готовые макеты и скачивание | Интерфейс, адаптация, готовый документ | Ничего сверх первоначального списка |
| Вместо файла нужна запись | Те же информационные блоки | Состояния формы, обработка, доставка и проверка результата |
| Нет мобильного дизайна | Содержание и широкий экран | Разработка и согласование мобильных правил |
| Нет своего разработчика | Реализация страницы | Размещение, проверка на домене и передача доступа к результату |
| Материалы ещё готовятся | Структура страницы | Заполнение финальными материалами и повторная проверка изменившихся блоков |
Если нужны сразу несколько изменений, перенесите в запрос все соответствующие строки — они не исключают друг друга
Дайте этот список всем участникам сравнения — тогда различие суммы можно обсуждать вместе с конкретным объёмом, а не пытаться угадать, что каждый включил в слово «лендинг»
Более общий разбор состава сметы есть в статье о стоимости вёрстки сайта
Что проверить перед публикацией
Вёрстку сначала принимают на тестовой версии — готовые тексты и изображения на месте, вопросы раскрываются, документ скачивается, форма проходит успешный и ошибочный сценарии, если она входит в заказ
Попросите включить эти проверки в состав передачи — о замечании полезно писать «после неверного телефона не видно подсказки», а не «форма работает плохо»
В гайде о заказе вёрстки есть пример записи такого замечания и повторной проверки
Кто отвечает за запуск
В исходном примере размещает разработчик компании — если его нет, добавьте к оценке публикацию и проверку публичного адреса
Для замены действующего лендинга также нужен способ вернуться к предыдущей версии при сбое — эту работу нельзя подразумевать только потому, что заказан новый дизайн
Заголовок страницы, описание и разрешение индексации проверяют на рабочем URL — техническая доступность не гарантирует попадание в поиск, но случайный запрет оставлять нельзя
Если содержание выводится скриптами, особенности его обработки Google описаны в документации JavaScript SEO
Как связать лендинг с измерениями
Если нужна аналитика, назовите счётчик и событие отдельной строкой заказа — например, скачивание условий или успешная отправка обращения
Нажатие на кнопку и полученное обращение различаются — для второго нужно проверить и событие, и фактическую доставку, а порядок сбора данных должен соответствовать настройкам сайта и опубликованным условиям
Настройка рекламы, платные сервисы и дальнейшая поддержка имеют свой состав — рядом с разовой работой сохраните отдельный список таких расходов
С чего начать свой расчёт
Откройте макет и составьте список блоков по образцу первой таблицы — затем добавьте действия посетителя, недостающие мобильные решения и того, кто публикует страницу
Неизвестные пункты оставьте вопросами — их можно обсудить до оценки, вместо того чтобы считать включёнными бесплатно
На странице услуги KEIVO описан результат вёрстки — скачайте бриф, чтобы собрать вводные в одном файле
Вопросы о лендинге
Цена считается по количеству блоков?
Количество помогает описать страницу, но не объясняет поведение блоков — повторяющиеся карточки, форма с обработкой и подбор вариантов требуют разной работы, поэтому к списку добавляют действия и состояния
Что можно убрать, чтобы сократить объём?
Начните с функций, без которых посетитель всё ещё сможет решить задачу — например, используйте готовый документ вместо разработки подбора вариантов, если это подходит вашему предложению — изменение нужно отразить и в макете, и в составе работы
Можно гарантировать конверсию готового лендинга?
На обращения влияют предложение, аудитория, источники посещений и обработка заявок — выполнение макета само по себе не определяет будущий коммерческий результат
Источники
- MDN — проверка формы в браузере и на сервере
- Google — основы JavaScript SEO
- W3C — уведомления о результате действия
Технические источники проверены 29 октября 2026 года — учебный разбор оценки подготовлен редакцией KEIVO