# Услуги вёрстки сайта: что входит и что получает заказчик

Как выбрать состав услуги вёрстки: страницы, адаптивы, состояния, подключения и комплект передачи — что уточнить до согласования работы

Автор: Редакция KEIVO
Дата публикации: 2026-10-29
Обновлено: 2026-10-29
Канонический URL: https://keivo.ru/blog/chto-vhodit-v-uslugu-verstki/

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



Когда говорят «макет готов, осталось сверстать», легко представить последний простой шаг — перенести картинку на сайт

Разработчику нужно определить, как страница меняется по ширине, что делают её элементы и что происходит с реальным содержанием

Эта статья поможет выбрать состав услуги вёрстки, понять формат передачи и записать границы ответственности до согласования работы

## Сначала определите, какую услугу вы выбираете

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

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

В браузере те же решения должны работать с разным размером окна, длиной текста, способом управления и скоростью соединения

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

Макет остаётся источником согласованного решения, но сам по себе не описывает каждую возможную ситуацию


![Генеративная иллюстрация вёрстки: веб-страница и редактор HTML и CSS на одном мониторе](/blog/_media/p1-20261029/a12-cover-4f5f437943b0.webp)

Генеративная иллюстрация KEIVO — вымышленные интерфейсы, не клиентский проект и не пример кода для копирования



## Какие части работы скрываются за названием услуги

Обычно заказчику не нужно изучать синтаксис — достаточно понимать роли основных частей, чтобы одинаково обсуждать результат с исполнителем




| Часть | За что отвечает | Что видит посетитель |
|---|---|---|
| HTML | Содержание и структура страницы | Заголовки, текст, ссылки, изображения, элементы управления |
| CSS | Оформление и расположение | Размеры, шрифты, цвета, сетка и перестроение блоков |
| JavaScript, когда он нужен | Поведение и реакции интерфейса | Открытие меню, переключение вариантов, обновление состояния |
| Серверные системы | Получение и обработка данных за пределами страницы | Сохранённый заказ, доставленное обращение, данные кабинета |




Инструменты разработки заказчику необязательно выбирать самому — попросите объяснить, как будут обновляться страницы и кто сможет продолжить работу после передачи

