Сколько стоит вёрстка одной страницы в 2025: реальные цены в России и примеры

сен, 20 2025

Цифра «за страницу» гуляет от 3 000 до 40 000 ₽ - и все эти цены могут быть честными. Почему такой разброс? Потому что «страница» - это не единица работ. У одного это статический лонгрид, у другого - карточка товара с фильтрами, анимацией и сложной сеткой. Ниже - как быстро понять свою вилку, что влияет на цену в 2025 в России, и как посчитать бюджет без сюрпризов. Я работаю с заказами из регионов и столицы (я из Ростова-на-Дону), так что цифры - не «с потолка», а то, что реально вижу на рынке.

Зачем вы здесь? Обычно нужно: прикинуть бюджет под лендинг или экран приложения; понять, что входит в цену и что докинет 30-50% сверху; выбрать, кому поручить работу (фрилансер, студия, конструктор, ИИ); и не переплатить на правках и багфиксах. Поехали по порядку.

Что включает «вёрстка одной страницы» в 2025

Если коротко, вёрстка - это перевод макета (Figma/Sketch/Photoshop) в работающий HTML/CSS/JS с адаптивом и нормальным поведением в целевых браузерах. Но состав работы сильно гуляет. От этого и пляшет цена.

Базовый состав работ:

• Семантическая HTML-разметка (заголовки, списки, ARIA, alt у изображений).
• Стили на современном CSS (flex/grid, контейнерные запросы, переменные), аккуратная типографика.
• Адаптив под ключевые ширины (мобильный/планшет/десктоп) или fluid-подход.
• Интерактив на лёгком JS: бургер-меню, слайдеры, табы, модалки, валидация форм.
• Картинки в WebP/AVIF, lazyload, базовая оптимизация скорости.
• Кроссбраузерность: актуальные версии Chrome, Safari, Firefox, Edge.

Что обычно не входит «по умолчанию», но часто требуется и добавляет часы:

• Сложная анимация (GSAP, Lottie), параллакс, 3D.
• Таблицы с фиксированными шапками, бесконечная прокрутка, drag-and-drop.
• Доступность уровня WCAG AA с тестированием скринридером.
• Интеграции с API, CMS, CRM (это уже ближе к фронтенд-разработке, а не чистой вёрстке).
• E-mail вёрстка (другая специфика и правила).

Удобно мыслить не «страница/не страница», а уровнями сложности:

• Basic - простой лонгрид: текст, изображения, блоки отзывов, форма без сложной логики. 4-8 часов на десктоп + 2-4 часа на адаптив.
• Standard - секции с каруселями, вкладками, аккуратными анимациями появления. 10-20 часов на десктоп + 5-10 часов на адаптив.
• Pro/Complex - карточка товара с вариациями, фильтры, кастомные селекты, таблицы, графики, микроанимации. 25-45 часов на десктоп + 10-20 часов на адаптив.

Ключевые факторы цены:

• Готовность макета. Есть ли авто-лейауты, компоненты, сетка и стили? Или дизайнер «рисовал картинкой».
• Сколько точек адаптива отрисовано в Figma. Если только десктоп - закладываем время на проработку мобильной логики.
• Качество контента: реальные тексты/фото или «рыба» и потом подмены.
• Точность: «pixel-perfect» к фигме съедает +10-20% времени на вылизывание.
• Сроки: срочность = коэффициент 1.5-2.0 к ставке.

Цены и формулы: сколько и за что платим

Про деньги без тумана. В 2025 ставки в России выглядят так (по данным hh.ru по зарплатам фронтенд-разработчиков на июль-август 2025 и фриланс-биржам FL.ru/Upwork - медиану перевожу в почасовую):

• Junior: 800-1 500 ₽/час (студенты/джуны в регионах часто берут ближе к нижней границе).
• Middle: 1 500-3 000 ₽/час (самая частая вилка на фрилансе/rate-картах студий).
• Senior/Lead: 3 000-5 000 ₽/час (сложные UI, аудит, производительность, доступность).

Косвенная проверка реальности: медианная зарплата middle-фронтендера по hh.ru - 180-250 тыс. ₽/мес, что даёт 1 050-1 450 ₽/час при полной занятости; на фрилансе ставка обычно ×1.5-2 из‑за налогов, простоя и рисков - получаем 1 600-2 800 ₽/час. Это сходится с рынком.

Формула расчёта удобна такая:

