Сколько стоит вёрстка сайта по макету и от чего зависят сроки
Один из первых вопросов на созвоне — «а сколько это будет стоить и как быстро сделаете?». Честный ответ — «зависит», и это не отговорка. Разложу по полочкам, из чего на самом деле складывается цена и срок, чтобы вы могли прикинуть бюджет ещё до того, как отправите файл на оценку.
Вадим ЛукьянцевВеб-разработчик, Краснодар · 5 минут на чтение
От чего зависит стоимость вёрстки сайта по макету
Цена почти не привязана к тому, в каком редакторе сделан дизайн — Figma, PSD или что-то ещё почти не влияет на итоговую сумму. Гораздо сильнее на неё влияют другие вещи:
Количество уникальных экранов и шаблонов — одностраничник с 6 блоками и интернет-магазин с каталогом и корзиной, это принципиально разный объём работы
Сложность интерактивных элементов — кастомные слайдеры, формы с валидацией, анимации при скролле увеличивают и срок, и стоимость
Глубина адаптива — проработка не только десктопа и мобильного, но и промежуточных разрешений — отдельный пласт работы
Состояние макета — готовая система отступов и названные текстовые стили экономят часы, хаотичный макет означает, что часть решений придётся додумывать
Чёткость технического задания — меньше созвонов на уточнения и меньше риска, что задача «поплывёт» в процессе
Объём правок после сдачи — без оговорённого количества итераций доработки могут растянуть проект на недели
Фиксированная цена или почасовая оплата — что выбрать
Фиксированная цена подходит, когда макет полностью готов и объём работы понятен заранее по брифу — тогда можно точно оценить проект целиком, а заказчику удобно планировать бюджет без сюрпризов.
Почасовая оплата логичнее, если проект открытый: макет ещё дорабатывается по ходу, задача может измениться, или речь о доработке существующего кода. Здесь фиксированная цена вынуждала бы закладывать запас на неопределённость — в итоге вышло бы дороже для заказчика.
На практике для типового проекта с готовым макетом чаще беру фиксированную цену — заказчику так спокойнее. Предоплата обычно составляет часть от суммы, остаток — по факту сдачи.
Что удорожает вёрстку, а что помогает сэкономить
Удорожает: отсутствие мобильной версии в макете, нечёткое техническое задание, правки без ограничения по количеству итераций, срочность — сжатые сроки почти всегда стоят дороже обычного темпа работы.
Помогает сэкономить: заранее подготовленная система компонентов — кнопки, карточки, поля форм переиспользуются, а не верстаются с нуля под каждый экран; готовые тексты вместо плейсхолдеров; чёткий список приоритетов — что критично для запуска, а что можно доделать после.
Мини-кейс: был проект, где изначально озвучили фикс на лендинг из 7 блоков — макет выглядел завершённым. По факту выяснилось, что мобильной версии нет вообще, состояния кнопок не проработаны, а часть текстов — плейсхолдеры вдвое короче реального содержания. Каждый пункт по отдельности — мелочь, но вместе они добавили к сроку ещё половину от изначальной оценки. Сюрприз не был неприятным только потому, что предупредил об этом сразу, как заметил пробелы — до начала работы.
Сроки вёрстки сайта: сколько закладывать по факту
Ориентировочно, если макет уже готов и вопросов по нему нет:
Лендинг на 5-8 блоков — от трёх до семи рабочих дней вместе с адаптивом и проверкой
Многостраничный сайт с 3-5 уникальными шаблонами — от полутора до трёх недель
Интернет-магазин с каталогом и личным кабинетом — от трёх недель, в зависимости от количества нестандартных экранов
Эти сроки — не жёсткий прайс, а ориентир: точную цену вёрстки сайта по макету исполнитель называет уже после того, как посмотрит файл целиком.
Как самому прикинуть примерный бюджет до созвона с исполнителем
Посчитайте количество уникальных экранов в макете — не общее число страниц, а именно уникальных по структуре
Отметьте, есть ли нестандартные интерактивные элементы — сложные формы, калькуляторы, кастомные анимации
Проверьте, продумана ли мобильная версия хотя бы для ключевых экранов
Подумайте, сколько итераций правок вам действительно нужно — стоит зафиксировать это в договорённостях ещё до старта
Такая прикидка не заменит точную оценку от исполнителя, но поможет понимать порядок цифр и не удивляться, если бюджет окажется выше первоначальных ожиданий из-за незамеченных нюансов макета.
Что обычно входит в стоимость, а что оговаривается отдельно
В базовую стоимость обычно входит: сама вёрстка всех согласованных экранов, адаптив под основные ширины, проверка в нескольких браузерах, передача исходников. Отдельно чаще обсуждается: интеграция с CMS или бэкендом, подключение аналитики и форм с отправкой на почту, доработки уже после приёмки, гарантийная поддержка на случай, если после запуска что-то отобразится некорректно на нетипичном устройстве.
Есть макет и нужна оценка стоимости?
Посмотрю макет и назову точный срок и цену под ваш проект — бесплатная оценка, без обязательств.
Можно ли получить точную цену без макета, просто по описанию? Можно получить только вилку — «от и до». Точная цена вёрстки сайта по макету называется после того, как исполнитель увидит файл целиком.
Что будет, если бюджет ограничен, а макет сложный? Обычно ищем компромисс: часть блоков можно упростить без потери сути дизайна, часть интерактивных элементов сделать во второй итерации после запуска базовой версии.
Стоит ли экономить на вёрстке, выбирая самого дешёвого исполнителя? Экономия на входе часто оборачивается доплатой позже — если код придётся переделывать из-за качества или отсутствия адаптива.
Вадим ЛукьянцевОб авторе — нажмите, чтобы раскрыть
Веб-разработчик, Краснодар. Делаю сайты под ключ на Vue/Nuxt и React/Next, вёрстку по макетам из Figma и PSD, сайты на WordPress и SEO-продвижение — сам, без субподрядчиков.
Работаю с 2GIS, Яндекс.Бизнесом, самозанятость оформлена официально с 2024 года. С клиентами по всему Краснодарскому краю и удалённо по России.
