Вёрстка сайта по готовому дизайн-макету: сколько стоит и что входит

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

Единица расчёта — уникальный экран, а не страница

Первая ошибка в брифах — считать вёрстку «по страницам». Страница «Услуги» с одинаковыми карточками — это один макет компонента, повторённый 10 раз, а не 10 уникальных экранов. Подрядчик считает не количество страниц сайта, а число уникальных состояний интерфейса: главный экран, блок с формой, карточка каталога, страница 404, попап подтверждения. Если у вас 12 страниц, но 7 из них собраны из одних и тех же блоков в разном порядке — цена будет ближе к вёрстке 5-6 уникальных экранов плюс сборка остальных из готовых компонентов.

По рынку ориентир такой: лендинг до 6 экранов — от 5 900 ₽, многостраничный сайт с уникальной структурой — от 12 900 ₽, один отдельный экран или крупный блок вне общего пакета — от 1 500 ₽. Разброс по рынку в целом шире — от 3 000 ₽ за простую посадочную до 60-70 тысяч за крупный корпоративный сайт с десятками экранов, — и разница почти всегда объясняется именно числом уникальных состояний интерфейса, а не «сложностью» в общем смысле.

Практический вывод для брифа: прежде чем спрашивать цену, посчитайте сами, сколько в макете действительно разных экранов, а сколько — повторы с другим текстом. Это сразу отсекает половину недопонимания на старте.

Адаптивность: сколько контрольных точек оплачено по умолчанию

Адаптив в 2026 году — это не опция, а часть базовой вёрстки почти у всех подрядчиков. Вопрос не «будет ли адаптив», а сколько контрольных точек (breakpoints) в него входит по умолчанию. Стандартный набор — три точки: смартфон (360-428 px), планшет (768-1024 px) и десктоп (от 1280 px). Если в макете нет отдельно нарисованной мобильной версии, добросовестный исполнитель адаптирует дизайн сам и согласует спорные экраны с заказчиком — это тоже входит в стандартную цену, но время на согласование увеличивает срок на день-два.

А вот что почти никогда не входит по умолчанию:

• Промежуточные точки под конкретные устройства заказчика (например, отдельная раскладка под iPad mini или под широкий монитор 1920+) — обычно доплата 15-25% к стоимости экрана;
• Адаптация под ландшафтную ориентацию мобильных устройств отдельно от портретной;
• Полноценная мобильная версия сложных интерактивных блоков (карты, калькуляторы, многошаговые формы) — здесь верстальщик фактически рисует альтернативную раскладку, а не просто «сжимает» десктопную.

Если в макете указаны только desktop и mobile, а планшетную версию дизайнер не рисовал, спросите подрядчика прямо: адаптация под 768 px входит в цену или это отдельная работа. Экономит один звонок на старте и один спор при сдаче.

Анимации и интерактив: где проходит граница «включено» / «доплата»

Базовые интерактивные элементы — слайдеры, аккордеоны, табы, модальные окна, простые hover-эффекты на кнопках — как правило, входят в стоимость экрана: без них сайт просто не работает как задумано в макете. А вот сложная анимация — это отдельная статья расходов, потому что время на неё не линейно зависит от «одного экрана».

Что обычно оценивается и оплачивается отдельно:

• Анимации при скролле (parallax, появление блоков, счётчики с отсчётом) — от 1 000 до 3 000 ₽ за блок, в зависимости от сложности;
• Кастомные SVG-анимации и иллюстрации в движении — от 2 000 ₽ за элемент, часто больше, если нужна синхронизация нескольких слоёв;
• Сложные переходы между состояниями интерфейса (например, анимированный переход карточки в развёрнутый вид) — считаются как отдельный «виртуальный экран»;
• Видео-фоны и их адаптация под мобильные устройства (замена на статичное изображение или облегчённый формат) — отдельная строка, потому что требует ручной оптимизации веса.

