Я Максим, веб-разработчик. Клиенты часто путают дизайн и вёрстку — а это два разных этапа с разными специалистами, разным инструментарием и разной стоимостью. Когда вы понимаете, из чего состоит процесс создания сайта, вам проще контролировать подрядчика, планировать бюджет и не попасть в ситуацию, когда «вроде заплатил, а ничего не работает». Расскажу, как устроен этот процесс изнутри — со стороны разработчика, который прошёл через сотни проектов.

Дизайн — это визуальная концепция, а не готовый сайт

Дизайнер создаёт визуальный макет сайта в Figma (сейчас это отраслевой стандарт, хотя раньше использовали Photoshop и Sketch). Результат работы дизайнера — набор статичных экранов: как будет выглядеть каждая страница сайта на компьютере, планшете и телефоне. Цвета, шрифты, расположение блоков, кнопки, иллюстрации, иконки — всё продумано до пикселя.

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

Я часто сталкиваюсь с ситуацией: клиент получает макет в Figma, кликает по нему и удивляется — «а почему ничего не происходит?». Потому что это ещё не сайт. Это визуальный проект, который дальше нужно «построить».

Что входит в работу дизайнера:

  • Разработка UI-концепции: выбор стилистики, цветовой палитры, типографики
  • Создание UI-кита (набора компонентов): кнопки, поля ввода, карточки, модальные окна
  • Отрисовка макетов всех ключевых страниц
  • Адаптивные версии: как сайт выглядит на десктопе, планшете и мобильном
  • Подготовка интерактивного прототипа: кликабельная модель для демонстрации переходов между страницами

Хороший дизайнер не просто «рисует красиво» — он решает бизнес-задачу. Куда поставить кнопку заявки, чтобы пользователь её заметил. Как выстроить визуальную иерархию, чтобы взгляд шёл от заголовка к преимуществам и дальше к действию. Какой контраст текста обеспечит читаемость на мобильном устройстве при ярком солнце. Это именно проектирование, а не «нарисовать что-нибудь красивое».

Вёрстка — это перевод дизайна в код

Верстальщик (или фронтенд-разработчик) берёт макет из Figma и превращает его в HTML, CSS и JavaScript. То, что было статичной картинкой, становится живой интерактивной веб-страницей: кнопки нажимаются, формы работают, анимации воспроизводятся, сайт корректно адаптируется под экран любого размера.

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

Вот что реально делает верстальщик:

  • Пишет семантическую HTML-разметку — чтобы поисковые роботы Яндекса и Google правильно понимали структуру контента
  • Стилизует элементы через CSS — цвета, шрифты, отступы, тени, анимации. Всё, что видит пользователь
  • Делает сайт адаптивным — чтобы он корректно отображался на мобильных, планшетах и широких мониторах. Это не просто «сжать картинку», а продумать, как меняется компоновка блоков на разных разрешениях
  • Подключает JavaScript для интерактивности — выпадающие меню, слайдеры, модальные окна, валидация форм
  • Оптимизирует производительность — сжатие изображений, ленивая загрузка, минификация кода

На практике граница между «верстальщик» и «фронтенд-разработчик» размыта. Классический верстальщик работает с HTML и CSS, возможно добавляет jQuery. Фронтенд-разработчик использует React, Vue или Angular, пишет компонентную архитектуру, работает со стейт-менеджментом и API. На современных проектах чаще нужен именно фронтенд-разработчик, потому что даже корпоративные сайты строятся на React/Next.js для лучшей производительности и удобства поддержки.

Где между ними пропасть: почему красивый макет не гарантирует красивый сайт

Вот нюанс, который заказчики упускают: макет и готовый сайт — это не одно и то же. Дизайнер может нарисовать макет, который технически невозможно или нецелесообразно верстать. Классические примеры из моей практики:

Нестандартная типографика. Дизайнер использовал красивый платный шрифт, который весит 800 КБ. На мобильном интернете сайт грузится три секунды только из-за шрифтов — пользователь уходит, не дождавшись.

Сложные перекрытия элементов. На макете текст красиво наезжает на фотографию. А на мобильном экране этот текст становится нечитаемым, потому что шрифт слишком мелкий на фоне картинки.

Анимации без продумки. Дизайнер нарисовал десять параллаксов и двадцать анимированных переходов. В браузере это тормозит, особенно на бюджетных телефонах.

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

А что такое бэкенд?

Бэкенд — серверная часть сайта: база данных, обработка форм, личный кабинет, корзина, оплата, интеграция с CRM и 1С. Это то, что пользователь не видит напрямую, но без чего сайт не функционирует как бизнес-инструмент.

Если фронтенд — это фасад магазина (витрина, вывеска, двери), то бэкенд — это склад, кассовый аппарат, система учёта и логистика. Покупатель заходит, видит красивый магазин — это дизайн и вёрстка. Но когда он хочет что-то купить, оплатить и получить — работает бэкенд.

