Поделиться
Поделиться

«Сделайте сначала макет, а дизайн потом накатим» — одна из самых дорогих фраз в переписке с подрядчиком. За ней обычно стоит ожидание, что вёрстка — это механическое «перекрашивание» готовой картинки, а дизайн — что-то отдельное, «красивое сверху». Отсюда и бюджет: дизайн — 200 тысяч, вёрстка — 80. Как будто разработчик просто берёт PNG и кладёт его в HTML.

На практике в студии ДругойКод мы регулярно видим обратное: после такого ТЗ сроки срываются, смета растёт, а сайт в итоге выходит хуже, чем если бы дизайн и разработка шли как единый продукт. Ниже — честный разбор: почему вёрстка не может быть дешевле дизайна в нормальном проекте, из чего состоит разработка и почему «макет + потом дизайн» — это двойная оплата за одно и то же направление работ.

Миф: вёрстка — это «перенести картинку в код»

Упрощённая картина в голове заказчика:

  1. Дизайнер рисует экраны в Figma.
  2. Вёрстальщик «переносит» их в HTML/CSS.
  3. Программист «добавляет кнопки».

Реальность ближе к производству автомобиля, а не к наклейке обоев:

| Этап в мифе | Что происходит на самом деле | |-------------|------------------------------| | «Перенести макет» | Семантическая разметка, адаптив, состояния компонентов, доступность, SEO-разметка | | «Перекрасить» | Дизайн-токены, типографика, сетки, тёмная тема, hover/focus/error | | «Добавить кнопки» | Формы, валидация, API, авторизация, аналитика, деплой, мониторинг |

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

Макет — это и есть дизайн

Частая путаница в терминах:

  • Wireframe (каркас) — схема блоков без финальной визуальной айдентики: «здесь шапка, здесь форма, здесь три карточки».
  • UI-дизайн (макет) — финальные экраны: цвета, шрифты, отступы, иконки, состояния, мобильные версии.

Когда заказчик говорит «сначала сделайте макет, а дизайн потом», он часто смешивает каркас и готовый интерфейс. Но даже wireframe — это уже дизайн-решение: иерархия, сценарии, композиция. А полноценный UI-макет в Figma — это дизайн целиком, а не «черновик для вёрстальщика».

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

Почему «сначала макет, потом накатить дизайн» — двойная работа

Схема, которую предлагают сэкономить:

Этап 1: Вёрстка «пустого» макета (каркас, серая сетка)
    ↓
Этап 2: Дизайнер рисует «настоящий» вид
    ↓
Этап 3: Вёрстальщик «переносит дизайн на уже свёрстанный сайт»

Проблема: этапы 1 и 3 делают одно и то же — превращают визуальное решение в интерфейс. Меняется только внешний слой, но:

  • перестраивается сетка и типографика;
  • меняются компоненты (кнопки, карточки, формы);
  • ломается адаптив, который делали под первый вариант;
  • переписываются стили, иногда — разметка.

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

Правильная последовательность:

Дизайн (UI в Figma, все ключевые экраны и состояния)
    ↓
Вёрстка и разработка (один проход по утверждённому макету)
    ↓
Тестирование, правки, запуск

Один дизайн — одна реализация. Так и должна выглядеть смета.

Из чего состоит «вёрстка и разработка сайта»

Чтобы оценить стоимость, нужно видеть полный состав работ. В ДругойКод типичный корпоративный или продуктовый сайт на Next.js включает не только «сверстать главную».

1. Фронтенд и вёрстка

  • Семантическая HTML-разметка (доступность, SEO).
  • Адаптив: mobile-first, breakpoints, touch-цели.
  • CSS/стили: не «перекрасить», а система (переменные, компоненты, состояния).
  • Анимации и микровзаимодействия — только если они в макете и согласованы по производительности.
  • Оптимизация: lazy load, шрифты, изображения (WebP/AVIF), Core Web Vitals.

Подробнее про стек — в статье про Next.js и дизайн-систему.

2. Интеграция с бэкендом и данными

  • Формы заявок, валидация, защита от спама (reCAPTCHA / SmartCaptcha).
  • CMS или markdown-блог, как на othercode.ru.
  • Личные кабинеты, API, авторизация — если это не лендинг.
  • Интеграции: CRM, почта, аналитика (Метрика и др.).

3. Инфраструктура и качество

  • Сборка, CI/CD (GitLab pipeline), деплой.
  • Docker, окружения, секреты.
  • Кроссбраузерность, тесты критичных сценариев.
  • Документация для заказчика: как править контент, куда смотреть логи.

4. То, чего нет на макете, но без чего сайт не живёт

| Задача | Почему не «входит в вёрстку» молча | |--------|-------------------------------------| | 404, пустые состояния, ошибки форм | Макет показывает happy path | | Загрузка, скелетоны | Реальная сеть медленнее Figma | | Длинные тексты, переносы | В макете — идеальные заголовки | | Мультиязычность | Удваивает объём разметки и логики | | Печать, PDF, email-шаблоны | Отдельные носители |

Дизайнер в хорошем процессе закладывает часть этих состояний в макет. Разработчик реализует все состояния в коде. Объём работы сопоставим с дизайном — иногда больше, если много логики и интеграций.

Почему вёрстка не может стоить дешевле дизайна

1. Разный объём часов — не «дизайн сложнее»

Дизайн корпоративного сайта: 15–40 экранов, UI-kit, мобильные версии, согласования — 80–200+ часов у сильного дизайнера.

Разработка того же сайта: вёрстка всех экранов, компоненты, адаптив, формы, CMS, деплой, правки — 120–300+ часов у команды (фронт, иногда бэкенд, DevOps).

В честной смете разработка часто дороже или сопоставима с дизайном, а не наоборот. Если вам предлагают дизайн за 300 000 ₽ и «вёрстку» за 50 000 ₽ — либо вёрстку сильно недооценили, либо дизайн переоценили, либо в «вёрстку» не входит то, без чего сайт не запустится.

2. Риск и ответственность

Дизайнер отвечает за визуал и UX на уровне макета. Разработчик — за то, что сайт работает: формы уходят, страницы открываются, Google/Яндекс индексируют, на iPhone ничего не едет, при нагрузке не падает. Ошибка в проде стоит дороже «кривого отступа» в Figma.

3. Срок жизни

Макет устаревает после сдачи (если не ведётся дизайн-система). Код живёт годами: обновления Next.js, смена API, новые блоки в блоге, интеграции. Поддержка и доработки — это тоже разработка, не «разовая вёрстка».

4. Редкость «чистой вёрстки»

На рынке под «вёрсткой» часто продают лендинг на Tilda за 30 000 ₽ — и сравнивают с кастомным UI-дизайном за 150 000 ₽. Сравнение некорректно: конструктор ≠ разработка по макету. Кастомный сайт на React/Next.js с блогом, формами и CI — другой класс работ.

Как должна выглядеть адекватная смета

| Блок | Что входит | Ориентир доли* | |------|------------|----------------| | Исследование и структура | ЦА, карта сайта, wireframe ключевых страниц | 5–15% | | UI-дизайн | Figma, UI-kit, адаптивные макеты, handoff | 25–35% | | Фронтенд + вёрстка | Компоненты, адаптив, анимации | 25–35% | | Бэкенд / интеграции | Формы, CMS, API, CRM | 15–30% | | Тестирование, деплой, запуск | CI/CD, SEO-база, обучение | 10–15% |

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

Макет (UI) — единственный визуальный источник правды. Разработка идёт по нему один раз. Любая схема «сначала сверстаем каркас, потом нарисуем» — маркер того, что бюджет посчитали неправильно.

Типичные ошибки заказчика

  1. Делить проект на «дизайнера» и «вёрстальщика» без общего ТЗ — два подрядчика, два видения, переделки на стыке.
  2. Экономить на дизайне, «допилить в коде» — разработчик становится дизайнером; сроки и цена растут.
  3. Ждать pixel-perfect без макета мобилки — разработчик угадывает; правки бесконечны.
  4. Не закладывать состояния и контент — «потом добавим тексты» ломает вёрстку.
  5. Сравнивать с ценой шаблона на маркетплейсе — там нет вашей логики, интеграций и ответственности подрядчика.

Типичные диалоги с заказчиком

Ниже — реальные формулировки из переписки и созвонов (слегка обобщённые). Узнаёте себя — не страшно: так думает большинство до первого честного разбора сметы.

Диалог 1. «Вёрстка же проще — просто перенести макет»

Заказчик: У нас дизайн уже есть, 250 тысяч отдали дизайнеру. Вёрстка — это же полдня работы, нарисовано же всё. Сколько возьмёте за перенос? 60–80 тысяч?

Студия: Перенос — это не экспорт PNG. Нужно сверстать все экраны, сделать адаптив под телефон и планшет, состояния кнопок и форм, подключить формы к почте/CRM, собрать блог или каталог, настроить деплой. По часам это часто больше, чем сам UI-дизайн. 60 тысяч — это лендинг на конструкторе, не кастомный сайт по вашему Figma.

Заказчик: Но ведь картинка уже готова!

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

Диалог 2. «Сначала сверстаем каркас, дизайн потом накатим»

Заказчик: Давайте так: вы сейчас сверстаете структуру — шапка, блоки, футер, серым. Потом дизайнер дорисует красоту, и вы просто перекрасите.

Студия: «Перекрасить» не получится. Когда появится финальный UI, поменяются отступы, шрифты, кнопки, сетка. Придётся переписывать стили и часто разметку. Вы заплатите за два прохода по интерфейсу: сначала под серый каркас, потом под нормальный дизайн.

Заказчик: Нам же нужно быстрее увидеть сайт в браузере.

Студия: Быстрее — сделать wireframe в Figma за неделю и согласовать структуру без кода. Код пишем один раз по утверждённому макету. Макет — это и есть дизайн, не «черновик для вёрстальщика».

