# От чего зависит стоимость вёрстки сайта по готовому макету

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

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

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



Вы отправили одну и ту же ссылку на дизайн двум исполнителям и получили разные предложения

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

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

В конце есть бриф, который поможет собрать вводные и сравнивать предложения на один и тот же результат

## Что считать готовым макетом для оценки

У макета должна быть одна актуальная версия, которую видят заказчик и разработчик

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

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

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

Для проверки файла используйте [памятку о подготовке макета к вёрстке](/blog/podgotovit-maket-k-verstke/)


![Генеративная иллюстрация оценки вёрстки: два разных макета сайта на планшетах и схема страниц на столе](/blog/_media/p1-20261029/a11-cover-32d15ebb0e92.webp)

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



## Какие части работы входят в цену

Попросите описать результат каждой строки — название технологии или количество часов без контекста не покажет, что именно вам передадут




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




CMS — система, через которую сотрудники меняют содержание сайта

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

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

## Почему число экранов не равно объёму работы

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

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

Попросите отделить повторяющиеся компоненты от исключений

### Учебный пример

У компании есть общий шаблон услуги и отдельная страница с подбором комплектации

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

Для оценки покажите исполнителю обе части — повторяющийся шаблон и подбор комплектации с его правилами


Что добавить к ссылке на макет

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



## Что влияет на оценку адаптива

Узкий экран — не просто уменьшенная версия широкого

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

Если мобильного макета нет, спросите, кто предлагает правила и кто их принимает

Сам принцип адаптивного оформления описан в [руководстве MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design), а вопросы заказчика разобраны в гайде [о подготовке адаптивного макета](/blog/podgotovit-maket-k-verstke/)

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

## Где заканчивается вёрстка и начинается подключение

У формы есть внешний вид и состояния: пустые поля, ошибка, ожидание и сообщение о результате

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

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

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

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

Границы услуги KEIVO описаны на [странице вёрстки по макету](/services/verstka/)

Если в предложении используется формулировка «под ключ», [уточните состав такого результата](/blog/verstka-sayta-pod-klyuch/) — от неё зависит, какие обязанности останутся у вашей команды

## Как сравнить предложения исполнителей

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

### Разбор двух предложений на один макет

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

Первая команда предлагает вёрстку и архив с кодом, вторая — вёрстку и установку в CMS, через которую менеджер меняет материалы




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




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

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

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


Сообщение, которое можно взять за основу

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



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

### Что вынести за пределы разовой сметы

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

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

## Что может изменить оценку после начала

Причиной может стать новая страница, другой сценарий, изменение содержания или обнаруженное ограничение действующей системы

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

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

Исправление несоответствия принятому макету и новая функция — разные вопросы для обсуждения

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

## Как подготовиться к первой оценке

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

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

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

[Скачать бриф на вёрстку](/materials/brief-na-verstku.md) — в нём есть поля для этих вводных, без отправки заявки

Порядок выбора исполнителя и согласования результата разобран в [гайде о заказе вёрстки](/blog/kak-zakazat-verstku-po-maketu/)

## Вопросы об оценке


### Можно получить точную цену по одному скриншоту?

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



### Готовый макет всегда делает работу дешевле?

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



### Можно начать с одного лендинга?

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



## Источники и границы

Таблицы и учебные примеры подготовлены редакцией KEIVO для сравнения предложений

- [MDN — адаптивное оформление](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design)
- [MDN — проверка данных формы](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation)

Технические источники проверены 29 октября 2026 года