Как составить техническое задание на разработку сайта, чтобы не переделывать сайт заново? На самом деле у заказчика и исполнителя всегда существует вероятность неправильно понять друг друга.

К примеру, у клиента в голове появилось определенное представление, каким бы он хотел видеть сайт, и пытается объяснить это разработчикам сайта. Но разработчики неверно трактовали «на пальцах» пожелания. Плачевный итог – клиент получил совсем не то, что представлял себе. Силы, время исполнителей и клиента были потрачены зря.

В этой статье вы узнаете, как правильно составить техническое задание на создание сайта, чтобы все остались довольны проделанной работой.

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

Техническое задание (ТЗ) – документ, содержащий требования заказчика к сайту. Заказчик и исполнитель должны правильно понимать  друг друга, поэтому лучше подробно расписать все требования. Четко составленное ТЗ увеличивает шансы того, что заказчик будет доволен получившимся результатом, а исполнитель не будет переделывать сайт 2-3 раза.

В хорошо составленном техническом задании на создание сайта четко указаны структура, функционал и все элементы. Если заказчик захочет изменить какую-то поставленную задачу, то вы можете смело отказать ему, ссылаясь на то, что в техническом задании такой пункт не прописан.

Техзадание может составить и заказчик, но все же у веб-студии опыта в создании сайтов гораздо больше. При этом заказчик должен принимать участие в процессе составления ТЗ. Лучше всего, если будет заполнен опросный лист со следующими моментами:

  • Рассказать подробнее о компании, предлагаемых товарах или услугах, целевой аудитории;
  • Уточнить о проблемах, с которыми целевая аудитория (ЦА) будет приходить к клиенту и их решения;
  • Узнать, что именно клиент хочет получить от создания сайта;
  • Попросить привести примеры удачных сайтов конкурентов.

Важно также учитывать основы маркетинга на этапе подготовки ТЗ, так как это поможет сделать продукт для целевой аудитории в первую очередь, а не «для себя».

Чёткость формулировок в ТЗ

Забудьте о прилагательных красивый, инновационный, современный, надежный, длительный. Ведь у каждого человека свои представления значения этих слов. Для кого-то красивым будет сайт с обилием анимаций и ярких цветов, другой же сочтёт за красоту минимализм.

Главный критерий качества ТЗ — чёткие формулировки создаваемого сайта.

Конкретика в техническом задании — это главное условие качества сайта, например:

  • Каждая страница должна провериться на GTmetrix или GoogleSpeed с показателем скорости не менее 80/100 по Google Page Speed.
  • Сайт должен выдерживать до 20 тыс. посетителей одновременно.
  • На главной странице должны выводиться новости и ниже отображаться форма с кнопкой «Подписаться» с возможностью отправить e-mail адрес.
  • Список партнеров в виде карусели логотипов, отзывы клиентов в слайдере с горизонтальной прокруткой по 1-му отзыву на слайд.

Обязательно согласуйте с клиентом инструменты, которые будут использоваться, движки и требования к хостингу. Пропишите в своём ТЗ, что сайт должен работать во всех браузерах, быть адаптивным для всех видов устройств. Сайт должен быть устойчив к нагрузкам и защищен от хакерских DDoS атак.

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

Структура сайта – его фундамент. Решите, какие страницы необходимо создать и продумайте навигацию на страницы. По нашему опыту клиент проще воспринимает блок-схему, нарисованную в XMind. Но если вы считаете, что работа в XMind займет слишком много времени, то просто перечислите блоки, которые будут на странице в word файле. Кстати, не лишним будет предварительно собрать семантическое ядро, которое поможет в определении структуры сайта и его разделов на основании реальных запросов потенциальных клиентов в вашем сегменте.

Как создать ТЗ на разработку сайта

Пример структуры ТЗ по договору

Данные формулировки подходят для преамбулы приложения по техническому заданию к договору услуг. Важно прописать структуру, блоки и элементы страниц, чтобы обозначить рамки работ и понять итоговую стоимость. Ниже пример составления структуры страницы для тз сайта.

Страница «Главная»

  • Секция «Меню сайта» с разделами и выпадающим списком подразделов:
    • Логотип и слоган;
    • «Главная»;
    • «Проекты»;
    • «Каталог продукции» с выпадающим списком разделов «Трубы SML», «Фитинги SML», «Соединительные хомуты»;
    • «Производство»;
    • «О компании»;
    • «Проектировщикам»
    • «База знаний / FAQ»;
    • «Контакты»;
    • Ссылка на скачивание катала продукции в .pdf;
    • Контактный телефон компании;
    • Кнопка «Заказать звонок».
  • Секция «Слайдер» с фотографией по ширине экрана и кнопкой обратной связи с запросом на просчёт проекта / запроса на полный прайс-лист продукции.
  • Секция «Преимущества» с указанием ключевых выгод для клиентов;
  • Секция «Производство» с кратким описанием и информацией про систему контроля качества, со ссылкой на раздел «Производство» и кнопкой с записью на поездку на завод;
  • Секция «Продукция» с текстовым описанием преимуществ, ссылками на сертификаты, ссылкой на «Каталог продукции»;
  • Секция «Наши проекты» (с переходом в раздел «Все проекты»);
  • Секция «Компания в цифрах» с цифрами достижений и ссылкой на раздел «О компании»;
  • Секция «Видео-инструкции» с текстовым описанием и ссылкой в раздел «Все видео»;
  • Секция «Подвал сайта»:
  • Контакты, телефон, адрес, электронная почта;
  • Кнопка обратной связи;
  • Ссылка на YouTube канал и на социальные сети компании.

