Роман Тишкин

Роман Тишкин

Креативный директор, основатель

Как составить техническое задание на разработку сайта — гайд от mädseven

madseven_cinematic_digital_illustration_of_glowing_neon_green_0a149d70-3c64-4e4f-a0b0-768ca647809f_1.png 07.11.2025

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

Зачем техническое задание вообще нужно (и кому)

  • Заказчику: фиксирует ожидания, даёт базу для сравнений КП, страхует от «этого не было в задаче».
  • Команде исполнителя: превращает хотелки в требования, позволяет оценить трудоёмкость и цену, служит чек-листом на приёмке.
  • Юристам и менеджерам: документ-основание для этапов и актов, критерии приёмки, зона ответственности.

Ключ: техническое задание не должно быть «про всё». Оно должно быть про конкретный сайт, задачи бизнеса и измеримые критерии качества.

Принципы хорошего технического задания

1. Конкретность. Не «красиво», а «минимализм, контрастные шрифты, без параллакса».

2. Полнота по критичным темам. Функционал, интеграции, роли доступа, SEO-блок, безопасность, контент.

3. Измеримость. «Core Web Vitals: LCP ≤ 2,5 c, CLS ≤ 0,1», «формы отправляют на sales@… + в CRM».

4. Структура. Нумерация, оглавление, глоссарий для редких терминов.

5. Актуальность. Любое решение (CMS, библиотека, сервис) — с версией и ограничениями.

Структура технического задания на разработку сайта (каркас mädseven)

1. Вводные и цели проекта

  • Описание бизнеса и роли сайта в воронке (лиды, продажи, информирование).

  • KPI: заявки/продажи, CPL/CPA, время до первой конверсии, доля мобильного трафика.

2. ЦА и сценарии

  • Сегменты пользователей, боли/мотивации.

  • 2–3 ключевых user-flow: «пришёл → понял → сравнил → оставил заявку/купил».

3. Информационная архитектура

  • Карта сайта (разделы/подразделы).

  • Страницы-ядра и связи между ними.

4. Функциональные требования

  • Формы, поиск, фильтры, личный кабинет, корзина, интеграции (CRM, 1С, оплатa, доставка, чат).

  • Роли и права (админ, редактор, менеджер, партнёр).

5. Контент

  • Кто производит тексты/фото/видео, в каком объёме и формате.

  • Тональность, правила верстки контента, редакционная политика.

6. Дизайн-система

  • Референсы, бренд-гайд, сетка, компоненты, состояния (hover, error, empty).

  • Иллюстрации/иконки, доступность: контраст, фокус, клавиатура, alt-тексты.

7. Технологии и инфраструктура

  • CMS/фреймворк (версии), плагины, ограничения.

  • Хостинг, окружения (dev/stage/prod), логирование, бэкапы, SLA.

8. Производительность и качество

  • Бюджеты: размер главной ≤ X КБ, критический CSS, lazy-load, webp/avif.

  • Цели по PageSpeed/Core Web Vitals.

9. SEO-требования

  • ЧПУ, структура URL, мета, микроразметка Schema.org, sitemap/robots, 301-редиректы.

  • Генерация сниппетов, каноникал, pagination, hreflang (если нужно).

10. Безопасность и данные

  • HTTPS, CSP, защита форм, хранение и срок логов, обработка персональных данных.

  • Роли доступа, двуфакторка, аудит действий.

11. Тестирование и приёмка

  • Чек-листы, поддерживаемые браузеры/устройства, баг-классы и критерии блокера.

  • UAT-сценарии (что проходит бизнес до релиза).

12. План проекта и этапность

  • Прототипы → Дизайн → Верстка → Разработка → Интеграции → Тестирование → Контент → Запуск.

  • Точки согласования, пакеты правок, артефакты на каждом этапе.

13. Бюджет и лицензии

  • Разбивка по этапам, сторонние сервисы, оплачиваемые плагины, авторские права.

Как написать техническое задание: пошагово

Шаг 1. Сбор требований

  • Интервью с владельцем процесса и тем, кто примет работу.

  • Анализ конкурентов и «анти-референсов» (чего точно не хотим).

  • Карта событий: что пользователи должны сделать на сайте в первые 30 секунд.

Шаг 2. Детализация сценариев

  • Превращаем сценарии в требования: поля форм, обязательность, валидация, ответы сервера.

  • Для e-commerce — корзина, бонусы, возвраты, статусы заказов, письма/смс, способы оплаты.

Шаг 3. Техкарта проекта

  • Выбор стека и CMS с учётом контента и нагрузки.

  • Описываем интеграции блок-схемами: кто инициирует обмен, форматы, частота, обработка ошибок.

Шаг 4. Критерии приёмки

  • «Готово» — это не «нравится». Это: чек-лист тестов пройден, цели Core Web Vitals достигнуты, формы шлют в CRM, письма не попадают в спам, Яндекс.Метрика собирает события.

Шаг 5. Версионирование и гибкость

  • Техническое задание живёт вместе с проектом: фиксируем версии, все изменения — через change-log и допсогласование.

