Сколько стоит вёрстка сайта по макету

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

Разбираем, что входит в работу и от чего зависит цена.

Что такое вёрстка

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

Ключевое слово — корректно на любом экране. Макет нарисован в одном размере, а страница должна работать на телефоне шириной 320 пикселей, на планшете, на ноутбуке и на широком мониторе.

Цены

Тип страницы	Стоимость
Простая страница без сложного интерактива	15 000 — 30 000 ₽
Страница со сложной сеткой и анимациями	30 000 — 70 000 ₽
Типовая страница по готовому шаблону	5 000 — 15 000 ₽
Лендинг целиком	40 000 — 150 000 ₽

Важная деталь: первая страница всегда дороже. На ней собирается основа — сетка, типографика, компоненты. Дальше страницы того же типа верстаются быстрее и дешевле.

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

Что входит помимо картинки

Здесь и кроется разница между дешёвой и нормальной вёрсткой.

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

Состояния элементов. Каждая кнопка существует в четырёх видах, каждая форма — в состояниях пустой, заполненной, с ошибкой, отправленной. В макете обычно нарисован один вид.

Поведение при реальных данных. Что будет, если заголовок в три раза длиннее, чем в макете? Если в списке ноль элементов? Если изображение не загрузилось? В дизайне этих случаев нет, в жизни есть всегда.

Доступность. Работа с клавиатуры, видимый фокус, подписи к полям, контраст. Что это означает — в статье доступность сайта.

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

Кроссбраузерность. Проверка в разных браузерах и на реальных устройствах, а не только на ноутбуке разработчика.

От чего зависит цена

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

Количество состояний. Формы, фильтры, вкладки, аккордеоны — каждый интерактивный элемент это несколько состояний.

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

Качество макета. Аккуратный макет с единой сеткой, дизайн-системой и прорисованными состояниями верстается быстрее и дешевле. Макет, где каждая страница нарисована по-своему, а отступы произвольные, добавляет к работе значительную часть времени.

Отсюда неочевидное следствие: вложение в дизайн-систему снижает стоимость вёрстки — почему это так, в статье что такое дизайн-система.

Что проверить при приёмке

Вёрстку принимают, глядя на экран ноутбука, — и это самая частая ошибка.

Пройдите на реальном телефоне весь путь до отправки формы.

Проверьте на маленьком экране. Не на флагмане, а на устройстве попроще.

Растяните окно браузера от узкого до широкого и посмотрите, где ломается.

Проверьте состояния. Отправьте форму с ошибкой, наведите на кнопки, откройте пустой раздел.

Пройдите клавишей табуляции. Видно ли, где фокус, доступны ли все элементы.

Замерьте скорость и попросите показать цифры, а не слова.

Вставьте длинный текст в заголовок и проверьте, не разъехалась ли вёрстка.

Полный чек-лист — в статье приёмка сайта.

Вёрстка отдельно от разработки

Распространённая схема, у которой есть системный риск.

Дизайн у одного, вёрстка у второго, программирование у третьего. Экономия есть, но появляется зона без ответственного: результат отличается от макета — дизайнер говорит, что сверстали неточно, верстальщик говорит, что макет не учитывал реальное поведение элементов.

Если разделяете, договоритесь заранее: кто принимает вёрстку на соответствие макету и кто отвечает за метрики скорости.

Та же логика описана в статье сколько стоит дизайн сайта.

Почему бывает дёшево

Предложения сверстать лендинг за 10 000 ₽ существуют. За эти деньги обычно получается визуальное соответствие макету на одном разрешении.

Чего не будет: проработанных состояний, поведения при нестандартных данных, доступности, работы над скоростью, проверки на реальных устройствах.

Проблема в том, что на приёмке разница почти не видна. Она проявляется потом: форма не отправляется на старом телефоне, вёрстка едет на длинном заголовке, страница медленно грузится на мобильном интернете.

Итог

Ориентиры: 15 000 — 30 000 ₽ за простую страницу, 30 000 — 70 000 ₽ за сложную, от 5 000 ₽ за типовую по готовому шаблону.

Вёрстка — это не перенос картинки в браузер, а реализация всех состояний интерфейса на всех размерах экранов с приемлемой скоростью.

И проверяйте её на реальном телефоне, а не на своём ноутбуке: именно там обнаруживается разница между дешёвой и нормальной работой.