• Цена = (Оценка часов на десктоп + Адаптив + Интерактив/анимации) × Ставка + Тесты/правки (15-30%).

А теперь - ориентиры по типам страниц. Это рабочие вилки для России в 2025 (Мск/СПб обычно +15-25% к нижней границе, регионы - ближе к середине/низу, срочность и сложность двигают вверх).

Да, иногда можно сделать «страницу за 5 000 ₽». Обычно это самый базовый кейс: готовый аккуратный макет, минимум интерактива, исполнитель - джун/региональный фрилансер с низкой ставкой. И обратные примеры тоже честные: сложный экран в кабинете с кастомными элементами может выйти в 80-100 тыс. ₽ и это нормальная математика по часам.

Калькуляция на пальцах. Допустим, у вас лендинг с 8 секциями, 2 слайдерами, формой, лёгкими появлениями блоков. Я беру 12-18 ч на десктоп + 6-8 ч адаптив + 3-4 ч на тесты/правки. Итого 21-30 ч. При ставке 2 000 ₽/ч получаем 42-60 тыс. ₽. Если макет чистый (компоненты, авто‑лейауты), можно уложиться в нижнюю треть вилки.

Хочется быстрее ориентироваться? Удобное правило-«нож»: 1 секция простого лендинга = 0.5-1.5 часа на десктоп, 0.3-0.8 часа на адаптив. Секция со слайдером/табами - умножьте на 2. Сложная анимация - плюс 2-6 часов на проект.

И ещё важный момент про слова. Часто спорят о «цене за страницу». Проще считать за часы и фиксировать объём. Формулировка «одна страница» у разных людей означает разные вещи. Чтобы не попасть в ловушку ожиданий, ниже - короткий чек-лист ТЗ.

• Ссылка на Figma с доступом на просмотр/коммент и библиотекой компонентов.
• Перечень целевых браузеров и устройств (например: Chrome/Edge, Safari iOS, Firefox - актуальные версии, две последние).
• Список точек адаптива: 360, 768, 1280 (или fluid).
• Перечень интерактивов: что кликабельно, что анимировано, поведение форм.
• Качество картинок: источники, форматы (WebP/AVIF), есть ли ретина.
• Требования к SEO/доступности: метатеги, заголовки H1-H3, alt, aria‑labels.
• Критерии приёмки: «без горизонтального скролла на ширинах X», «Lighthouse Performance не ниже 80 на десктопе» и т.п.

С этой конкретикой разговор про деньги становится коротким, и стоимость верстки перестаёт быть «угадайкой».

Риски и как не переплатить

Где обычно «утекает» бюджет? В правках и переделках. Вот типичные ловушки и что с ними делать.

• Макет без адаптивов. Исполнитель сам придумывает поведение - потом половина правок. Решение: закрепите 2-3 ключевые точки или примеры, на что равняться.
• Нет библиотеки стилей. Разные отступы, шрифты, тени - и верстальщик тратит время на «угадай Figma». Решение: токены/стили, гриды, авто‑лейауты.
• Контент меняется в конце. Сменили заголовки на длинные - поехала сетка. Решение: заморозьте тексты/фото на период вёрстки или заложите 10-20% на контент‑правки.
• Не зафиксировали браузеры. Safari любит сюрпризы (особенно мобильный). Решение: проговорите список целей и уровень поддержки.
• Срочность. Нужна «вчера» - ставка умножается, качество падает. Решение: планируйте буфер в 1-2 дня на тесты.
• Размытое понятие «pixel-perfect». Одни требуют абсолютной пиксельной точности, другие - визуальное соответствие. Решение: уточнить критерий заранее (допуск ±2-4px по сетке, например).

Пара простых экономящих правил:

• Договаривайтесь о 2-3 итерациях правок в цене. Сверх - по ставке.
• Разбивайте объём на чекпоинты: каркас → десктоп → адаптив → интерактив → тесты. Платёж по этапам.
• Попросите технический стек и «границы ответственности»: сборщик (Vite/Webpack), препроцессор (SCSS/PostCSS), методология (BEM), что именно сдаётся на выходе (репозиторий, сборка, инструкция).
• Для лендингов - модульная вёрстка. Дороже на старте на 10-15%, но потом новые секции стоят заметно дешевле.

И про совместимость и скорость. В 2025 можно и нужно использовать modern CSS: grid, контейнерные запросы, новые селекторы. Если ваша аудитория не сидит в древних браузерах, не платите за «полифильный музей». Сколько и какие браузеры поддерживать - бизнес-решение, а не религия.

