Статья
Как сделать техническое задание на сайт или мобильное приложение
Техническое задание (ТЗ) — это документ, который определяет цели, структуру, функционал и требования к будущему продукту. Грамотно составленное ТЗ минимизирует риски недопонимания между заказчиком и исполнителем, ускоряет разработку и помогает контролировать результат. В этой…

Техническое задание (ТЗ) — это документ, который определяет цели, структуру, функционал и требования к будущему продукту. Грамотно составленное ТЗ минимизирует риски недопонимания между заказчиком и исполнителем, ускоряет разработку и помогает контролировать результат. В этой статье разберем, как составить ТЗ, с примерами для каждого раздела.
1. Введение
Цель раздела
Четко обозначить суть проекта, его масштаб и ключевые ориентиры. Введение задает тон всему документу и помогает команде понять, над чем они работают.
Что включить
Название проекта: ваш бренд или название продукта
Тип продукта
- Сайт (лендинг, интернет-магазин, корпоративный портал);
- Мобильное приложение (iOS, Android, кроссплатформенное);
- Веб-приложение (например, SaaS-платформа);
Основная идея: Краткое описание проблемы, которую решает продукт
Контекст: Почему проект важен для бизнеса или пользователей
Пример для сайта
Название: EcoMarket — онлайн-магазин экологичных товаров.
Тип: Многостраничный сайт с каталогом, корзиной и личным кабинетом.
Идея: Создать платформу для продажи товаров без пластика и химии, объединив эко-бренды в одном месте.
Контекст: Рост спроса на экопродукты на 25% в 2025 году (источник: исследование GreenTrends).
Советы
- Избегайте абстрактных фраз вроде «сделать крутой сайт».
- Укажите источники данных, если приводите статистику (например, «по данным SimilarWeb, аудитория конкурентов — 1 млн пользователей в месяц»).
2. Цели и задачи проекта
Цель раздела
Показать, как продукт поможет бизнесу и пользователям. Цели должны быть измеримыми и реалистичными.
Что включить
2.1. Бизнес-цели
- Увеличить прибыль, снизить затраты, захватить долю рынка.
- Пример:
- Повысить конверсию в покупку с 3% до 8% за 6 месяцев;
- Сократить время обработки заказа с 2 часов до 30 минут.
2.2. Пользовательские цели
- Решить конкретные проблемы аудитории.
- Пример:
- Найти товар за 1 минуту с помощью умного поиска;
- Оплатить заказ без регистрации.
2.3. Метрики успеха
- KPI (Key Performance Indicators), которые будут отслеживаться.
- Пример:
- Удержание пользователей (Retention Rate) ≥ 40% на 7-й день;
- Средний чек ≥ 5000 руб.
Бизнес-цели:01. Привлечь 50 000 установок за первые 3 месяца;
02. Достичь ROI 120% через 6 месяцев.
Пользовательские цели
- Заказать такси за 2 клика;
- Получать уведомления о скидках на любимые категории.
Метрики
- Средний рейтинг в App Store/Google Play ≥ 4.5;
- Время отклика сервера ≤ 500 мс.
Советы
- Используйте SMART-критерии:
- Specific (конкретные),
- Measurable (измеримые),
- Achievable (достижимые),
- Relevant (релевантные),
- Time-bound (ограниченные по времени).
3. Описание целевой аудитории
Цель раздела
Понять, для кого создается продукт, и адаптировать интерфейс под их потребности.
Что включить
3.1. Демография
- Возраст, пол, география, доход, образование.
- Пример:
- Мужчины 30-45 лет, доход 15000 руб + живут в России.
3.2. Поведенческие характеристики
- Где проводят время (соцсети, форумы);
- Как используют аналогичные продукты;
- Пример:
- Активно пользуются Instagram для поиска товаров;
- Чаще заказывают с мобильных устройств.
3.3. Потребности и «боли»
- Что мешает пользователям сейчас.
- Пример:
- Нет времени сравнивать цены в разных магазинах;
- Сложно вернуть товар без чека.
3.4. Персоны пользователейСоздайте 2-3 персонажа — вымышленных представителей аудитории.
Пример персоны:Имя: Анна, 28 лет.
Профессия: Маркетолог.
Цели
- Купить экотовары быстро, без переплаты;
- Получить гарантию возврата.
Страхи
- Попасть на мошеннический сайт;
- Долгая доставка.
Советы
- Используйте данные аналитики (Google Analytics, опросы, соцсети);
- Учитывайте культурные особенности (например, в Японии мобильный интерфейс должен быть минималистичным).
4. Функциональные требования
Цель раздела
Детализировать, какие функции должны быть в продукте, и как они работают.
Что включить
4.1. Пользовательские сценарииОпишите шаги, которые выполняет пользователь для достижения цели.
Пример для интернет-магазина
Сценарий «Оформление заказа»
- Пользователь добавляет товар в корзину;
- Переходит в корзину, проверяет состав;
- Выбирает способ доставки (курьер, самовывоз);
- Вводит промокод (если есть);
- Оплачивает заказ через Google Pay/карту;
- Получает email с подтверждением.
4.2. Модули и функцииРазбейте продукт на логические блоки.
Пример для мобильного приложения:
- Профиль пользователя:
- Регистрация через email/соцсети;
- Редактирование аватара и личных данных;
- История заказов.
- Поиск:
- Фильтры по цене, рейтингу, бренду;
- Автодополнение запросов.
4.3. Интеграции
- С какими внешними сервисами должен взаимодействовать продукт.
- Пример:
- Платежные системы: SberPay, Apple Pay, Яндекс Pay;
- Аналитика: Google Analytics, Яндекс Метрика;
- CRM: Битрикс24 для синхронизации заказов.
4.4. Ограничения
- Что система не должна делать.
- Пример:
- Не хранить данные карт на сервере;
- Не показывать товары, которых нет в наличии.
Советы
- Используйте диаграммы Use Case или User Flow для визуализации сценариев.
- Приоритезируйте функции по методу MoSCoW:
- Must have: Без этого продукт не работает (например, корзина);
- Should have: Важно, но можно выпустить позже (например, чат с поддержкой);
- Could have: Желательные улучшения (например, dark mode);
- Won’t have: Отложенные функции.
5. Дизайн и UX/UI-требования
Цель раздела
Создать удобный и эстетичный интерфейс, соответствующий ожиданиям аудитории.
Что включить
5.1. Стиль и гайдлайны
- Визуальный стиль: Цвета, шрифты, иконки.
- Пример:
- Основные цвета: #2E8B57 (зеленый), #FFFFFF (белый);
- Шрифты: Open Sans для текста, Roboto для заголовков.
5.2. Адаптивность
- Поддержка разных устройств и разрешений.
- Пример:
- Mobile First: верстка сначала для мобильных, затем для десктопа;
- Минимальное разрешение: 320px (iPhone SE).
5.3. Интерактивные элементы
- Как ведут себя кнопки, формы, анимации.
- Пример:
- При наведении на кнопку «Купить» появляется тень;
- Форма регистрации подсвечивает ошибки красным.
5.4. Доступность (Accessibility)
- Соответствие стандартам WCAG 2.1.
- Пример:
- Контрастность текста ≥ 4.5:1;
- Поддержка скринридеров.
Пример для веб-сайта
Главная страница
- Hero-секция с заголовком «Экотовары с доставкой за 24 часа».
- Кнопка CTA «Начать покупки» в верхнем правом углу.
- Блок «Популярные категории» с grid-раскладкой.
Мобильная версия
- Скрытое боковое меню (гамбургер).
- Увеличенные области кликов для пальцев.
Советы
- Предоставьте ссылки на дизайн в Figma/Adobe XD.
- Проведите A/B-тестирование прототипов.
6. Технические требования
Цель раздела
Определить технологии, инфраструктуру и стандарты разработки.
Что включить
6.1. Стек технологий
- Frontend: React, Vue.js, Swift, Kotlin;
- Backend: Python/Django, Node.js, Ruby on Rails;
- Базы данных: PostgreSQL, MySQL, MongoDB.
6.2. Архитектура
- Монолитная или микросервисная.
- Пример:
- Микросервисы: отдельный сервис для оплаты, отдельный для каталога.
6.3. Безопасность
- HTTPS, шифрование данных, регулярные аудиты.
- Пример:
- Защита от SQL-инъекций и XSS-атак;
- Регулярное обновление SSL-сертификатов.
6.4. Производительность
- Оптимизация скорости загрузки.
- Пример:
- Время ответа сервера ≤ 200 мс;
- Сжатие изображений (WebP формат).
Пример для SaaS-платформы
Стек
- Frontend: React + TypeScript;
- Backend: Python (Django REST Framework);
- База данных: PostgreSQL с репликацией.
Инфраструктура
- Хостинг: AWS EC2;
- CDN: Cloudflare для статических файлов.
Безопасность
- Двухфакторная аутентификация для админ-панели.
Советы
- Укажите требования к документации (например, Swagger для API).
- Учтите масштабируемость: как система будет расти при увеличении нагрузки.
7. Этапы разработки и сроки
Цель раздела
Создать реалистичный план, распределить ресурсы и контролировать прогресс.
Что включить
7.1. Дорожная карта (Roadmap)
- Крупные этапы с датами начала и окончания.
- Пример:
- Исследование и аналитика: 01.09–15.09;
- Прототипирование: 16.09–30.09.
7.2. Методология
- Agile (спринты по 2 недели), Waterfall, Kanban.
7.3. Ответственные
- Кто за что отвечает: дизайнер, бэкенд-разработчик, тестировщик.
Советы
- Добавьте буфер на непредвиденные задержки (+20% к срокам).
- Используйте инструменты: Jira, Trello, Asana.
8. Бюджет
Цель раздела
Рассчитать стоимость разработки и обосновать расходы
Что включить
8.1. Смета по этапам
- Аналитика: 15000 руб
- Дизайн: 25000 руб
- Разработка: 50000 руб
- Тестирование: 65000 руб
8.2. Почасовая ставка
- Пример:
- Разработчик: 3550 р/час;
- Дизайнер: 4500 р/час;
- Аналитик: 5500 р/час;
- Тестировщик: 2000 р/час
8.3. Скрытые расходы
- Лицензии на ПО, хостинг, домен.
- Пример:
- AWS: 2000 р/месяц;
- Платная интеграция с CRM: 1500 р/час.
Советы
- Уточните условия оплаты: предоплата, постоплата, поэтапная;
- Сравните цены у нескольких подрядчиков.
9. Критерии приемки
Цель раздела
Определить, когда продукт считается готовым
Что включить
9.1. Функциональные тесты
- Все кнопки работают;
- Нет ошибок 404.
9.2. Нагрузочные тесты
- Проверка под нагрузкой (1000 пользователей одновременно).
9.3. Юридические требования
- Соответствие GDPR, COPPA (если аудитория — дети).
Пример чек-листа
- Регистрация через Яндекс/Google работает.
- Оплата проходит без ошибок.
- Приложение не крашится при потере связи.
Советы
- Используйте инструменты: JMeter для нагрузочного тестирования, Selenium для автотестов.
- Проведите UAT (User Acceptance Testing) с реальными пользователями.
10. Приложения
Цель раздела
Добавить материалы, которые поясняют или дополняют ТЗ.
Что включить
10.1. Макеты дизайна
- Ссылки на Figma, Sketch или PDF-файлы.
10.2. User Flow
- Схемы перемещения пользователя по продукту.
10.3. Глоссарий
- Термины, которые могут быть непонятны команде.
- Пример:
- CDN — сеть доставки контента, ускоряющая загрузку.
- API — интерфейс для взаимодействия с другими системами.
10.4. Контакты
- Ответственные лица: менеджер проекта, техлид, заказчик.