Как написать техническое задание на сайт: готовый шаблон от веб-студии с 19-летним опытом

Введение: почему ТЗ — это половина успеха

«У меня нет технического задания, но вы же профессионалы — разберётесь» — фраза, от которой рядовых разработчиков начинается нервный тик. За 19 лет работы мы прошли через сотни проектов: с ТЗ и без, с подробными брифами и с двухстраничными описаниями «сделайте красиво». И знаем наверняка: качество технического задания напрямую определяет сроки, бюджет и результат. Хорошее ТЗ сокращает время разработки на 30–40%, уменьшает количество доработок в 5 раз и защищает обе стороны от недопонимания.

В этой статье мы дадим готовый шаблон ТЗ на создание сайта, который можно взять за основу, адаптировать под свой проект и отдать подрядчику. Этот шаблон проверен на десятках проектов и покрывает 90% типовых задач.

Что такое техническое задание и зачем оно нужно

Техническое задание (ТЗ) — это документ, который описывает:

1. Что должно быть сделано
2. Как это должно работать
3. Какие есть ограничения и требования
4. По каким критериям будет приниматься работа

Для заказчика ТЗ защищает от:

1. Недоделанного функционала («мы не обсуждали, что тут должна быть корзина»)
2. Неконтролируемого роста бюджета («а это в базовую стоимость не входило»)
3. Несоответствия ожиданиям и реальности

Для подрядчика ТЗ защищает от:

1. Бесконечных правок («а можно ещё вот это немножко переделать»)
2. Недопонимания потребностей клиента
3. Споров на этапе сдачи проекта

Структура технического задания

Раздел 1. Общие сведения

1.1. Наименование проекта Например: «Создание корпоративного сайта и интернет-магазина для ООО «СтройМаркет»»

1.2. Цели создания сайта

1. Основная цель: увеличение продаж через интернет на 30% в течение года
2. Дополнительные: формирование имиджа, сбор заявок, информирование клиентов

1.3. Целевая аудитория

1. Основная: мужчины 25–45 лет, владельцы квартир, доход средний и выше, Москва и МО
2. Дополнительная: дизайнеры интерьера, строительные бригады

1.4. Конкуренты Перечислите 3–5 основных конкурентов с ссылками на их сайты. Укажите, что вам нравится, а что нет.

Раздел 2. Требования к дизайну

2.1. Общий стиль

1. Современный, минималистичный, с акцентами корпоративного цвета
2. Референсы: ссылки на сайты, которые нравятся
3. Фирменные цвета: указать HEX-коды
4. Шрифты: основной и дополнительный

2.2. Логотип и фирменный стиль

1. Логотип предоставляется заказчиком в форматах AI, EPS, PNG, SVG
2. Или: разработка логотипа входит в задачу

2.3. Требования к макетам

1. Дизайн в Figma или Adobe XD
2. Макеты всех уникальных страниц
3. Адаптивные версии: десктоп (1920px), планшет (768px), мобильный (375px)

Раздел 3. Структура сайта

3.1. Карта сайта (Site Map)

Пример для корпоративного сайта:

1. Главная страница
2. О компании
1. История
2. Команда
3. Лицензии и сертификаты
3. Услуги
1. Услуга 1
2. Услуга 2
3. Услуга 3
4. Портфолио / Кейсы
5. Блог / Новости
1. Категория 1
2. Категория 2
6. Контакты
7. Политика конфиденциальности

3.2. Описание каждой страницы

Для каждой страницы указать:

1. Назначение
2. Ключевые элементы (слайдер, форма, калькулятор)
3. Призыв к действию (CTA)

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

4.1. CMS

1. Предпочтительная CMS: 1С-Битрикс, WordPress, самописная — указать
2. Или: выбор CMS — на усмотрение подрядчика с обоснованием

4.2. Формы обратной связи

1. Форма «Заказать звонок» (имя, телефон)
2. Форма «Задать вопрос» (имя, email, вопрос)
3. Форма «Оставить заявку» (имя, телефон, услуга, комментарий)
4. Отправка данных на email и в CRM (указать какую)

4.3. Поиск по сайту

1. Необходим / не необходим
2. Если да — по каким разделам

4.4. Многоязычность

1. Языки: русский, английский
2. Способ реализации: отдельные URL (/en/) или поддомены

4.5. Личный кабинет

1. Если нужен — описать функционал:
1. История заказов
2. Избранное
3. Персональные скидки

4.6. Интеграции

1. С 1С / МойСклад / CRM
2. С платёжными системами (ЮKassa, Сбербанк, Тинькофф)
3. С доставкой (СДЭК, Boxberry)
4. С сервисами аналитики (Метрика, Analytics)

Раздел 5. Требования к контенту

5.1. Наполнение

1. Тексты предоставляет заказчик / пишет подрядчик
2. Фотографии: предоставляет заказчик / организуется фотосессия / покупаются стоковые
3. Видео: есть / нужно снять

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

1. Человекопонятные URL (ЧПУ)
2. Уникальные Title и Description для каждой страницы
3. Настройка редиректов
4. Sitemap.xml и robots.txt
5. Микроразметка Schema.org

Раздел 6. Технические требования

6.1. Кроссбраузерность

1. Chrome, Firefox, Safari, Edge (последние 2 версии)
2. Internet Explorer 11 (если нужна поддержка)

6.2. Адаптивность

1. Десктоп (1920px)
2. Планшет (768px)
3. Мобильный (375px)

6.3. Скорость загрузки

1. Google PageSpeed Insights: не менее 80 баллов для мобильной и десктопной версий
2. Время загрузки первого экрана: не более 2,5 секунд

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

1. SSL-сертификат
2. Защита форм от спама (reCAPTCHA или аналог)
3. Регулярные бэкапы

Раздел 7. Сроки и этапы

Раздел 8. Порядок сдачи-приёмки

8.1. Критерии приёмки

1. Соответствие утверждённым макетам (пиксельная точность ±5px)
2. Корректная работа всех форм и кнопок
3. Отсутствие битых ссылок и ошибок 404
4. Корректное отображение во всех заявленных браузерах
5. Соответствие требованиям скорости загрузки

8.2. Гарантийный срок

1. 1 месяц с момента запуска
2. Бесплатное исправление выявленных ошибок

Раздел 9. Исходные материалы заказчика

Что заказчик предоставляет подрядчику:

1. [ ] Логотип в векторном формате
2. [ ] Фирменные цвета и шрифты
3. [ ] Тексты для всех страниц (или ТЗ на их написание)
4. [ ] Фотографии и видео
5. [ ] Реквизиты и контактная информация
6. [ ] Доступы к хостингу и домену
7. [ ] Доступы к социальным сетям (если нужна интеграция)

Советы по составлению ТЗ

Совет 1: Не пишите ТЗ слишком общо

Плохо: «Сделайте красивый современный сайт». Хорошо: «Сайт в стиле минимализм, основной цвет — синий #0047AB, акцентный — оранжевый #FF6B35, шрифт Montserrat».

Совет 2: Но и не уходите в технические детали

Если вы не разработчик, не пишите «использовать flexbox с wrap и gap 20px». Опишите результат: «блоки должны выстраиваться в 3 колонки на десктопе, в 2 на планшете, в 1 на мобильном».

Совет 3: Используйте визуальные примеры

Скриншоты, ссылки на референсы, наброски на бумаге — всё это помогает понять друг друга. Лучше потратить 30 минут на поиск примеров, чем 3 часа на переделку.

Совет 4: Опишите не только «что», но и «зачем»

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

Совет 5: Учитывайте будущее

Подумайте, что может понадобиться через год:

1. Добавление языков?
2. Расширение каталога?
3. Интеграция с новой CRM?
4. Заложите это в ТЗ как «пункты для будущей доработки».

Готовый шаблон ТЗ для скачивания

Мы подготовили универсальный шаблон технического задания в формате Word/Google Docs. Он содержит все разделы, описанные выше, с примерами заполнения. Вы можете взять его за основу, удалить ненужные пункты и дополнить спецификой вашего проекта.

Скачать шаблон

Что входит в шаблон:

1. Титульный лист
2. Разделы 1–9 с пояснениями
3. Чек-листы для заказчика и подрядчика
4. Таблица этапов с автоматическим расчётом сроков
5. Примеры формулировок

Заключение

Техническое задание — это не бюрократия, а инструмент, который экономит время, деньги и нервы обеим сторонам. Хорошее ТЗ пишется один раз и служит на протяжении всего проекта. Оно защищает от недопонимания, фиксирует договорённости и даёт объективные критерии приёмки.

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

Статья подготовлена командой «Сайты профессионально».