Руководство для владельцев бизнеса по разработке ТЗ на обновление сайта. Разбираем структуру документа, типичные ошибки при формулировании задач дизайнеру и программисту.
Отсутствие грамотного технического задания — главная причина провала проектов по обновлению сайтов. Без четких требований веб-студия сделает проект на свое усмотрение, а заказчик в итоге получит неудобный интерфейс, который не решает бизнес-задачи. Формулировки в духе «сделайте красиво и современно» всегда приводят к срыву сроков и конфликтам. В этой статье мы расскажем, как правильно составить техническое задание на редизайн сайта, какие разделы в него включить и приведем конкретные примеры описания требований.
Кто должен писать ТЗ: клиент или исполнитель?
Составление полноценного технического задания — это обоюдный процесс. Заказчик лучше знает свой бизнес, продукт и целевую аудиторию, а проектировщик и дизайнер знают, как перевести эти знания на язык интерфейсов и технических спецификаций. Идеальный сценарий выглядит так: клиент заполняет подробный бриф и описывает бизнес-требования, а исполнитель проводит аналитику и на её основе разрабатывает детальное техническое задание на дизайн.
Основные разделы ТЗ на редизайн сайта
Правильно структурированное техническое задание должно состоять из следующих ключевых блоков:
1. Цели и задачи редизайна
В этом разделе фиксируются конкретные измеримые цели проекта. Например: увеличить конверсию мобильной версии сайта с 1.2% до 2%, упростить путь пользователя до оформления заказа, обновить визуальный стиль бренда под новое позиционирование.
2. Аудитория сайта и сценарии использования
Описываются основные сегменты пользователей (например, розничные покупатели, оптовые закупщики, снабженцы заводов) и их основные паттерны поведения на сайте. Для каждого сегмента прописываются ключевые действия.
3. Требования к дизайну и стилистике
Вместо субъективных эпитетов укажите конкретные ограничения: ссылки на брендбук (при наличии), список предпочтительных цветов, примеры шрифтов, требования к адаптивности под экраны смартфонов и планшетов. Обязательно приведите референсы — примеры сайтов, дизайн которых вам нравится, с указанием конкретных элементов.
4. Структура сайта и функциональные требования
Необходимо перечислить все уникальные типы страниц (главная, каталог, карточка товара, корзина, блог, контакты) и описать функционал каждого блока. Если требуется интеграция с внешними базами данных, 1С, CRM или платежными шлюзами, это должно быть подробно зафиксировано в требованиях.
Таблица: Что нужно и что нельзя писать в ТЗ на редизайн
Сравним неэффективные формулировки с профессиональными требованиями для технического задания:
| Раздел требований | Плохой пример (Так писать нельзя) | Хороший пример (Правильная формулировка) | Почему это важно |
|---|---|---|---|
| Дизайн и визуализация | «Сделайте модный, легкий, премиальный дизайн в стиле Apple». | «Использовать цветовую схему по брендбуку (основной #1A365D, акцентный #DD6B20). Шрифты семейства Inter. Стилистика минималистичная, без избыточных декоративных элементов». | Исключает разное понимание «красоты» дизайнером и заказчиком. |
| Функционал поиска | «Нам нужен хороший и удобный поиск по товарам». | «Поиск по сайту должен поддерживать живой ввод подсказок при вводе от 3 символов, распознавать опечатки, осуществлять поиск по артикулу и названию товара». | Позволяет программисту точно оценить время разработки базы данных поиска. |
| Мобильная версия | «Сайт должен хорошо открываться на всех телефонах». | «Адаптивная верстка под разрешения от 320px до 1920px. Mobile First подход: все ключевые CTA на первом экране смартфона, размер тач-зон кнопок не менее 44x44px». | Задает четкие рамки для верстки и последующего тестирования интерфейса. |
Пошаговый чек-лист подготовки данных для ТЗ
Перед тем как обратиться в веб-студию за редизайном, соберите следующий пакет информации:
- [ ] Доступы к аналитике: Подготовьте гостевой доступ к Яндекс.Метрике или Google Analytics исполнителям для анализа текущего поведения пользователей.
- [ ] Список конкурентов: Выделите 3–5 прямых конкурентов и опишите, что на их сайтах вам кажется удобным, а что отталкивает.
- [ ] Фирменный стиль: Соберите все исходные графические материалы (логотип в векторе, шрифты, брендбук, фотографии товаров и сотрудников).
- [ ] Технические ограничения: Уточните у вашей IT-службы текущую версию CMS/фреймворка, на которой работает сайт, и возможности работы с базой данных.
Часто задаваемые вопросы (FAQ)
Можно ли делать дизайн сайта без готового ТЗ?
Делать дизайн без ТЗ категорически не рекомендуется. В этом случае работа превратится в бесконечный процесс правок и обсуждений. Дизайнер будет рисовать интерфейс вслепую, основываясь на личных вкусах, которые могут не совпадать с бизнес-целями вашего интернет-магазина или сервиса.
Что такое референсы и зачем они нужны в техническом задании?
Референсы — это примеры реализованных проектов, которые заказчик приводит в качестве ориентира. Это могут быть сайты вашей тематики или абсолютно других сфер бизнеса. Главное — снабдить каждый референс комментарием, например: «На этом сайте нравится удобный фильтр товаров», «Здесь отлично реализована карточка товара», «Тут приятная цветовая гамма».
Как ТЗ защищает права заказчика?
Техническое задание является юридическим приложением к договору на разработку. Если веб-студия сдаст проект, который не соответствует зафиксированным в ТЗ функциональным или визуальным требованиям, вы имеете полное право не подписывать акт выполненных работ и требовать доработки сайта за счет исполнителя.