Разумный подход при брифовании — прикладывать к макету не просто картинки, а ссылку на прототип с анимациями (Figma prototype, Principle, After Effects-референс). Без этого подрядчик либо занижает цену и потом просит доплату, либо закладывает анимации «с запасом», и вы переплачиваете за то, что могли сделать проще.

Что подрядчики почти всегда выносят за рамки базовой вёрстки

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

• Вёрстка email-рассылок. Даже если в макете есть шаблон письма, его нельзя сверстать теми же приёмами, что и сайт: Outlook и часть почтовых клиентов не поддерживают Flexbox и Grid, поэтому письма верстаются табличной вёрсткой на инлайн-стилях — это отдельная технология и отдельная проверка в 15-20 почтовых клиентах. Цена одного адаптивного email-шаблона — обычно от 3 000 до 8 000 ₽ за письмо, в зависимости от количества динамических блоков.
• Посадка на CMS. Готовая HTML/CSS-вёрстка и работающий сайт на WordPress или другой CMS — разные результаты. Натяжка вёрстки на тему WordPress с редактируемыми блоками в админке стоит отдельно — от 6 900 ₽, а полный пакет «вёрстка + CMS под ключ» — от 29 900 ₽.
• Настройка форм с интеграциями. Верстается форма в рамках базовой цены, а вот отправка заявок на почту, в Telegram или в CRM, антиспам-защита и валидация полей — отдельная позиция, обычно от 1 500 до 3 000 ₽.
• Оптимизация скорости под конкретные метрики. Базовая вёрстка включает сжатие изображений и минификацию — этого обычно достаточно для 80-90 баллов PageSpeed. Если нужна гарантия 95+ или Core Web Vitals «в зелёной зоне» — это отдельная работа с профилированием, от 2 900 ₽.
• Кроссбраузерное тестирование сверх стандартного набора. По умолчанию проверяют Chrome, Safari, Firefox, Edge и Яндекс Браузер. Поддержка устаревших версий (например, старого Safari на iOS) — отдельная договорённость, потому что часто требует полифиллов и упрощения части эффектов.

Ни один из этих пунктов не является «обманом» со стороны исполнителя — это разные технологии и разное время на выполнение. Проблема возникает только тогда, когда состав работ не проговорён на старте.

Пример расчёта: от макета к смете

Возьмём условный кейс: у клиента корпоративный сайт на 9 страниц, из которых 4 экрана уникальны (главная, каталог, карточка услуги, контакты), остальные 5 собраны из тех же блоков. В макете есть простые hover-анимации, но нет скролл-эффектов. Адаптив нарисован для десктопа и мобильного, планшетной версии нет. Нужна форма с отправкой в Telegram и посадка на WordPress.

Смета в этом случае обычно складывается так: вёрстка многостраничного сайта — от 12 900 ₽ (покрывает 4 уникальных экрана и сборку остальных из готовых блоков), адаптация под планшет — доплата к каждому уникальному экрану, форма с отправкой в Telegram — от 1 900 ₽, посадка на WordPress — от 6 900 ₽. Итог — в районе 22-25 тысяч рублей, а не «от 12 900 ₽», как можно было бы прочитать в рекламном объявлении. Это нормальная практика: базовая цена в прайсе — это цена входа для самого простого случая, а не потолок сложного проекта.

Практический вывод: как формулировать бриф, чтобы цена не «поплыла»

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

1. Посчитайте сами число уникальных экранов в макете — не страниц, а именно уникальных состояний интерфейса.
2. Проверьте, есть ли в макете отдельная мобильная версия, и если нет — заранее решите, готовы ли вы согласовывать спорные адаптации по ходу работы.
3. Приложите прототип или референс с анимациями, если они важны — «оживить по вкусу верстальщика» почти всегда даёт не тот результат, который вы представляли.
4. Явно перечислите, что нужно кроме вёрстки страниц сайта: email-шаблоны, посадка на CMS, интеграция форм, кроссбраузерная поддержка старых устройств.
5. Попросите смету с разбивкой по позициям, а не одной итоговой цифрой — так сразу видно, за что вы платите и что можно исключить, если бюджет ограничен.

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