Как составить техническое задание на разработку сайта, чтобы не переделывать сайт заново? На самом деле у заказчика и исполнителя всегда существует вероятность неправильно понять друг друга.
К примеру, у клиента в голове появилось определенное представление, каким бы он хотел видеть сайт, и пытается объяснить это разработчикам. Но разработчики неверно трактовали «на пальцах» пожелания. Плачевный итог – клиент получил совсем не то, что представлял себе. Силы, время исполнителей и клиента были потрачены зря.
В этой статье вы узнаете, как правильно составить техническое задание на создание сайта, чтобы все остались довольны проделанной работой.
Техническое задание (ТЗ) – документ, содержащий требования заказчика к сайту. Заказчик и исполнитель должны правильно понимать друг друга, поэтому лучше подробно расписать все требования. Четко составленное ТЗ увеличивает шансы того, что заказчик будет доволен получившимся результатом, а исполнитель не будет переделывать ресурс 2-3 раза.
В хорошо составленном техническом задании четко указаны структура, функционал и все элементы. Если заказчик захочет изменить какую-то поставленную задачу, то вы можете смело отказать ему, ссылаясь на то, что в техническом задании такой пункт не прописан.
Техзадание может составить и заказчик, но все же у веб-студии опыта гораздо больше. При этом заказчик должен принимать участие в процессе составления ТЗ. Лучше всего, если будет заполнен опросный лист со следующими моментами:
Важно также учитывать основы маркетинга на этапе подготовки ТЗ, так как это поможет сделать продукт для целевой аудитории в первую очередь, а не «для себя».
Забудьте о прилагательных красивый, инновационный, современный, надежный, длительный. Ведь у каждого человека свои представления значения этих слов. Для кого-то красивым будет сайт с обилием анимаций и ярких цветов, другой же сочтёт за красоту минимализм.
Главный критерий качества ТЗ — чёткие формулировки, отсутствие двусмысленных трактовок.
Народная мудрость.
Конкретика в техническом задании — главное условие качества, например:
Обязательно согласуйте с клиентом инструменты, которые будут использоваться, движки и требования к хостингу. Пропишите в своём ТЗ, что ваш ресурс должен работать во всех браузерах, быть адаптивным для всех видов устройств, должен быть устойчив к нагрузкам и защищен от хакерских DDoS атак.
Структура сайта – это фундамент вашего будущего бизнес-инструмента. Решите, какие страницы необходимо создать и продумайте навигацию на них. По нашему опыту клиент проще воспринимает блок-схему, нарисованную в XMind. Но если вы считаете, что работа в XMind займет слишком много времени, то просто перечислите секции в word файле.
Кстати, не лишним будет предварительно собрать семантическое ядро, которое поможет в определении структуры и разделов на основании реальных запросов потенциальных клиентов в вашем сегменте.
Данные формулировки подходят для преамбулы приложения по техническому заданию к договору услуг. Важно прописать структуру, блоки и элементы, чтобы обозначить рамки работ и понять итоговую стоимость. Ниже пример составления структуры для ТЗ.
Страница «Главная»
Если вы также заказываете уникальный дизайн, то структуру страниц можно строить по предварительному прототипу. Ниже пример прототипа сайта, который можно прикрепить к техническому заданию на разработку. Определите вид главной страницы. Решите, где будет заголовок, пропишите основные элементы, на чём сделать акцент и так далее.
Функционал — отдельная история. Если вы хотите получить гибкий и функциональный сайт, который можно легко поддерживать в будущем, то обязательно пропишите в техническом задании технические аспекты проекта. В противном случае вы рискуете получить просто набор строчек когда, который может поддерживаться только программистом в штате. Что относится к функционалу:
К технической части относятся требования хостингу и его настройкам. Советуем выбирать проверенный и быстрого хостинг-провайдера с приемлемыми тарифами на обслуживание. Мы используем в проектах вот этот хостинг. Стоимость всего 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 (проектировать). Дизайн страниц должен содержать ключевые блоки и элементы, которые они содержат. Дизайн — это логика построения страниц.
Итак, что должно содержать в себе техническое задание, которое обезопасит вас от недопонимания с разработчиками:
Вы можете сами продолжить этот список, ведь каждый проект индивидуальный. Сайт компании всегда зависит от особенностей самого бизнеса и должен передавать его суть через контент и функциональные элементы.
