Техническое задание на разработку сайта: пример на сайтах двух производителей
Шаблон ТЗ из десяти разделов и два живых примера: сайт производителя автосервисного оборудования EASYRAY и сайт разработчика станций выдачи спецодежды Velvet Automatica. Чем похожи и чем отличаются их задания.
Зачем заказчику техническое задание на сайт
Два производителя приходят за сайтом. У одного каталог стендов, дилеры в регионах и импортные конкуренты. У другого новый продукт, которого рынок ещё не видел. Если дать обоим одинаковое ТЗ, оба получат одинаковый сайт, и обоим он не подойдёт.
Техническое задание фиксирует, что именно делается: разделы, функции, интеграции, требования к контенту. По нему потом принимают работу. Хорошее ТЗ отвечает на вопрос, что должен понять человек на сайте и что ему сделать дальше. Плохое перечисляет страницы, как у конкурента.
Ниже шаблон, по которому мы собираем ТЗ, и два примера из наших проектов: сайт EASYRAY и сайт Velvet Automatica. Это производственные компании с разными задачами, и на них хорошо видно, почему у каждого сайта своё задание.
Техническое задание на разработку сайта описывает цель сайта, аудитории и их путь до заявки, структуру страниц, контент, функции, интеграции, требования к дизайну, платформу, сроки и порядок приёмки. Для сайта производителя в ТЗ добавляют каталог с характеристиками, документацию, раздел для дилеров и расчёт выгоды. Чем точнее задание, тем меньше переделок и споров при приёмке.
Шаблон ТЗ на разработку сайта: 10 разделов
Этот порядок можно забрать себе и заполнить для своего проекта. Первые три раздела важнее остальных: если они пустые, остальное будет угадыванием.
Цель сайта
Одна фраза о том, зачем сайт бизнесу: получать заявки от дилеров, объяснять новый продукт, отвечать на вопросы до звонка менеджеру. Из цели потом выводится всё остальное.
Аудитории и их вопросы
Кто приходит на сайт и что хочет узнать. У производителя это часто два-три разных человека: владелец бизнеса, закупщик, инженер, дилер.
Путь до заявки
Что человек видит первым, что вторым и где нажимает кнопку. Для каждой аудитории свой путь.
Структура
Список страниц и разделов с их связями. Сколько типов страниц, какие повторяются: карточка товара, страница станции, страница дилера.
Контент
Что уже есть и что нужно сделать: тексты, фото, схемы, ролики, документы. Контент чаще всего тормозит запуск, поэтому его описывают отдельно.
Функции
Каталог и фильтры, поиск по моделям, калькулятор, формы заявки, карта, скачивание документов. У каждой функции должна быть причина в цели сайта.
Интеграции
CRM, платёжные сервисы, учётные системы. Это отдельный объём работ, поэтому его фиксируют заранее.
Бренд и дизайн
На каком фирменном стиле строится сайт и есть ли гайдбук. Если стиля нет, это решают до сайта.
Платформа и управление
На чём собирается сайт и кто будет менять тексты, цены и товары после запуска.
Сроки и приёмка
Этапы, даты и по каким пунктам ТЗ принимается работа.
Техническое задание фиксирует состав работ. Порядок блоков на каждой странице показывает блочная схема, её делают следующим шагом. Подробнее про этапы на странице разработки сайтов.
Пример ТЗ: сайт производителя оборудования EASYRAY
EASYRAY с 2015 года делает 3D-стенды развал-схождения, шиномонтажное и балансировочное оборудование. По качеству стенды не уступают мировым лидерам, а бренд терялся среди поставщиков с синими логотипами и стоковыми фото.
Сначала мы сделали фирменный стиль, потом спроектировали и собрали на нём сайт. Если записать задачу сайта по разделам шаблона, получится так.
Цель
Показать инженерную точность продукта и привести владельца автосервиса или будущего дилера к заявке.
Аудитории
Владелец автосервиса, который выбирает оборудование, и компания, которая хочет стать дилером в своём регионе.
Путь до заявки
У каждой аудитории свой. Владелец автосервиса идёт через каталог и расчёт, дилер через раздел о партнёрстве и карту.
Функции
Каталог с ценами и комплектациями, поиск по моделям, документация и сертификаты, калькулятор окупаемости, подбор оборудования по заявке, интерактивная карта дилеров.
Контент
Цифры компании на первом экране: с 2015 года на рынке, больше 15 дилеров в России и Беларуси, больше 100 стендов в автоцентрах. Анимации, которые объясняют, как устроено оборудование.
Бренд и дизайн
Зелёный сигнал из айдентики работает как подсказка: загорелся, значит стенд сошёлся. Иконки, кнопки и переходы говорят на том же языке, что и сам стенд.
Платформа
Тильда. Мобильная версия повторяет логику компьютерной: цифры компании, каталог и кнопки связи под пальцем.
Пример ТЗ: сайт разработчика станций выдачи спецодежды Velvet Automatica
Velvet Automatica много лет работала химчисткой и прачечной для промышленных предприятий. Потом компания стала разработчиком цифровых решений: сделала автомат, который выдаёт рабочим спецодежду и экипировку, и программы, которые встраиваются в учётные системы предприятия. У компании есть собственная зарегистрированная программа.
Сначала компания пришла к нам за имиджевым роликом. Уже на монтаже стало понятно, что одного ролика мало: продукт новый, и каждому заказчику его приходилось объяснять заново. Так появилась задача сайта.
Цель
Объяснить, как работает автомат и что он даёт предприятию, чтобы менеджеру не приходилось рассказывать это каждый раз с нуля.
Аудитории
Промышленные предприятия, которые выдают сотрудникам спецодежду и экипировку.
Структура
Два типа страниц. Главная с роликом, инфографикой, калькулятором автоматизации, каталогом четырёх станций и формой заявки. И отдельная страница для каждой из четырёх станций.
Функции
Калькулятор автоматизации, каталог станций, форма заявки, интерактивные схемы станций.
Контент
Схемы станций из проектной документации не показывали, как автомат выглядит для человека. Поэтому каждую станцию нарисовали по нашим фотографиям, а блок-схемы перерисовали в понятную инфографику с пиктограммами.
Запуск
Адаптация под мобильные экраны и базовая SEO-настройка.
Чем отличаются два технических задания
Оба сайта для производителей, у обоих есть каталог, калькулятор и форма заявки. Но цели разные, и от цели меняется всё остальное.
| EASYRAY | Velvet Automatica | |
|---|---|---|
| Что продают | Оборудование для автосервисов, рынок знает такие стенды | Новый продукт: станции выдачи и ПО, которое встраивается в учёт предприятия |
| Главная задача сайта | Привести к заявке две аудитории | Объяснить продукт без менеджера |
| Аудитории | Владелец автосервиса и будущий дилер | Промышленные предприятия |
| Каталог | Модели с ценами, комплектациями и поиском | Четыре станции, у каждой своя страница |
| Расчёт | Калькулятор окупаемости | Калькулятор автоматизации |
| Чем объясняют продукт | Анимации и зелёный сигнал из айдентики | Инфографика, иллюстрации и схемы работы станций |
| С чего началось | С фирменного стиля | С имиджевого ролика |
EASYRAY продаёт понятный рынку продукт и конкурирует с импортом, поэтому сайт ведёт к заявке и показывает, что стенды не хуже. Velvet Automatica продаёт то, чего покупатель раньше не видел, поэтому сайт сначала объясняет и только потом продаёт. Если бы мы взяли одно ТЗ на обоих, один сайт тратил бы время покупателя на объяснения, а другой продавал бы то, что покупателю ещё непонятно.
Брифинг нужен, чтобы понять, о чём будет сайт, а ТЗ составляется для того, чтобы прозрачно утвердить, как именно будет сделан сайт.
Данил Снег, креативный директор be artЧто добавить в ТЗ сайта для производства
У сайта производителя есть пункты, которых нет у сайта кафе или магазина. Проверьте, что они есть в вашем задании.
Каталог с характеристиками
Покупатель оборудования сравнивает модели до звонка. Нужны цены или вилки, комплектации, поиск и фильтры.
Документы
Сертификаты, паспорта, инструкции. Их ищут закупщики и инженеры, и без них заявку часто не согласуют.
Раздел для дилеров
Условия партнёрства и карта, где купить и обслужить оборудование. Так было у EASYRAY.
Объяснение продукта
Схемы, инфографика, анимации. Особенно если продукт новый, как станции Velvet Automatica.
Расчёт выгоды
Калькулятор окупаемости или экономии помогает покупателю защитить покупку перед руководителем.
Форма под B2B-заявку
Компания, контакт, что нужно и в каком объёме. Чем точнее форма, тем быстрее менеджер ответит по делу.
Больше примеров на странице сайтов и фирменного стиля для производства.
Шесть ошибок в техническом задании на сайт
«Сделайте как у конкурента»
Сайт конкурента решал его задачу. Скопированная структура повторяет и его ошибки.
Нет аудиторий
Сайт пишут для всех сразу, и в итоге он отвечает никому. У производителя почти всегда несколько разных покупателей.
Функции без цели
Калькулятор, личный кабинет и чат добавляют, потому что они есть у других. Каждая функция стоит денег и должна вести к заявке.
Контент «потом»
Тексты, фото и схемы откладывают до конца, и запуск встаёт. Контент надо описать в ТЗ и начать готовить сразу.
Дизайн без бренда
Если фирменного стиля нет, дизайнер придумывает его на ходу, и сайт потом расходится с каталогом и выставочным стендом.
Непонятно, как принимать работу
Без пунктов приёмки спор о том, сделано ли, тянется неделями.
Кто пишет ТЗ на сайт: заказчик или подрядчик
Заказчик знает бизнес, подрядчик знает, как это превратить в сайт. Поэтому ТЗ лучше писать вместе.
У нас техническое задание входит в проектирование. Сначала брифинг: разбираемся, какой сайт нужен и какие задачи он закрывает. Потом техническое задание, структура с пользовательским путём и блочная схема страниц. После проектирования у вас на руках документ, с которым можно идти к любому подрядчику.
Если вы пишете ТЗ сами, возьмите шаблон выше и заполните хотя бы первые три раздела: цель, аудитории и путь до заявки. С этим уже можно говорить с любой студией.
Сколько стоит разработка сайта по ТЗ
Цена складывается из двух блоков, и каждый оплачивается отдельно.
Точную смету называем после проектирования: пока структура не собрана, её не посчитать. Подробнее о разработке корпоративного сайта.
Вопросы о техническом задании на сайт
Что входит в техническое задание на разработку сайта?
Цель сайта, аудитории и их путь до заявки, структура страниц, контент, функции, интеграции, требования к дизайну и бренду, платформа, сроки и порядок приёмки. Для сайта производителя добавляют каталог с характеристиками, документы, раздел для дилеров и расчёт выгоды.
Кто пишет ТЗ на сайт: заказчик или подрядчик?
Лучше вместе. Заказчик знает бизнес и покупателей, подрядчик переводит это в структуру и функции. В be art техническое задание входит в проектирование вместе с брифингом, структурой и блочной схемой страниц.
Есть ли шаблон ТЗ на разработку сайта?
В этой статье шаблон из десяти разделов: цель, аудитории, путь до заявки, структура, контент, функции, интеграции, бренд и дизайн, платформа, сроки и приёмка. Начните с первых трёх, без них остальное будет угадыванием.
Чем техническое задание отличается от брифа?
Бриф собирает вводные: что за компания, какие задачи, какой бюджет. Техническое задание фиксирует, что именно делается: разделы, функции, интеграции, требования к контенту. По ТЗ потом принимают работу.
Чем ТЗ отличается от блочной схемы?
Техническое задание фиксирует состав: разделы, функции, интеграции. Блочная схема показывает порядок: что человек читает на странице первым, что вторым и где стоит кнопка.
Сколько стоит разработка сайта для производства?
Проектирование с техническим заданием стоит от 120 000 ₽, разработка от 300 000 ₽, корпоративный сайт под ключ обычно от 420 000 ₽. Срок от месяца, точнее после проектирования.
Кто сделал сайты EASYRAY и Velvet Automatica?
Брендинговое агентство be art. Для EASYRAY мы сделали фирменный стиль и сайт с каталогом, калькулятором окупаемости и картой дилеров, для Velvet Automatica сайт с инфографикой, калькулятором автоматизации, страницами четырёх станций и имиджевым роликом.
Сначала цель, потом страницы
Одинаковое ТЗ для разных компаний даёт одинаковые сайты. Задание, которое начинается с вопроса, что должен понять покупатель, даёт сайт, который продаёт именно ваш продукт.
Разработка сайта Или обсудите проект сразу.