Зачем вообще нужно техзадание для верстальщика
Хорошая верстка начинается не с HTML и CSS, а с понятного технического задания.
Если разработчик получает макеты без описания состояний элементов, адаптивности, интерактивных сценариев и требований к результату, часть решений ему приходится принимать самостоятельно. В итоге заказчик может получить технически рабочую страницу, которая отличается от ожидаемого результата.
Техзадание для верстальщика помогает заранее зафиксировать:
- какие страницы необходимо сверстать;
- какие макеты являются исходными;
- как сайт должен выглядеть на разных разрешениях;
- какие элементы интерактивны;
- какие состояния должны быть реализованы;
- какие технологии и ограничения нужно учитывать;
- что считать готовым результатом.
Для бизнеса это еще и способ контролировать сроки, бюджет и качество разработки.
Что должно быть в ТЗ на верстку сайта
Универсального документа, одинаково подходящего для каждого проекта, не существует. Однако большинство качественных ТЗ содержит несколько обязательных разделов.
1. Общая информация о проекте
В начале документа стоит кратко описать проект и его цель.
Например:
Необходимо выполнить адаптивную верстку корпоративного сайта компании. Основная задача — корректно перенести утвержденные дизайн-макеты в HTML/CSS/JS и обеспечить корректное отображение страниц на компьютерах, планшетах и мобильных устройствах.
Здесь же можно указать:
- название проекта;
- ссылку на дизайн в Figma;
- список страниц;
- контактное лицо;
- сроки;
- используемый стек;
- ссылку на техническую документацию, если она есть.
Чем понятнее контекст, тем меньше вопросов возникает у верстальщика в процессе работы.
2. Список страниц
Не стоит ограничиваться формулировкой «сверстать сайт по макету».
Составьте конкретный перечень:
- Главная страница.
- О компании.
- Услуги.
- Карточка услуги.
- Кейсы.
- Статья.
- Контакты.
- Страница 404.
Если несколько страниц построены на одном шаблоне, это тоже необходимо обозначить.
Пример:
Страницы «Услуга» используют единую структуру шаблона. Отличаться могут заголовок, изображения, описание, список преимуществ и дополнительные блоки.
Так исполнитель понимает объем работы и не воспринимает каждую страницу как отдельную уникальную разработку.
Как описать макеты в техническом задании
Если дизайн подготовлен в Figma, приложите ссылку на актуальный файл и обязательно укажите, какая версия является финальной.
Хорошая формулировка:
Основным источником визуальных требований является макет Figma. При расхождении между отдельными изображениями и Figma приоритет имеет актуальная версия макета, отмеченная как Final.
Также желательно указать:
- какие фреймы относятся к каким страницам;
- какие компоненты являются общими;
- где находятся мобильные версии;
- какие элементы являются интерактивными;
- какие изображения необходимо оптимизировать;
- какие шрифты используются.
Пример
Для десктопной версии используется фрейм 1440 px. Мобильная версия представлена отдельным фреймом 390 px. Промежуточные состояния должны формироваться адаптивно между указанными разрешениями.
Такое описание значительно полезнее, чем просто ссылка на Figma.
Адаптивность: один из самых важных разделов ТЗ
Фраза «сделать адаптив» практически ничего не говорит исполнителю.
В ТЗ на верстку сайта желательно зафиксировать хотя бы основные контрольные точки.
Например:
| Устройство | Ширина |
|---|---|
| Большой экран | 1440 px |
| Ноутбук | 1280 px |
| Планшет | 768 px |
| Мобильный | 390 px |
При этом не обязательно создавать отдельный макет для каждого возможного разрешения.
Можно сформулировать требование так:
Верстка должна корректно адаптироваться между контрольными разрешениями. Не допускаются горизонтальный скролл, выход контента за пределы viewport и наложение элементов.
Отдельно стоит описать поведение крупных блоков.
Например:
На мобильном устройстве основное меню заменяется кнопкой открытия меню. Карточки услуг переходят из трех колонок в одну. Изображение в первом экране масштабируется пропорционально без искажения.
Состояния элементов тоже нужно описывать
Одна из распространенных ошибок — описывать только внешний вид страницы.
Интерактивные элементы имеют разные состояния:
- default;
- hover;
- active;
- focus;
- disabled;
- error;
- success;
- loading.
Например, для кнопки:
В обычном состоянии кнопка имеет основной стиль из макета. При наведении изменяется цвет фона. При нажатии применяется active-состояние. Для клавиатурной навигации необходимо предусмотреть видимый focus.
Для формы:
При отправке формы отображается состояние загрузки. При успешной отправке показывается сообщение об успешной отправке. При ошибке валидации под соответствующим полем отображается текст ошибки.
Это особенно важно для коммерческих сайтов, где формы и CTA-элементы напрямую влияют на конверсию.
Как описать анимации
Не стоит писать в ТЗ просто «добавить красивые анимации».
Лучше описывать конкретное поведение:
При появлении карточки в зоне видимости она плавно проявляется с изменением прозрачности от 0 до 1. Продолжительность — около 300 мс.
Или:
При наведении на карточку изображение плавно увеличивается, при этом контент карточки остается неподвижным.
Если точные параметры не критичны, можно зафиксировать принцип:
Анимации должны быть плавными и не мешать восприятию контента. Движение элементов не должно приводить к скачкам layout.
Пример ТЗ для верстальщика
Ниже — упрощенный пример, который можно использовать как основу для реального проекта.
1. Задача
Сверстать адаптивный корпоративный сайт по утвержденным макетам Figma.
Необходимо реализовать:
- главную страницу;
- страницу услуги;
- страницу контактов;
- мобильную версию;
- интерактивное меню;
- формы обратной связи.
2. Дизайн
Исходные макеты находятся в Figma.
Контрольные разрешения:
- desktop — 1440 px;
- tablet — 768 px;
- mobile — 390 px.
При разработке необходимо использовать стили и компоненты из утвержденного макета.
3. Требования к верстке
Верстка должна:
- корректно отображаться на актуальных версиях популярных браузеров;
- быть адаптивной;
- не создавать горизонтальный скролл;
- корректно работать с длинными заголовками;
- сохранять структуру при изменении размера окна;
- использовать семантическую HTML-разметку;
- учитывать базовые требования доступности.
4. Header
На desktop отображаются:
- логотип;
- основное меню;
- телефон;
- кнопка «Получить консультацию».
На mobile основное меню скрыто и открывается по нажатию на иконку.
При прокрутке страницы header фиксируется сверху.
5. Карточки услуг
На desktop — три карточки в ряд.
На планшете — две карточки.
На мобильном — одна карточка в ряд.
При наведении на карточку изменяется ее визуальное состояние согласно макету.
6. Форма
Поля:
- имя;
- телефон;
- e-mail;
- комментарий.
Обязательные поля отмечаются визуально.
При отправке:
- выполняется валидация;
- отображается состояние загрузки;
- после успешной отправки пользователь получает сообщение;
- при ошибке выводится соответствующее уведомление.
7. Результат
Исполнитель передает:
- исходные файлы проекта;
- готовую верстку;
- подключенные шрифты;
- используемые изображения;
- инструкции по запуску, если они необходимы.
Готовой считается работа, которая соответствует утвержденным макетам и проходит согласованный перечень проверок.
Что нельзя оставлять «на усмотрение верстальщика»
Есть вещи, которые особенно часто становятся причиной правок.
Неопределенные брейкпоинты
«Сделать под мобильные устройства» — слишком размыто.
Лучше указать контрольные разрешения и правила поведения элементов между ними.
Неописанные формы
Если не указать сценарий после отправки формы, разработчик может реализовать только визуальную часть.
Отсутствие информации об интерактивности
Неясно, является ли карточка кликабельной, открывается ли модальное окно, должна ли кнопка менять состояние.
Неуказанные шрифты
Если шрифт отсутствует или не описан, визуальное соответствие макету может существенно пострадать.
Формулировка «сделать как на макете»
Макет показывает внешний вид, но не всегда показывает все состояния и сценарии.
Поэтому Figma — это источник визуальных требований, а ТЗ должно описывать логику и ограничения.
Частые ошибки при составлении ТЗ на верстку
Слишком общее описание
Плохо:
Сверстать сайт по Figma, сделать адаптивным.
Хорошо:
Сверстать страницы по указанным фреймам Figma. Реализовать адаптивность между 1440 и 390 px, предусмотреть мобильное меню, состояния кнопок и формы, исключить горизонтальный скролл.
Попытка описать абсолютно всё
Другая крайность — документ на десятки страниц, где подробно повторяется содержимое каждого макета.
ТЗ должно устранять неопределенность, а не дублировать дизайн.
Отсутствие критериев приемки
Фраза «если выглядит нормально — значит готово» создает пространство для субъективных оценок.
Лучше заранее определить критерии:
- страницы сверстаны;
- адаптивность проверена;
- формы работают;
- интерактивные элементы реализованы;
- критические визуальные расхождения отсутствуют;
- проект проходит проверку на согласованных разрешениях.
Как сделать ТЗ удобным для веб-студии
Если сайт заказывается у веб-студии, техническое задание должно быть не только инструкцией для верстальщика.
Оно помогает всей команде оценить проект.
Хорошее ТЗ позволяет веб-студии:
- точнее рассчитать стоимость разработки;
- определить состав работ;
- выявить недостающие материалы;
- оценить сроки;
- заранее обнаружить технические ограничения;
- сформировать понятные критерии приемки.
Поэтому перед началом разработки полезно провести короткий технический аудит задачи.
Если у вас уже есть дизайн в Figma, но нет уверенности, что его достаточно для передачи в разработку, специалисты веб-студии могут помочь превратить макеты и бизнес-требования в полноценное техническое задание.
Чек-лист перед передачей ТЗ верстальщику
Перед началом работы проверьте:
- перечислены все страницы;
- указана актуальная версия макетов;
- определены контрольные разрешения;
- описана адаптивность;
- указаны интерактивные элементы;
- описаны состояния кнопок и форм;
- определены используемые шрифты;
- понятны требования к изображениям;
- указаны браузеры и устройства для проверки;
- определены критерии приемки;
- описаны дополнительные ограничения;
- назначен ответственный за согласование вопросов.
Если все пункты закрыты, вероятность дорогостоящих переделок после верстки существенно ниже.
Когда лучше заказать разработку сайта у веб-студии
Самостоятельно подготовить ТЗ можно, особенно для небольшого лендинга. Но если проект включает десятки страниц, сложную адаптивность, личный кабинет, интеграции, нестандартные интерфейсы или высокие требования к производительности, техническое задание становится частью полноценного проектирования.
Веб-студия может подключиться еще до начала верстки: проверить макеты, выявить противоречия, определить технические ограничения и подготовить требования для разработки.
Это позволяет не просто «сверстать дизайн», а получить сайт, который соответствует бизнес-задачам, техническим требованиям и ожиданиям пользователей.
Нужен сайт или хотите понять, во сколько обойдется разработка? Передайте веб-студии макеты и описание задачи — специалисты смогут оценить объем работ, предложить оптимальную структуру и сформировать техническое задание.
FAQ
Что такое техзадание для верстальщика?
Это документ, в котором фиксируются страницы, макеты, требования к адаптивности, интерактивным элементам, состояниям компонентов, браузерам, технологиям и результату работы.
Можно ли обойтись без ТЗ, если есть макет в Figma?
Для простой страницы иногда достаточно макета. Но Figma не всегда содержит информацию о поведении элементов, адаптивности, состояниях и технических ограничениях. Поэтому для полноценного проекта лучше дополнить дизайн техническим заданием.
Кто должен составлять ТЗ на верстку?
Это может сделать заказчик, дизайнер, проектировщик, frontend-разработчик или команда веб-студии. На практике лучший результат получается, когда требования согласуются между бизнесом, дизайном и разработкой.
Нужно ли указывать конкретные размеры экранов?
Желательно определить хотя бы несколько контрольных разрешений. При этом адаптивная верстка должна корректно работать и между ними.
Что написать в ТЗ про мобильную версию?
Нужно описать не только размер мобильного макета, но и изменения структуры: какие блоки скрываются, какие перестраиваются, как работает меню, как изменяется количество колонок и что происходит с интерактивными элементами.
Как понять, что верстка выполнена правильно?
Заранее определите критерии приемки: соответствие макетам, корректность адаптивности, работу интерактивных элементов, отсутствие критических ошибок и соответствие согласованным техническим требованиям.
Итог
Грамотное техзадание для верстальщика — это не формальность и не копия макета из Figma. Его задача — убрать неоднозначность между заказчиком, дизайнером и разработчиком.
Чем точнее описаны страницы, адаптивность, интерактивные состояния, формы и критерии приемки, тем меньше вероятность неожиданных правок, дополнительных расходов и задержек.
А если задача выходит за рамки простой посадочной страницы, оптимально подключить веб-студию еще на этапе подготовки требований. Это позволит оценить проект комплексно — от структуры и дизайна до верстки, разработки и дальнейшего развития сайта.
