Вопрос «сколько времени займёт вёрстка страницы» я слышу на брифе чаще любого другого. Отвечаю обычно вилкой, а не одной цифрой: простой лендинг на конструкторе я сдаю за 1-2 дня, страница интернет-магазина с адаптивом под три экрана - за 4-7 дней, а раздел с калькулятором доставки СДЭК и оплатой через эквайринг Т‑Банка может растянуться на полторы-две недели. Сроки вёрстки страницы зависят не столько от количества экранов в макете, сколько от числа интеграций, состояний интерфейса и требований к точности повторения дизайна - ниже раскладываю это на конкретных цифрах из своей практики.
От чего зависит время вёрстки страницы
Когда клиент присылает макет и спрашивает срок, я смотрю не на «сколько это в пикселях», а на пять параметров.
Первый - количество уникальных блоков. Лендинг с повторяющимися карточками услуг верстается быстрее, чем страница, где каждый третий блок сделан по-своему: своя сетка, своя анимация, свой набор шрифтов.
Второй - глубина адаптива. Если в Figma есть версии для десктопа, планшета и мобильного - я просто переношу решения дизайнера. Если есть только десктоп, часть решений по адаптиву приходится придумывать самому, и это плюс 20-30% времени.
Третий - количество состояний интерфейса: hover, active, disabled, пустые состояния списков, ошибки валидации форм. В макете они часто не нарисованы вообще, а на сайте без них не обойтись.
Четвёртый - интеграции. Форма, которая просто показывает «спасибо», верстается за час. Форма, которая пишет лид в CRM, дёргает виджет СДЭК для расчёта доставки и открывает окно оплаты Т‑Банка, - это уже не вёрстка, а мини-разработка внутри страницы.
Пятый - требования к точности. «Плюс-минус похоже» и «пиксель в пиксель по Figma с точным line-height и отступами» - это разные по времени задачи, разница может доходить до полутора раз.
Сколько верстается страница: сроки по типам
Ориентировочные цифры, которые я использую при оценке - они не универсальны, но дают порядок величин.
| Тип страницы | Срок вёрстки | Что входит в эту оценку |
|---|---|---|
| Одноэкранный лендинг (оффер + форма) | 1 день | Один блок, простая форма, базовый адаптив |
| Многоблочный лендинг (10-15 секций) | 2-4 дня | Уникальные блоки, галереи, отзывы, FAQ, форма с валидацией |
| Корпоративный сайт (5-7 страниц) | 1,5-2 недели | Общие компоненты (шапка, футер), уникальные шаблоны под разделы |
| Карточка товара + каталог интернет-магазина | 5-8 дней | Фильтры, сортировка, галерея товара, состояния «нет в наличии» |
| Экран личного кабинета или админ-панели | 3-5 дней на экран | Таблицы, графики, формы редактирования, состояния загрузки |
Эти сроки - именно про вёрстку: разметка, стили, адаптив, базовое поведение интерфейса. Бэкенд, реальные данные из базы и сложная логика считаются отдельно.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Платформа и срок вёрстки: конструктор, CMS или кастомный код
Выбор инструмента меняет сроки сильнее, чем сложность самого дизайна.
На Tilda я закрываю обычный лендинг за 1-3 дня - блочный редактор экономит время на базовой разметке. Но как только нужен нестандартный элемент - калькулятор, попап с логикой, интеграция с CRM или эквайрингом - включается кастомный JS-код поверх конструктора. Простая доработка на Tilda у меня стоит от 3 000 ₽ и занимает несколько часов, а комплексная интеграция вроде связки формы с CRM, оплатой и расчётом доставки СДЭК - от 40 000 ₽ и полторы-две недели, потому что это уже не вёрстка, а разработка с тестированием на реальных сценариях.
На WordPress с готовой темой страница верстается за 2-4 дня - берётся конструктор блоков темы и адаптируется под макет. Кастомная тема с нуля под точный дизайн - это уже полноценный проект от 60 000 ₽ и от двух недель, потому что верстается не одна страница, а весь набор шаблонов и стилей сайта.
Чистый HTML/CSS/JS или React/Next.js - самый долгий путь для одной изолированной страницы (нет готовых блоков, всё пишется руками), но самый быстрый в масштабе, если страниц много и они переиспользуют одни и те же компоненты. Лендинг на Next.js у меня стоит от 80 000 ₽ - в эту сумму входит не только вёрстка, но и архитектура компонентов, которая окупается на второй-третьей похожей странице.
Что реально растягивает сроки вёрстки на практике
По опыту, разрыв между «оценил» и «сдал» почти никогда не связан со сложностью самого макета. Обычно виноваты пять вещей.
Макет без спецификации
Если в Figma нет чётких отступов, размеров шрифтов и состояний для интерактивных элементов, часть решений приходится додумывать и потом переделывать после правок дизайнера. На это уходит от 15 до 30% сверх изначальной оценки.
Только десктопная версия
Без мобильного и планшетного макета адаптив собирается по интуиции, а потом согласовывается с клиентом в несколько итераций - это добавляет день-два даже к простой странице.
Интеграции внутри страницы
Подключение готовых скриптов для Tilda из библиотеки - вроде виджета оплаты или калькулятора доставки - экономит время по сравнению с написанием с нуля, но и здесь нужно тестирование на реальных данных, а не просто визуальное совпадение с макетом.
Правки в процессе
«Давайте сдвинем блок» после того, как вёрстка уже собрана и адаптирована под три экрана - не пять минут работы, а пересборка сетки под все брейкпоинты заново. Я закладываю в смету 1-2 раунда правок именно поэтому.
SEO-требования к разметке
Семантические теги, микроразметка Schema.org, правильная иерархия заголовков - если это нужно с самого начала, а не «докрутить потом», закладываю на это 10-15% времени сверху, потому что верстается не просто визуальное совпадение, а структура документа.
Как я оцениваю и ускоряю сроки без потери качества
Перед стартом я разбиваю макет на блоки и оцениваю каждый отдельно, а не страницу целиком - так виден реальный объём работы и не теряются нестандартные секции. Для типовых задач вроде форм, попапов и калькуляторов на Tilda использую готовые наработки - это можно посмотреть в библиотеке готовых скриптов для Tilda, часть блоков там закрывает 70-80% типовых запросов без вёрстки с нуля.
Второе, что реально сокращает срок - зафиксированное ТЗ до старта: количество состояний, список интеграций, наличие мобильной версии в макете. Проекты, где это оговорено заранее, я сдаю на треть быстрее тех, где детали выясняются по ходу работы.
Третье - параллельная работа. Пока верстается статичная часть страницы, я уже настраиваю связку с CRM или платёжным виджетом на тестовых данных, а не жду полной готовности макета для старта интеграций.
Разобраться перед стартом
Консультация
от 3 000 ₽
Подробнее →Частые вопросы
Сколько по времени верстается одна страница лендинга?
Простой одноэкранный лендинг с оффером и формой - 1 день. Многоблочный лендинг из 10-15 уникальных секций с галереями и формой с валидацией - 2-4 дня. Срок растёт, если в макете нет мобильной версии или нужны нестандартные анимации.
Почему вёрстка по дизайну часто занимает дольше первоначальной оценки?
Чаще всего из-за трёх вещей: макет без спецификации отступов и состояний, отсутствие адаптивных версий и правки после того, как страница уже собрана под все экраны. Я закладываю запас на 1-2 раунда правок именно поэтому, но новые требования, появившиеся после старта работы, всегда сдвигают срок.
Чем отличаются сроки вёрстки в конструкторе и на кастомном коде?
В конструкторе вроде Tilda типовая страница собирается быстрее - блоки уже готовы. Но нестандартные элементы и интеграции там верстаются кастомным кодом поверх конструктора и по времени сопоставимы с обычной разработкой. Чистый код или React дольше для одной страницы, но быстрее для серии похожих страниц за счёт переиспользуемых компонентов.
Нужно ли готовое техническое задание, чтобы сократить сроки вёрстки?
Да, и это самый дешёвый способ ускорить проект. Если заранее известны список интеграций, наличие мобильной версии макета и требуемые состояния интерфейса, я оцениваю и сдаю работу без итераций на выяснение деталей - на практике это сокращает срок на 20-30%.