youwin digital logotype

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

Рубрика:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример технического задания в договоре

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

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

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

фото прототипа для ТЗ сайта

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

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

К технической части относятся требования хостингу и его настройкам. Советуем выбирать проверенный и быстрого хостинг-провайдера с приемлемыми тарифами на обслуживание. Мы используем в проектах вот этот хостинг. Стоимость всего 2 500 ₽ в год, домен в зоне .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 (проектировать). Дизайн страниц должен содержать ключевые блоки и элементы, которые они содержат. Дизайн — это логика построения страниц.

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

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

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

© 2021 Youwin Digital.
ОГРНИП: 319774600249111 ИНН: 507404607630

связаться crossmenuchevron-down linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram