Firecode
Блог

Статья

Как сделать техническое задание на сайт или мобильное приложение

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

Как сделать техническое задание на сайт или мобильное приложение

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

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. Контакты

  • Ответственные лица: менеджер проекта, техлид, заказчик.
← Все блогОбсудить задачу

Заявка

Нужна команда под такую задачу?

Расскажите, что нужно сделать — вернёмся с составом команды, сроками и оценкой.

Ответим в течение рабочего дня (Пн–Пт, 10:00–19:00 МСК). Менеджер на связи по телефону, почте и в мессенджерах — пишите там, где удобно.

Оставить заявку

Достаточно имени и контакта — остальное по желанию.