Смысловая структура важна не только визуально — W3C объясняет, как разметка областей и заголовков помогает ориентироваться на странице в [руководстве по структуре](https://www.w3.org/WAI/tutorials/page-structure/)

## Что входит в результат вёрстки

Состав зависит от задания — его полезно фиксировать через страницы, элементы и сценарии, которые можно проверить

### Внешний вид с настоящим содержанием

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

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

### Работа на разных экранах

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

Заказчику важно проверить доступность содержания и действий, а не только наличие отдельного мобильного скриншота

Правила и способы приёмки разобраны в [гайде о подготовке адаптивного макета](/blog/podgotovit-maket-k-verstke/)

### Состояния и управление

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

Ссылки и кнопки должны выполнять согласованные действия — надпись на макете ещё не определяет адрес перехода или способ обработки данных

### Комплект для дальнейшей работы

Исходники — файлы проекта, в которых разработчик меняет код, стили и компоненты — собранная версия подготовлена для размещения и не всегда удобна для дальнейшего редактирования

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

Установка в действующую CMS и публикация на домене — следующие работы, которые нужно явно включить в результат или поручить вашей команде

## Что не появляется автоматически

В дизайне может быть форма с красивым сообщением об успехе, но для приёма обращения нужен работающий обработчик

В каталоге могут быть нарисованы цена и остаток, но их актуализация потребует источника данных

У личного кабинета могут быть готовы экраны, но авторизация и доступ к сведениям пользователя — отдельные задачи


Как уточнить границу

Вместо «сделать форму» запишите, куда она отправляет данные, кто реализует обработку и как вы убедитесь в получении тестового обращения



То же относится к оплате, системе управления содержанием, размещению на сервере и поддержке после запуска

Если эти подключения нужны, включите их в предложение отдельными строками — дальше покажем разницу на одной кнопке

Отдельно разберите [что означает «под ключ» в предложении](/blog/verstka-sayta-pod-klyuch/) — формулировка должна быть связана с конкретным комплектом передачи и ответственными

## Учебный пример одной страницы услуги

Разберём вымышленную страницу клининговой компании — на ней есть описание уборки, перечень работ и кнопка «Скачать список работ»

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




- На странице «Что входит в уборку» — перечень работ и отдельная ссылка на документ

- Действие Кнопка «Скачать список работ» открывает актуальный файл компании

- Проверка Файл доступен с телефона, его содержание совпадает с перечнем на странице

- Передача У заказчика есть сам документ и пояснение, как заменить его следующей версией


Учебный пример KEIVO — от кнопки до проверяемого результата





Заказчик может принять этот блок самостоятельно: открыть страницу, нажать кнопку, прочитать файл и сравнить условия — одного визуального совпадения кнопки с макетом недостаточно

### Если вместо скачивания нужна заявка

Теперь компания меняет действие на «Узнать стоимость уборки» и хочет получать номер телефона — внешний вид блока похож, но результат работы уже другой

Нужно определить поля и сообщение об ошибке, подключить получение данных и показать посетителю подтверждение только после успешной обработки




| Было | Стало | Что добавилось в задачу |
|---|---|---|
| Ссылка на готовый документ | Поля имени и телефона | Внешний вид, подписи и состояния полей |
| Проверка доступности файла | Проверка отправки | Обработка данных и место получения обращения |
| Документ открылся | Запрос принят или произошла ошибка | Разные сообщения для успешного и неуспешного результата |
| Замена файла заказчиком | Работа с обращениями | Ответственный за систему получения и доступ к ней |




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

Именно поэтому полезнее описать действие посетителя, чем заказывать «кнопку и форму» без уточнений — в первом варианте результат можно проверить по шагам

## Как заказчику проверять результат

Попросите тестовую версию, которую можно открыть в браузере — по картинке нельзя проверить переходы и поведение

Начните с основного пути посетителя: найти услугу, прочитать условия, перейти к действию и понять результат

Затем повторите путь на телефоне, измените ширину окна и проверьте управление клавиатурой

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

W3C рекомендует давать ясные уведомления о результате и инструкции по исправлению в [руководстве для форм](https://www.w3.org/WAI/tutorials/forms/notifications/)

Для замечания достаточно записать страницу, действие, ожидаемый и фактический результат — это намного конкретнее, чем «вёрстка не такая»

## Как связаны дизайн, вёрстка и редизайн

Дизайн определяет содержание и визуальное решение, вёрстка реализует согласованный интерфейс, а редизайн означает изменение уже существующего решения

В проекте эти задачи могут идти рядом, но их полезно разделять при оценке

Если готового макета нет, сначала нужно определить структуру и оформление — иначе исполнитель будет принимать дизайнерские решения во время разработки, а заказчик не всегда будет понимать, что уже согласовано

Если сайт уже работает, часть решения может быть пригодна для повторного использования — об этом подробнее в [проверке необходимости редизайна](/blog/kogda-nuzhen-redizayn-sayta/)

## Что подготовить перед обсуждением

Сохраните актуальный макет, список страниц, содержание и нужные действия

Укажите действующую систему и команду, которая будет заниматься подключениями, если она есть

Опишите ожидаемый формат передачи — готовые файлы и работающая страница на домене требуют разного состава задач

На [странице услуги вёрстки](/services/verstka/) собраны границы работ и бриф для подготовки — скачивание файла не отправляет заявку

Если следующий вопрос связан с бюджетом, переходите к [составу стоимости вёрстки](/blog/stoimost-verstki-sayta/)

## Частые вопросы


### Вёрстка — это создание сайта целиком?

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



### Нужно ли заказывать вёрстку, если сайт собирается в конструкторе?

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



### Почему нельзя принять работу только по скриншоту?

Он показывает один момент на одном размере экрана — ссылки, клавиатура, состояния, изменение содержания и обработка действий требуют проверки в браузере



## Источники

- [MDN — веб-технологии и их роли](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model)

- [W3C — структура страницы](https://www.w3.org/WAI/tutorials/page-structure/)
- [W3C — уведомления и ошибки формы](https://www.w3.org/WAI/tutorials/forms/notifications/)
- [MDN — адаптивное оформление](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design)

Проверено 29 октября 2026 года — примеры и порядок обсуждения предложены редакцией KEIVO