Кого нанимать и когда: фрилансер, студия, конструктор, ИИ

Инструментов и форматов много. Что выбрать под ваш сценарий, чтобы не платить лишнего?

Как принять решение за 2 минуты:

• Есть чистый макет и срок «на вчера» - берите опытного фрилансера под конкретный объём, фиксируйте чекпоинты.
• Нужен набор сложных экранов и постоянные релизы - студия или маленькая продуктовая команда.
• Суперпростой промо‑лендинг - конструктор. Сэкономите 50-70% бюджета.
• Макет сырой и много типовых секций - неплохо комбинировать ИИ + ручная доводка.

Мини‑FAQ по ценам, которые слышу чаще всего:

• Почему у кого‑то «страница» 5 тыс., а у кого‑то 35 тыс. ₽? Разный состав работ и ставка. Проверьте интерактив, адаптивы, правки, тесты. Вы платите за часы и экспертизу.
• Если у меня только десктоп‑макет, это дорого? Да, потому что адаптивы нужно придумать. Закладывайте +30-50% к времени.
• Как считать правки? 2-3 итерации обычно включены. Всё сверх - по ставке, чтобы не «тонули» дедлайны.
• Можно ли платить «за блоки»? Можно. Фиксируете прайс за типовые секции. Главное - прописать список блоков и их состояния.
• Нужен ли договор и акты? Если это компания - да, чтобы нормально закрывать расходы. Для ИП/самозанятых - чек с УНП/реестром.

И да, иногда честнее сказать «не надо вёрстки». Если цель - проверить гипотезу, конструктор даст тот же выхлоп быстрее и дешевле. Деньги стоит тратить там, где играет кастом: сложные формы, уникальная анимация, интерфейсы.

Как быстро посчитать бюджет и с чего начать

Давайте соберём всё в короткий набор шагов. Нужен ориентир за вечер - сделаете без созвона.

1. Опишите страницу в 1-2 предложениях: «Лендинг из 9 блоков, 2 слайдера, форма, лёгкие появления».
2. Проверьте готовность макета: есть сетки, авто‑лейауты, компоненты? Если нет - смело добавляйте +15-25% к времени.
3. Посчитайте секции: умножьте на 0.5-1.5 часа (десктоп) и на 0.3-0.8 (адаптив). Интерактивные секции - ×2.
4. Добавьте тесты/правки 15-30% и буфер на баги Safari (минимум 2 часа на страницу).
5. Умножьте на ставку из своей реальности: региональный middle 1 500-2 000 ₽/ч, столица/студия 2 500-3 500 ₽/ч.

Пример. У вас: 8 секций, 2 из них интерактивные. Десктоп: (6×1) + (2×2) = 10 часов. Адаптив: (6×0.5) + (2×1) = 5 часов. Итого 15 ч. Правки/тесты +25% = ещё ~4 ч. В сумме 19 ч. При ставке 2 200 ₽/ч - около 42 тыс. ₽. С чистым макетом и без «магии» анимаций.

Чек-лист для брифа в одном письме (чтобы получить точную цену в ответ):

• Ссылка на макет (Figma) и список страниц/секций.
• Целевые устройства/браузеры и точки адаптива.
• Перечень интерактивов и анимаций (любые референсы приветствуются).
• Сроки и приоритеты (что важно выпустить первым).
• Формат сдачи: чистая вёрстка или интеграция в CMS/фреймворк.

Если нужен честный расчёт по вашему макету, пришлите ссылку и 3-5 строк описания. Я отвечаю тем же вечером: оценка часов, вилка по цене, где можно сэкономить без потери качества.

И напоследок - пару «техничных» подсказок, которые часто экономят бюджет без боли:

• Системные шрифты или 1-2 веб‑гарнитуры вместо зоопарка. Меньше вес - меньше правок.
• Одинаковые компоненты для повторяющихся блоков. Каждая уникальность - это новые часы.
• Анимации по умолчанию делайте простыми (opacity/transform). Тяжёлую «магическую пыль» добавляйте осознанно.
• SVG‑иконки вместо PNG, спрайт вместо россыпи файлов.
• Сразу фиксируйте допуски: как округляем, какие тени считаем «важными», какие - нет.

Сегодня 20 сентября 2025, рынок стал прагматичнее: платят не за «красивые слова», а за понятный результат в срок. Чем конкретнее ТЗ и ожидания, тем короче разговор про деньги и тем предсказуемее будет смета.