Как составить техническое задание на разработку сайта, чтобы не переделывать сайт заново? На самом деле у заказчика и исполнителя всегда существует вероятность неправильно понять друг друга.
К примеру, у клиента в голове появилось определенное представление, каким бы он хотел видеть сайт, и пытается объяснить это разработчикам. Но разработчики неверно трактовали «на пальцах» пожелания. Плачевный итог – клиент получил совсем не то, что представлял себе. Силы, время исполнителей и клиента были потрачены зря.
В этой статье вы узнаете, как правильно составить техническое задание на создание сайта, чтобы все остались довольны проделанной работой.
Что такое техническое задание
Техническое задание (ТЗ) – документ, содержащий требования заказчика к сайту. Заказчик и исполнитель должны правильно понимать друг друга, поэтому лучше подробно расписать все требования. Четко составленное ТЗ увеличивает шансы того, что заказчик будет доволен получившимся результатом, а исполнитель не будет переделывать ресурс 2-3 раза.
В хорошо составленном техническом задании четко указаны структура, функционал и все элементы. Если заказчик захочет изменить какую-то поставленную задачу, то вы можете смело отказать ему, ссылаясь на то, что в техническом задании такой пункт не прописан.
Техзадание может составить и заказчик, но все же у веб-студии опыта гораздо больше. При этом заказчик должен принимать участие в процессе составления ТЗ. Лучше всего, если будет заполнен опросный лист со следующими моментами:
- Рассказать подробнее о компании, предлагаемых товарах или услугах, целевой аудитории;
- Уточнить о проблемах, с которыми целевая аудитория (ЦА) будет приходить к клиенту и их решения;
- Узнать, что именно клиент хочет получить от сайта;
- Попросить привести примеры удачных сайтов конкурентов.
Важно также учитывать основы маркетинга на этапе подготовки ТЗ, так как это поможет сделать продукт для целевой аудитории в первую очередь, а не «для себя».
Чёткость формулировок в ТЗ
Забудьте о прилагательных красивый, инновационный, современный, надежный, длительный. Ведь у каждого человека свои представления значения этих слов. Для кого-то красивым будет сайт с обилием анимаций и ярких цветов, другой же сочтёт за красоту минимализм.
Главный критерий качества ТЗ — чёткие формулировки, отсутствие двусмысленных трактовок.
Народная мудрость.
Конкретика в техническом задании — главное условие качества, например:
- Каждая страница должна провериться на GTmetrix или GoogleSpeed с показателем скорости не менее 80/100 по Google Page Speed.
- Ресурс должен выдерживать до 20 тыс. посетителей одновременно.
- На главной должны выводиться новости и ниже отображаться форма с кнопкой «Подписаться» с возможностью отправить e-mail адрес.
- Список партнеров в виде карусели логотипов, отзывы клиентов в слайдере с горизонтальной прокруткой по 1-му отзыву на слайд.
Обязательно согласуйте с клиентом инструменты, которые будут использоваться, движки и требования к хостингу. Пропишите в своём ТЗ, что ваш ресурс должен работать во всех браузерах, быть адаптивным для всех видов устройств, должен быть устойчив к нагрузкам и защищен от хакерских DDoS атак.
Структура технического задания сайта
Структура сайта – это фундамент вашего будущего бизнес-инструмента. Решите, какие страницы необходимо создать и продумайте навигацию на них. По нашему опыту клиент проще воспринимает блок-схему, нарисованную в XMind. Но если вы считаете, что работа в XMind займет слишком много времени, то просто перечислите секции в word файле.
Кстати, не лишним будет предварительно собрать семантическое ядро, которое поможет в определении структуры и разделов на основании реальных запросов потенциальных клиентов в вашем сегменте.
Пример технического задания сайта в договоре
Данные формулировки подходят для преамбулы приложения по техническому заданию к договору услуг. Важно прописать структуру, блоки и элементы, чтобы обозначить рамки работ и понять итоговую стоимость. Ниже пример составления структуры для ТЗ.
Страница «Главная»
- Секция «Меню» с разделами и выпадающим списком подразделов:
- Логотип и слоган;
- «Главная»;
- «Проекты»;
- «Каталог продукции» с выпадающим списком разделов «Трубы SML», «Фитинги SML», «Соединительные хомуты»;
- «Производство»;
- «О компании»;
- «Проектировщикам»
- «База знаний / FAQ»;
- «Контакты»;
- Ссылка на скачивание катала продукции в .pdf;
- Контактный телефон компании;
- Кнопка «Заказать звонок».
- Секция «Слайдер» с фотографией по ширине экрана и кнопкой обратной связи с запросом на просчёт проекта / запроса на полный прайс-лист продукции.
- Секция «Преимущества» с указанием ключевых выгод для клиентов;
- Секция «Производство» с кратким описанием и информацией про систему контроля качества, со ссылкой на раздел «Производство» и кнопкой с записью на поездку на завод;
- Секция «Продукция» с текстовым описанием преимуществ, ссылками на сертификаты, ссылкой на «Каталог продукции»;
- Секция «Наши проекты» (с переходом в раздел «Все проекты»);
- Секция «Компания в цифрах» с цифрами достижений и ссылкой на раздел «О компании»;
- Секция «Видео-инструкции» с текстовым описанием и ссылкой в раздел «Все видео»;
- Секция «Подвал»:
- Контакты, телефон, адрес, электронная почта;
- Кнопка обратной связи;
- Ссылка на YouTube канал и на социальные сети компании.
Если вы также заказываете уникальный дизайн, то структуру страниц можно строить по предварительному прототипу. Ниже пример прототипа сайта, который можно прикрепить к техническому заданию на разработку. Определите вид главной страницы. Решите, где будет заголовок, пропишите основные элементы, на чём сделать акцент и так далее.
Детальное описание функций
Функционал — отдельная история. Если вы хотите получить гибкий и функциональный сайт, который можно легко поддерживать в будущем, то обязательно пропишите в техническом задании технические аспекты проекта. В противном случае вы рискуете получить просто набор строчек когда, который может поддерживаться только программистом в штате. Что относится к функционалу:
- CMS система Вордпресс, Битрикс и тп.
- Формы заявок с возможностью оставить заявку
- Модальные окна
- Слайдеры
- Модули галереи
- Модули SEO оптимизации и страниц
- Модули кеширования и сжатия
- Онлайн-карта с гео-метками
- Онлайн-калькулятор с расчетом цены
К технической части относятся требования хостингу и его настройкам. Советуем выбирать проверенный и быстрого хостинг-провайдера с приемлемыми тарифами на обслуживание. Мы используем в проектах вот этот хостинг. Стоимость всего 2 500 ₽ в год, домен в зоне .ru можно купить за 179 ₽. Вот пример функционального описания для технического задания.
| Подключение, настройка CMS Bitrix | Исполнитель настраивает CMS систему управления сайтом 1С Битрикс. Лицензия «1С-Битрикс: Управление сайтом» оплачивается Заказчиком самостоятельно. |
| Наполнение контентом | Наполнение текстом и фотографиями указанных выше страниц. Текст и фотографии предоставляет Заказчик. Исполнитель в праве использовать также контент с сайта заказчика. Расположение блоков на страницах выводится в рамках структуры страниц шаблона. |
| Настройка доступов | Добавление роли «Администратор» с возможностью администрирования CMS, роли редактора (для отдела закупок) с возможностью добавления информации. |
| Адаптация сайта для мобильных устройств | Широкоэкранная верстка и адаптация под более мелкие разрешения экрана, сайт должен корректно отображаться на экранах шириной от 1920 до 320 пикселей, появление горизонтальной прокрутки недопустимо. |
| Подключение доп. модулей CMS | Исполнитель также вправе добавлять модули CMS и функциональные элементы на своё усмотрение, если они улучшают работоспособность сайта по согласованию с Заказчиком, платные модули оплачиваются Заказчиком. |
| Подключение домена, хостинга Заказчика | Исполнитель подключает домен и хостинг Заказчика для веб-сайта. Производится парковка домена с указанием адресов ns1, ns2. Включается версия PHP не ниже 7.0. |
| Настройка базы данных MySQL | Исполнитель создает базу данных MySQL на хостинге заказчика для размещения данных веб-сайта. Доступы к базе данных передаются Исполнителем Заказчику по электронной почте. |
| Видеофон на главной странице | Вывод подложки с видеорядом Заказчика в первом блоке главной страницы сайта. Должна присутствовать затемняющая подложка для повышения читабельности текста. |
| Вывод модальных окон, отправка данных | Каждая из кнопок должна вызывать соответствующее модальное окно с формой обратной связи. Данные с формы в корректном виде должны отправляться на почту Заказчика. |
| Вывод форм обратной связи | Форма обратной связи должна выводиться на каждой странице. В форме обратной связи должны присутствовать: форма поля ввода номера телефона и кнопка «отправить заявку». Данные с формы должны передаваться на электронный адрес администратора, а также дублироваться на адрес info@domen.ru. |
| Подключение Яндекс карты c ГЕО-метками | На страницах выводится Яндекс.Карта с ГЕО меткой расположения / адреса Заказчика. Заказчик устанавливает метку на собственном аккаунте Яндекс. |
| Подключение Яндекс.Метрика | Сервис сбора данных о посещаемости и поведении пользователей. Заказчик предоставляет Яндекс почту, на которую Исполнитель подключает сервис. |
| Настройка целей в Яндекс.Метрика | Исполнитель настраивает цели в Яндекс.Метрика. Цели сообщают в статистике о том, с какой конкретно формы была отправлена заявка. |
| Настройка Title, Description страниц | Каждая страница веб-сайта должна иметь заголовок и МЕТА-описание в соответствии с содержимым страницы. |
| Кроссбраузерная оптимизация сайта | Сайт должен корректно открываться в последних актуальных версиях существующих браузеров. |
| Настройка файлов sitemap.xml | Исполнитель выводит карту сайта в отдельный раздел sitemap.xml с указанием существующих страниц для индексации. |
| Добавление «хлебных крошек» | Исполнитель выводит в каждый раздел навигационную цепочку («хлебные крошки», англ. Breadcrumbs) с адресом страницы формата:Главная → Раздел → Подраздел → Текущая страница. |
| Настройка robots.txt | Исполнитель настраивает текстовый файл, который содержит параметры индексирования сайта для роботов поисковых систем. |
| Настройка .htaccess | Исполнитель настраивает специальный файл, позволяющий редактировать конфигурации и настройки веб-сервера. |
| Настройка ЧПУ адресов страниц | Адрес каждой страницы должен содержать корректное описание для поисковых систем и посетителей на латинице. |
| Настройка 404 и 303 страниц | Настройка корректной выдачи ошибки 404, настройка 303 переадресации на страницы, которые изменили свой адрес. |
| Оптимизация программного кода HTML/CSS/PHP и скриптов | Исполнитель выполняет оптимизацию программного кода страниц сайта для повышения скорости загрузки страниц и веб-сайта в целом. При необходимости Исполнитель переносит загрузку .js скриптов в «подвал» сайта, настраивает кеширование страниц и сжатие CSS / HTML. |
| Оптимизация размера изображений, графики | Исполнитель сжимает изображения и видео, размещаемые на страницах веб-сайта для повышения скорости загрузки страниц ресурса. |
| Тестирование, поддержка 1 месяц | После приемки и запуска веб-сайта Исполнитель оказывает услуги по технической поддержке, устраняет технические ошибки и корректирует работу сайта при необходимости. |
Скачать шаблон тех. задания
Скачайте пример технического задания на создание веб-сайта, который можно использовать в качестве приложения к договору. Вы можете самостоятельно его доработать, добавить страницы, функционал, свои требования.
Контент, оформление, дизайн
Решите с заказчиком и пропишите в тех. задании, как именно вы подготовите контент: будете ли вы сами наполнять сайт (прописать, какие именно страницы) или поставите рыбу текста. Не забудьте, что текст должен быть уникальным, не опубликованный ранее на других ресурсах. В отдельных услугах не лишним заказать написание текстов отдельно.
Помните, что сайт — это техническое и программное обрамление контента. Если контент (фото и видео) не очень, то и сайт будет таким же.
Народная мудрость.
Отдельно стоит уделить внимание качеству фото и видео. Мы всегда рекомендуем заказать фото и видео съёмку клиентам, если нет презентабельного фото и видео контента для сайта.
Что относится к оформлению: оформление кнопок и элементов взаимодействия — ссылки, кликабельные стрелки слайдера, формы заявок и так далее. Продумайте цветовую гамму и пропишите гарнитуры шрифтов. У вас есть брендбук? Отлично, вы можете взять из него основные цвета и стили шрифтов для заголовков и основного текста и прописать всё это в техническом задании. Помните, что хорошее оформление зависит от качества исходного контента. Если у вас будут неказистые фото, то красивые кнопочки не помогут.
Кстати, многие клиенты путают понятие оформления и дизайна. Дизайн — это структура страниц от слова design (проектировать). Дизайн страниц должен содержать ключевые блоки и элементы, которые они содержат. Дизайн — это логика построения страниц.
Что должно быть в ТЗ
Итак, что должно содержать в себе техническое задание, которое обезопасит вас от недопонимания с разработчиками:
- Общая концепция.
- Структура сайта и страниц.
- Требования к хостингу.
- Прототипы страниц.
- Требования к вёрстке и работоспособности.
- Функциональная часть.
- Требования к дизайну и контенту.
Вы можете сами продолжить этот список, ведь каждый проект индивидуальный. Сайт компании всегда зависит от особенностей самого бизнеса и должен передавать его суть через контент и функциональные элементы. Если вам нужна услуга разработки сайта — получите бесплатную консультацию нашего ведущего разработчика!