Частые ошибки в техническом задании (и как их избежать)

  • Абстрактные формулировки. Меняем «быстро грузится» на «LCP ≤ 2,5 c на 75-м перцентиле мобильного трафика».

  • Нет контента. Указываем ответственных и дедлайны на тексты/фото; закладываем редактуру.

  • Без SEO-основания. Прописываем структуру H1–H3, шаблоны мета, перелинковку, микроразметку.

  • Не описали интеграции. Схемы обмена, поля, частота, ретраи, эскалации.

  • Нет критериев приёмки. Вводим UAT-сценарии и «определение готовности» (Definition of Done).

  • Перепутали роли. Назначаем ответственных по RACI: кто согласует, кто делает, кто консультирует, кого информируем.

Мини-шаблон технического задания (можно копировать и дополнять)

1. Проект и цели

  • Назначение сайта: лидогенерация / продажи / инфо-поддержка.

  • KPI: X заявок/месяц, CPL ≤ …, конверсия из визита ≥ …%.

2. ЦА и сценарии

  • Сегменты: …

  • User-flow: «Главная → Каталог → Фильтр → Карточка → Заявка».

3. Архитектура и функционал

  • Страницы: Главная, Каталог, Категория, Карточка, О компании, Блог, Контакты.

  • Функции: поиск, фильтр, сравнение, формы, авторизация, ЛК (опционально).

4. Дизайн

  • Референсы: ссылки.

  • UI-кит: сетка, шрифты, кнопки, формы, состояния.

5. Контент

  • Источник и объём: тексты (заголовки/описания), фото (размер/формат).

  • Правила: уникальность, alt-тексты, орфография, единицы измерения.

6. Технологии

  • CMS: … (версия).

  • Интеграции: CRM, платежи, 1С, чат.

7. Производительность и SEO

  • Core Web Vitals: LCP ≤ 2,5 c, CLS ≤ 0,1, INP ≤ 200 мс.

  • SEO: ЧПУ, мета-шаблоны, микроразметка, sitemap/robots, каноникал.

8. Безопасность

  • HTTPS, HSTS, CSP, обработка персональных данных, права ролей.

9. Тестирование и приёмка

  • Поддерживаемые среды/браузеры.

  • Чек-лист тестов + UAT-сценарии (приложение).

  • Критерии «Готово».

10. Этапы и сроки

  • Прототипы — …

  • Дизайн — …

  • Разработка — …

  • Тестирование — …

  • Запуск — …

11. Бюджет и лицензии

  • Этапность оплаты, платные сервисы, права на исходники.

Пример фрагмента требований (как должно выглядеть «измеримо»)

Форма «Заказать звонок»

  • Поля: Имя (string 2–50), Телефон (+7 формат), Комментарий (0–300).

  • Валидация: маска телефона, обязательны Имя и Телефон.

  • Отправка: REST → CRM /leads (JSON) + письмо на sales@….

  • Уведомления: спасибо-страница + событие form_success в Метрике/GA.

  • Ошибки: сервер недоступен — показываем сообщение и пишем в лог с trace-id.

  • SLA: успешная обработка ≤ 2 с, доступность 99,9% мес.

SEO-блок: чтобы техническое задание помогало ранжироваться, а не мешало

  • Структура заголовков: один H1 на страницу, H2–H3 по разделам.

  • Шаблоны Title/Description для типов страниц (категории, карточки, статьи).

  • Микроразметка: Organization, BreadcrumbList, Product/Offer/Review (для e-commerce), Article (для блога).

  • Техническое: каноникал, открытый robots, карта сайта (html+xml), 301 при изменении URL.

  • Генерация картинок превью (OG/TG): динамически из заголовка и обложки.

Чек-лист приёмки (сохраните себе)

  • Все целевые сценарии проходят от начала до конца.

  • Для большинства пользователей сайт открывается быстро и работает ровно.

  • Формы шлют данные в CRM и на почту, дубликаты отсекаются.

  • Метрики и события настроены, цели фиксируются.

  • SEO-основа: карта сайта, robots, редиректы, микроразметка.

  • Контент уникален, alt-тексты заполнены, доступность проверена.

  • Бэкапы и логи работают, роли доступа ограничены.

  • Передан пакет: исходники дизайна, исходники кода, инструкции, доступы.

FAQ коротко

  • Можно ли начать без технического задания? Можно, если любите квесты «догоняй бюджет». Мы — не любим.
  • Кто пишет техническое задание? Идеально: заказчик формулирует бизнес-задачи, агентство переводит в техтребования.
  • Сколько страниц в техническом задании? Столько, сколько нужно, чтобы снять двусмысленность. Не больше.
  • Что с правками? Фиксируем версии, изменения — через change-log и допсогласование.

Итог

Грамотное техническое задание — половина успеха «разработки сайта». Оно экономит деньги, сокращает сроки и избавляет от бесконечных «а давайте ещё вот это». Делайте техническое задание конкретным, измеримым и живым — таким, которым команда реально пользуется каждый день.

Если хотите, mädseven поможет разработать техническое задание под ваши цели, а затем реализовать сайт по нему — без сюрпризов и «ожидание/реальность». Напишите нам — обсудим задачу и соберём проект в понятный план.