Бэкенд-разработчик может подключить CMS (систему управления контентом) — WordPress, Битрикс, Strapi, — чтобы клиент мог сам обновлять тексты и картинки без помощи программиста. Или написать кастомный бэкенд на Node.js, Python/Django, Go — для нестандартных задач: калькуляторы, личные кабинеты, сложные интеграции.

На моих проектах я часто использую связку Next.js + Prisma + PostgreSQL — это позволяет вести и фронтенд, и бэкенд в одном фреймворке, что ускоряет разработку и упрощает деплой.

Полный цикл создания сайта: все восемь этапов

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

1. Бриф и аналитика (1–2 недели). Выясняем: зачем нужен сайт, кто целевая аудитория, какие задачи должен решать, кто конкуренты, какие функции обязательны. На выходе — документ с требованиями. Без этого этапа всё остальное — стрельба вслепую.

2. Прототипирование (1–2 недели). Создаём схематичную структуру страниц — wireframes. Это чёрно-белые схемы без дизайна, но с расположением всех блоков. На этом этапе становится понятно, сколько страниц будет на сайте, где какой контент, как работает навигация.

3. Дизайн (2–4 недели). Визуальные макеты в Figma. Обычно сначала дизайнер делает концепцию главной страницы, согласовывает с клиентом, потом отрисовывает остальные. Важно утвердить дизайн до вёрстки — переделывать код дороже, чем переделывать макет.

4. Вёрстка (2–4 недели). HTML/CSS/JS по утверждённым макетам. Результат — рабочий фронтенд, который можно открыть в браузере, покликать, проверить адаптивность.

5. Бэкенд-разработка (2–6 недель). Подключение CMS, базы данных, интеграций. Формы начинают отправлять заявки, каталог подтягивает данные из базы, корзина считает итоговую сумму.

6. Наполнение контентом (1–2 недели). Тексты, фотографии, видео. Часто этот этап затягивает сам клиент — контент не готов, а разработчик не может запустить сайт с «рыбой».

7. Тестирование (1 неделя). Проверка на ошибки, скорость загрузки, адаптивность, кросс-браузерность. Я тестирую в Chrome, Firefox, Safari, на iOS и Android, на медленном мобильном интернете.

8. Запуск и поддержка. Деплой на боевой сервер, подключение домена и SSL-сертификата, настройка Яндекс.Метрики и Вебмастера. После запуска — регулярные обновления, мониторинг, правки по результатам аналитики.

Кто делает что: распределение ролей

В маленьких студиях и на фрилансе один человек может совмещать несколько ролей. Фуллстек-дизайнер — рисует макеты и сам же верстает. Фуллстек-разработчик — делает и фронтенд, и бэкенд. Я, например, закрываю и дизайн-контроль, и фронтенд, и бэкенд — но дизайн макетов предпочитаю отдавать профильному дизайнеру, потому что это другой тип мышления.

В крупных студиях роли разделены: UX-дизайнер проектирует пользовательские сценарии, UI-дизайнер рисует интерфейс, фронтенд-разработчик верстает, бэкенд-разработчик пишет серверную логику, тестировщик ищет баги, проджект-менеджер координирует процесс. Это дороже, но качество выше за счёт специализации.

Для заказчика главное — понимать, что дизайнер и разработчик решают разные задачи. Если вам предлагают «дизайн и сайт за 15 000 рублей» — скорее всего, это шаблон с минимальной настройкой, а не полноценная разработка.

Типичные ошибки заказчиков: что я вижу регулярно

Утверждают дизайн «на словах». Клиент говорит «нравится» по скриншоту в WhatsApp, а потом на этапе вёрстки начинаются бесконечные правки: «а можно здесь подвинуть», «а давайте другой шрифт». Каждая правка кода стоит в 3–5 раз дороже, чем правка макета в Figma.

Не предоставляют контент вовремя. Дизайнер и верстальщик работают с «рыбой» (Lorem ipsum), а реальные тексты появляются перед запуском. В итоге тексты не влезают в блоки, фотографии не того формата, структура страниц не соответствует контенту.

Пропускают этап прототипирования. Сразу бросаются в дизайн, а потом выясняется, что забыли про страницу «Оплата и доставка» или про мобильное меню. Переделки на этапе дизайна — неприятно, на этапе бэкенда — катастрофа по срокам.

Сравнивают стоимость дизайна и вёрстки. Дизайн стоит 50 000, вёрстка — 80 000, и клиент удивляется: «Почему код дороже картинки?». Потому что вёрстка — это не «перерисовать в браузер», а инженерная работа: адаптивность, производительность, доступность, SEO-разметка, кросс-браузерность.

Почему это важно для заказчика

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

Моя рекомендация: требуйте промежуточную приёмку на каждом шаге. Подписали бриф — утвердили. Посмотрели прототип — утвердили. Приняли дизайн — утвердили. Проверили вёрстку — утвердили. Такой подход защищает и заказчика, и разработчика. И чем раньше вы обнаружите проблему, тем дешевле её решить — это правило работает в любой инженерной дисциплине.