Если вы также заказываете уникальный дизайн, то структуры страниц можно строить по предварительному прототипу. Ниже пример прототипа сайта, который можно прикрепить к техническому заданию на разработку сайта. Определите вид главной страницы. Где будет заголовок, пропишите основные элементы, на чём сделать акцент и так далее.

Как создать ТЗ на разработку сайта

Функционал сайта

Функционал сайта — отдельная история. Если вы хотите получить гибкий и функциональный сайт, который можно легко поддерживать в будущем, то обязательно пропишите в техническом задании технические аспекты проекта. В противном случае вы рискуете получить просто набор строчек когда, который может поддерживаться только программистом в штате. Что относится к функционалу сайта:

  • CMS система Вордпресс, Битрикс и тп.
  • Формы заявок с возможностью оставить заявку
  • Модальные окна
  • Слайдеры
  • Модули галереи
  • Модули SEO оптимизации сайта и страниц
  • Модули кеширования и сжатия
  • Онлайн-карта с гео-метками
  • Онлайн-калькулятор с расчетом цены

К технической части относятся требования хостингу и его настройкам. Советуем выбирать проверенный и быстрого хостинг-провайдера с приемлемыми тарифами на обслуживание. Мы используем в проектах вот этот хостинг. Стоимость всего 2500 в год, домен в зоне .ru можно купить за 179 руб. Вот пример функционального описания для технического задания.

Подключение и настройка CMS системы 1С БитриксИсполнитель настраивает CMS систему управления сайтом 1С Битрикс. Лицензия «1С-Битрикс: Управление сайтом» оплачивается Заказчиком самостоятельно.
Наполнение сайта контентомНаполнение текстом и фотографиями указанных выше страниц. Текст и фотографии предоставляет Заказчик. Исполнитель в праве использовать также контент с сайта заказчика. Расположение блоков на страницах выводится в рамках структуры страниц шаблона.
Настройка ролей доступаДобавление роли «Администратор» с возможностью администрирования CMS, роли редактора (для отдела закупок) с возможностью добавления информации.
Адаптация веб-сайта для мобильных устройств и планшетовШирокоэкранная верстка и адаптация под более мелкие разрешения экрана, сайт должен корректно отображаться на экранах шириной от 1920 до 320 пикселей, появление горизонтальной прокрутки недопустимо.
Подключение дополнительных модулей CMSИсполнитель также вправе добавлять модули CMS и функциональные элементы на своё усмотрение, если они улучшают работоспособность сайта по согласованию с Заказчиком, платные модули оплачиваются Заказчиком.
Подключение домена и хостинга ЗаказчикаИсполнитель подключает домен и хостинг Заказчика для веб-сайта. Производится парковка домена с указанием адресов ns1, ns2. Включается версия PHP не ниже 7.0.
Настройка базы данных MySQL веб-сайтаИсполнитель создает базу данных MySQL на хостинге заказчика для размещения данных веб-сайта. Доступы к базе данных передаются Исполнителем Заказчику по электронной почте.
Видеофон на главной страницеВывод подложки с видеорядом Заказчика в первом блоке главной страницы сайта. Должна присутствовать затемняющая подложка для повышения читабельности текста.
Вывод модальных окон и отправка данныхКаждая из кнопок должна вызывать соответствующее модальное окно с формой обратной связи. Данные с формы в корректном виде должны отправляться на почту Заказчика.
Вывод форм обратной связиФорма обратной связи должна выводиться на каждой странице. В форме обратной связи должны присутствовать: форма поля ввода номера телефона и кнопка «отправить заявку». Данные с формы должны передаваться на электронный адрес администратора, а также дублироваться на адрес info@domen.ru.
Подключение Яндекс карты c ГЕО-меткамиНа страницах веб-сайта выводится Яндекс.Карта с ГЕО меткой расположения / адреса Заказчика. Заказчик устанавливает метку на собственном аккаунте Яндекс.
Подключение статистики Яндекс.МетрикаСервис сбора данных о посещаемости веб-сайта и поведении пользователей. Заказчик предоставляет Яндекс почту, на которую Исполнитель подключает сервис.
Настройка целей в Яндекс.МетрикаИсполнитель настраивает цели в Яндекс.Метрика. Цели сообщают в статистике о том, с какой конкретно формы была отправлена заявка.
Вывод H1 и МЕТА-описаний страниц согласно ключевому запросу веб-страницыКаждая страница веб-сайта должна иметь заголовок и МЕТА-описание в соответствии с содержимым страницы.
Кроссбраузерная оптимизация сайтаСайт должен корректно открываться в последних актуальных версиях существующих браузеров.
Настройка файлов sitemap.xmlИсполнитель выводит карту сайта в отдельный раздел sitemap.xml с указанием существующих страниц для индексации.
Добавление «хлебных крошек»Исполнитель выводит в каждый раздел сайта навигационную цепочку («хлебные крошки», англ. Breadcrumbs) с адресом страницы формата:

