Вёрстка превращает согласованный дизайн в интерфейс, который браузер может показать и которым человек может пользоваться — при этом обработка заказов, доставка обращений и работа базы данных требуют отдельной реализации
Когда говорят «макет готов, осталось сверстать», легко представить последний простой шаг — перенести картинку на сайт
Разработчику нужно определить, как страница меняется по ширине, что делают её элементы и что происходит с реальным содержанием
Эта статья поможет выбрать состав услуги вёрстки, понять формат передачи и записать границы ответственности до согласования работы
Сначала определите, какую услугу вы выбираете
Можно заказать только реализацию готового макета, реализацию с уточнением адаптивов или работу с установкой в действующей системе — эти варианты требуют разного состава задач
В макете дизайнер показывает расположение, типографику, цвета, изображения и предусмотренные состояния
В браузере те же решения должны работать с разным размером окна, длиной текста, способом управления и скоростью соединения
Например, заголовок может стать длиннее, фотография загрузиться позже, а посетитель открыть меню с клавиатуры — эти ситуации нужно учитывать при реализации
Макет остаётся источником согласованного решения, но сам по себе не описывает каждую возможную ситуацию
Какие части работы скрываются за названием услуги
Обычно заказчику не нужно изучать синтаксис — достаточно понимать роли основных частей, чтобы одинаково обсуждать результат с исполнителем
| Часть | За что отвечает | Что видит посетитель |
|---|---|---|
| HTML | Содержание и структура страницы | Заголовки, текст, ссылки, изображения, элементы управления |
| CSS | Оформление и расположение | Размеры, шрифты, цвета, сетка и перестроение блоков |
| JavaScript, когда он нужен | Поведение и реакции интерфейса | Открытие меню, переключение вариантов, обновление состояния |
| Серверные системы | Получение и обработка данных за пределами страницы | Сохранённый заказ, доставленное обращение, данные кабинета |
Инструменты разработки заказчику необязательно выбирать самому — попросите объяснить, как будут обновляться страницы и кто сможет продолжить работу после передачи
Смысловая структура важна не только визуально — W3C объясняет, как разметка областей и заголовков помогает ориентироваться на странице в руководстве по структуре
Что входит в результат вёрстки
Состав зависит от задания — его полезно фиксировать через страницы, элементы и сценарии, которые можно проверить
Внешний вид с настоящим содержанием
Нужно сверить расположение, размеры, шрифты и изображения с согласованной версией макета
При этом проверять стоит не только короткие подписи из демонстрационного файла — длинное название услуги и реальный абзац могут изменить высоту блока
Работа на разных экранах
В адаптивной странице блоки могут менять расположение и размеры — например, карточки переходят из нескольких колонок в одну
Заказчику важно проверить доступность содержания и действий, а не только наличие отдельного мобильного скриншота
Правила и способы приёмки разобраны в гайде о подготовке адаптивного макета
Состояния и управление
Открытое меню, выбранный вариант, ошибка, ожидание и пустой результат — такие состояния входят в работу, если они предусмотрены сценарием
Ссылки и кнопки должны выполнять согласованные действия — надпись на макете ещё не определяет адрес перехода или способ обработки данных
Комплект для дальнейшей работы
Исходники — файлы проекта, в которых разработчик меняет код, стили и компоненты — собранная версия подготовлена для размещения и не всегда удобна для дальнейшего редактирования
Если сайт будет поддерживать другая команда, ей нужны исходники и инструкция сборки — попросите её открыть переданный проект до завершения приёмки
Установка в действующую CMS и публикация на домене — следующие работы, которые нужно явно включить в результат или поручить вашей команде
Что не появляется автоматически
В дизайне может быть форма с красивым сообщением об успехе, но для приёма обращения нужен работающий обработчик
В каталоге могут быть нарисованы цена и остаток, но их актуализация потребует источника данных
У личного кабинета могут быть готовы экраны, но авторизация и доступ к сведениям пользователя — отдельные задачи
То же относится к оплате, системе управления содержанием, размещению на сервере и поддержке после запуска
Если эти подключения нужны, включите их в предложение отдельными строками — дальше покажем разницу на одной кнопке
Отдельно разберите что означает «под ключ» в предложении — формулировка должна быть связана с конкретным комплектом передачи и ответственными
Учебный пример одной страницы услуги
Разберём вымышленную страницу клининговой компании — на ней есть описание уборки, перечень работ и кнопка «Скачать список работ»
Компания уже подготовила документ, поэтому разработчику нужно собрать страницу и связать кнопку с этим файлом — получение контакта посетителя в такую задачу не входит
- На странице«Что входит в уборку» — перечень работ и отдельная ссылка на документ
- ДействиеКнопка «Скачать список работ» открывает актуальный файл компании
- ПроверкаФайл доступен с телефона, его содержание совпадает с перечнем на странице
- ПередачаУ заказчика есть сам документ и пояснение, как заменить его следующей версией
Заказчик может принять этот блок самостоятельно: открыть страницу, нажать кнопку, прочитать файл и сравнить условия — одного визуального совпадения кнопки с макетом недостаточно
Если вместо скачивания нужна заявка
Теперь компания меняет действие на «Узнать стоимость уборки» и хочет получать номер телефона — внешний вид блока похож, но результат работы уже другой
Нужно определить поля и сообщение об ошибке, подключить получение данных и показать посетителю подтверждение только после успешной обработки
| Было | Стало | Что добавилось в задачу |
|---|---|---|
| Ссылка на готовый документ | Поля имени и телефона | Внешний вид, подписи и состояния полей |
| Проверка доступности файла | Проверка отправки | Обработка данных и место получения обращения |
| Документ открылся | Запрос принят или произошла ошибка | Разные сообщения для успешного и неуспешного результата |
| Замена файла заказчиком | Работа с обращениями | Ответственный за систему получения и доступ к ней |
Вёрстка отвечает за интерфейс этой цепочки — кто подключает обработку и проверяет доставку, нужно назвать отдельно
Именно поэтому полезнее описать действие посетителя, чем заказывать «кнопку и форму» без уточнений — в первом варианте результат можно проверить по шагам
Как заказчику проверять результат
Попросите тестовую версию, которую можно открыть в браузере — по картинке нельзя проверить переходы и поведение
Начните с основного пути посетителя: найти услугу, прочитать условия, перейти к действию и понять результат
Затем повторите путь на телефоне, измените ширину окна и проверьте управление клавиатурой
Не ограничивайтесь успешным сценарием — если есть форма, нужен понятный ответ при ошибке и недоступности подключения
W3C рекомендует давать ясные уведомления о результате и инструкции по исправлению в руководстве для форм
Для замечания достаточно записать страницу, действие, ожидаемый и фактический результат — это намного конкретнее, чем «вёрстка не такая»
Как связаны дизайн, вёрстка и редизайн
Дизайн определяет содержание и визуальное решение, вёрстка реализует согласованный интерфейс, а редизайн означает изменение уже существующего решения
В проекте эти задачи могут идти рядом, но их полезно разделять при оценке
Если готового макета нет, сначала нужно определить структуру и оформление — иначе исполнитель будет принимать дизайнерские решения во время разработки, а заказчик не всегда будет понимать, что уже согласовано
Если сайт уже работает, часть решения может быть пригодна для повторного использования — об этом подробнее в проверке необходимости редизайна
Что подготовить перед обсуждением
Сохраните актуальный макет, список страниц, содержание и нужные действия
Укажите действующую систему и команду, которая будет заниматься подключениями, если она есть
Опишите ожидаемый формат передачи — готовые файлы и работающая страница на домене требуют разного состава задач
На странице услуги вёрстки собраны границы работ и бриф для подготовки — скачивание файла не отправляет заявку
Если следующий вопрос связан с бюджетом, переходите к составу стоимости вёрстки
Частые вопросы
Вёрстка — это создание сайта целиком?
Не обязательно — она может быть частью проекта, где отдельно нужны дизайн, тексты, система управления, обработка данных и публикация
Нужно ли заказывать вёрстку, если сайт собирается в конструкторе?
Нужно оценить, как выбранный инструмент реализует ваш макет и действия — работа по сборке и настройке всё равно имеет состав, даже если часть кода формирует платформа
Почему нельзя принять работу только по скриншоту?
Он показывает один момент на одном размере экрана — ссылки, клавиатура, состояния, изменение содержания и обработка действий требуют проверки в браузере
Источники
Проверено 29 октября 2026 года — примеры и порядок обсуждения предложены редакцией KEIVO