Диалог 3. «Дизайн у нас в голове / на референсах»

Заказчик: Дизайнер нам не нужен, есть референсы: вот три сайта конкурентов. Сверстайте «как у них, только наш логотип».

Студия: Референс — не макет. Разработчик будет каждый раз спрашивать: какой отступ, какой шрифт, что на мобилке, как выглядит форма с ошибкой. Каждый такой вопрос — дизайн-решение в коде, по 15 минут, но их сотни.

Заказчик: Ну подберите сами, вы же профессионалы.

Студия: Можем — но это скрытый дизайн-этап внутри разработки, обычно дороже и хуже по качеству, чем нормальный UI в Figma. Либо закладываем дизайн в смету, либо принимаем, что правок будет много.

Диалог 4. «На Tilda же дешевле»

Заказчик: Знакомые сделали сайт за 40 тысяч на Tilda. Почему вы просите 400 за вёрстку и разработку?

Студия: Tilda — готовые блоки, свой хостинг, ограниченная логика. У вас в ТЗ: каталог с фильтрами, интеграция с 1С, блог, мультиязычность, скорость под SEO. Это не «собрать из секций», а продуктовая разработка. Сравнивать нужно с кастомным сайтом, а не с шаблоном.

Заказчик: Нам бы пока попроще.

Студия: Тогда честно урежем scope: один язык, без интеграций, 5 страниц по готовому макету. Или Tilda — если хватает возможностей. Но называть это «вёрсткой по дизайну за 40к» некорректно.

Диалог 5. «Мобилку дизайнер не рисовал — вы сами адаптируете»

Заказчик: В Figma только десктоп, мобильную версию сделаете по ходу? Это же вёрстка, там всё понятно.

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

Заказчик: Добавим мобилку в дизайн потом, когда десктоп утвердим.

Студия: Нормально. Но код не начинаем, пока нет ключевых мобильных экранов. Иначе переделаем половину проекта.

Диалог 6. «Вёрстальщик подправит дизайн по месту»

Заказчик: Мелочи вроде цвета кнопки или размера шрифта пусть правит разработчик — зачем дергать дизайнера?

Заказчик (через две недели): Почему кнопки другого оттенка, чем в брендбуке? И шрифт не тот.

Студия: Потому что «мелочи» без UI-kit — это десятки несогласованных решений. Либо дизайнер фиксирует токены и компоненты в Figma, либо правки идут через него, а не «на глаз» в CSS.

Диалог 7. «Смета: дизайн 300, вёрстка 50 — так и должно быть»

Заказчик: Другая студия дала оценку: дизайн 300 000, вёрстка 50 000. У вас разработка дороже дизайна — вы что, завышаете?

Студия: Спросите, что входит в «вёрстку за 50». Обычно: только главная и контакты, без адаптива, без форм в CRM, без деплоя, без правок. Остальное — «допы». Мы считаем полный запуск: все страницы из макета, мобилка, формы, хостинг, CI. Честная разработка редко бывает втрое дешевле дизайна.

Заказчик: А если урезать?

Студия: Урежем scope, не качество втихую. Скажем, какие страницы и интеграции убираем — и пересчитаем. Скрытые допы хуже, чем честная цифра с первого раза.

Что объединяет эти диалоги

| Фраза заказчика | Скрытое ожидание | Реальность | |-----------------|------------------|------------| | «Просто перенести» | PNG → HTML за день | Недели инженерии | | «Сначала каркас» | Два этапа дешевле одного | Двойная оплата интерфейса | | «Как у конкурента» | Дизайн не нужен | Дизайн в коде по мелочам | | «Как Tilda» | Вёрстка = конструктор | Другой класс продукта | | «Мобилку сами» | Адаптив бесплатно | Скрытый UI-дизайн | | «Вёрстка 50к» | Всё включено | Часто только оболочка |

Хороший подрядчик не спорит ради спора — он переводит разговор в состав работ: что именно входит, что выкинем, что будет стоить второй проход. Так смета перестаёт быть лотереей.

Как мы работаем в ДругойКод

Мы не продаём «вёрстку отдельно от дизайна» как дешёвую опцию. Типичный поток:

  1. Структура и UI — либо дизайн от нашей команды / партнёров (как на Galvatec, Diom), либо handoff от вашего дизайнера с полным UI-kit и мобильными экранами.
  2. Один проход в код — Next.js, компонентная архитектура, дизайн-токены, адаптив.
  3. Интеграции и запуск — формы, блог, аналитика, деплой.

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

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

Итог: вёрстка и разработка — не «перекрасить макет», а большой объём инженерной и продуктовой работы. Макет в Figma — это дизайн, по которому код пишется один раз. Схема «сначала макет-каркас, потом накатить дизайн» — двойная оплата за одно направление и главная причина, почему «дешёвая вёрстка» в итоге обходится дороже. В нормальном проекте разработка не дешевле дизайна — она сопоставима по стоимости или выше, и это нормально.