Главная → Раздел → Подраздел → Текущая страница.

Настройка файла robots.txtИсполнитель настраивает текстовый файл, который содержит параметры индексирования сайта для роботов поисковых систем.
Настройка файла .htaccessИсполнитель настраивает специальный файл, позволяющий редактировать конфигурации и настройки веб-сервера.
Настройка ЧПУ адресов страниц в формате domen.ru/arenda-skladaАдрес каждой страницы сайта должен содержать корректное описание для поисковых систем и посетителей на латинице.
Настройка 404 и 303 страницНастройка корректной выдачи ошибки 404, настройка 303 переадресации на страницы, которые изменили свой адрес.
Оптимизация программного кода HTML/CSS/PHP и скриптовИсполнитель выполняет оптимизацию программного кода страниц сайта для повышения скорости загрузки страниц и веб-сайта в целом. При необходимости Исполнитель переносит загрузку .js скриптов в «подвал» сайта, настраивает кеширование страниц и сжатие CSS / HTML.
Оптимизация размера изображений и графического контентаИсполнитель сжимает изображения и видео, размещаемые на страницах веб-сайта для повышения скорости загрузки страниц ресурса.
Тестирование и поддержка веб-сайта в течение 1-го месяца после запускаПосле приемки и запуска веб-сайта Исполнитель оказывает услуги по технической поддержке веб-сайта Заказчика, устраняет технические ошибки и корректирует работу сайта при необходимости.

Скачать шаблон ТЗ на разработку сайта

Скачайте пример технического задания на создание веб-сайта, который можно использовать в качестве приложения к договору. Вы можете самостоятельно его доработать, добавить страницы, функционал, свои требования.

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

Контент, оформление, дизайн

Решите с заказчиком и пропишите в техзадании, как именно вы подготовите контент: будете ли вы сами наполнять сайт (прописать, какие именно страницы) или поставите рыбу текста. Не забудьте, что текст должен быть уникальным, не опубликованный ранее на других сайтах. В отдельных услугах не лишним заказать написание текстов для сайта отдельно.

Помните, что сайт — это техническое и программное обрамление контента. Если контент (фото и видео) не очень, то и весь сайт будет таким же.

Отдельно стоит уделить внимание качеству фото и видео. Мы всегда рекомендуем заказать фото и видео съёмку клиентам, если нет презентабельного фото и видео контента для сайта.

Что относится к оформлению: оформление кнопок и элементов взаимодействия — ссылки, кликабельные стрелки слайдера, формы заявок и так далее. Продумайте цветовую гамму сайта и пропишите гарнитуры шрифтов. У вас есть брендбук? Отлично, вы можете взять из него основные цвета и стили шрифтов для заголовков и основного текста и прописать всё это в техническом задании. Помните, что хорошее оформление зависит от качества исходного контента. Если у вас будут неказистые фото, то красивые кнопочки не помогут.

Кстати, многие клиенты путают понятие оформления и дизайна. Дизайн — это структура страниц от слова design (проектировать). Дизайн страниц должен содержать ключевые блоки и элементы, которые они содержат. Дизайн — это логика и построение страниц.

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

Итак, что должно содержать в себе хорошее техническое задание, которое обезопасит вас от недопонимания с исполнителем. Вот перечень:

  • Общая концепция
  • Структура сайта и страниц
  • Требования к хостингу
  • Прототипы страниц
  • Требования к вёрстке и работоспособности сайта
  • Функциональная часть
  • Требования к дизайну и контенту

Вы можете сами продолжить этот список, ведь каждый проект индивидуальный. Сайт компании всегда зависит от особенностей самого бизнеса и должен передавать его суть через контент и функциональные элементы. Узнайте также, как создать хороший сайт, который способен повысить прибыль компании и узнаваемость бренда?

Если вам нужен новый сайт, то вы можете заказать создание сайта или технического задания в нашей веб-студии.

Ответить

Форма связи

* ваш телефон (данные конфиденциальны)

Let's get in touch!

* your phone