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

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

В этой статье

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

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

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

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

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

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

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

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

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

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

Для проверки файла используйте памятку о подготовке макета к вёрстке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Браузерная проверка полей не заменяет проверку на сервере — это ограничение прямо отмечено в документации MDN по формам

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

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

Границы услуги KEIVO описаны на странице вёрстки по макету

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Порядок выбора исполнителя и согласования результата разобран в гайде о заказе вёрстки

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

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

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

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

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

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

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

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

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

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

Сохраните план перед обсуждением проекта

Вернуться в журнал