Как составить техническое задание веб сайт

Как составить грамотное ТЗ на разработку сайта

Суть закона подлости известна всем: если есть хоть малейшая вероятность того, что вас могут понять неправильно, то вас обязательно поймут неправильно. Это относится и к созданию сайтов. Например, заказчику нужен второй «Фейсбук», но он неправильно поставил задачу разработчику. В результате получился форум цветоводов.

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

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

Техническое задание — это документ с требованиями к сайту. Если ТЗ составлено четко и подробно, исполнителю будут понятны поставленные перед ними задачи.

Следовательно, результат удовлетворит и заказчика, и исполнителя. Польза от технического задания очевидна:

1. Заказчик:

• Понимает, за что он будет платить деньги и какой ему сделают сайт. Структура сайта видна сразу, и если что-то не устраивает, изменения можно внести еще до начала разработки.

• Оценивает компетентность исполнителя. Грамотно составленное и понятное техзадание повышает доверие к разработчику.

• Защищает себя от недобросовестности исполнителя. Готовый сайт можно проверить на соответствие техническому заданию. Есть неточности? Разработчик их исправит. При наличии официального договора его можно принудить сделать это через суд.

• Упрощает замену исполнителей. Бывает, что заказчик и исполнитель ссорятся и не могут продолжать совместную работу. В такой ситуации с созданием сайта возникают проблемы. Однако при наличии подробного техзадания их можно легко решить: заказчик просто передает ТЗ новой команде, и она сразу же включается в работу.

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

2. Исполнитель:

• Понимает желания заказчика. Для этого ему придется задать клиенту десятки вопросов, показать примеры, предложить решения. Потом записать все в соответствующий документ и согласовать с заказчиком. Он одобрил? Значит, исполнитель понял его правильно.

• Застраховывается от внезапных «хотелок» заказчика. Случается, что в ходе создания сайта заказчик вдруг решает поменять задачу. Если разработчик согласовал и подписал ТЗ, он может быть спокоен: даже суд встанет на его сторону.

• Показывает свою компетентность. Четко и понятно подготовленное ТЗ говорит о профессионализме разработчика.

• Зарабатывает деньги. Иногда составление технического задания оценивается как отдельная услуга.

• Облегчает и ускоряет работу. Благодаря качественному техническому заданию становится понятна структура сайта и функционал каждой страницы: можно переходить к написанию кода и разработке дизайна.

Техническое задание составляет разработчик

Грамотное ТЗ может составить только исполнитель. Проект-менеджер или разработчик понимают в создании сайтов больше владельцев кафе и стоматологических клиник. Тем не менее заказчик должен принимать в процессе самое непосредственное участие.

Он:

• знакомит исполнителя с компанией, товарами или услугами, целевой аудиторией;

• объясняет цель создания сайта;

• рассказывает о своих желаниях и делится идеями;

• показывает примеры хороших (как ему кажется) сайтов.

• отвечает на вопросы исполнителя.

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

Пишите однозначно и точно

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

Например, этот дизайн кому-то показался красивым, и он использовал его на своем сайте:

То же самое относится и к невнятным формулировкам. Например:

• Сайт должен понравиться заказчику. А если не сможет?

• Сайт должен быть удобным. Для чего и для кого?

• Сайт должен выдерживать большие нагрузки. Сколько конкретно посетителей?

• Качественный экспертный контент. Ну, это понятно.

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

• не «загрузка сайта должна быть быстрой», а «у каждой страницы должно быть более 80 баллов в Google PageSpeed Insights»;

• не «большая нагрузка», а «50 тысяч пользователей одновременно;

• не «на главной странице размещен список статей», а «на главной странице выведен список последних шести опубликованных статей»;

• не «разработка минималистичного удобного интерфейса подписки», а «поле «Оставьте e-mail» с кнопкой «Подписаться»».

Донесите до коллег общую информацию

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

Разъясните сложные термины

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

Опишите инструменты и требования к хостингу

Допустим, вы в течение двух месяцев разрабатывали сайт. Каждый этап был согласован с заказчиком. И вот работа сделана. Во время показа админки заказчик возмущается: «Это «Модэкс»?! Я рассчитывал, что сайт будет на «Вордпрессе»!»

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

Составьте список требований к работе сайта

Готовый сайт должен работать в любом браузере и на всех устройствах. Это нужно обязательно прописать в ТЗ.

Также нужно указать требования к следующим параметрам:

• скорость загрузки сайта;

• устойчивость к нагрузкам;

• защита от хакерских атак и т.д.

Создайте структуру сайта

До того, как вы начнете отрисовывать дизайн и верстать, согласуйте с заказчиком структуру сайта.

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

Структуру можно показать списком или нарисовать в виде блок-схемы.

Структура — фундамент сайта. Ее создание — самый важный этап работы. Если она получится неудачной, сайт будет «кривым».

Объясните содержание страниц

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

1. Прототип. Самый наглядный и однозначный способ. Исполнитель рисует эскизы каждой страницы и прикладывает их к ТЗ. Заказчик увидит, как будет выглядеть интерфейс сайта, и сможет сказать, что ему понравилось, а что лучше изменить.

2. Перечисление элементов — ленивая альтернатива прототипу. Если вы выбираете этот вариант, нужно лишь составить список блоков, которые предполагается разместить на странице.

Распишите варианты использования сайта

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

При создании стандартной визитки или лендинга вам не нужно писать сценарий. Но если вы работаете над размещением интерактивных сервисов на сайте, сделать это необходимо.

Определитесь с контентом

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

Не используйте фразы типа «качественное», «интересное», «полезное для потенциальной аудитории». Укажите, что контент должен быть уникальным.

Опишите дизайн

Объективных критериев оценки дизайна сайта нет. Если заказчик хочет определенную цветовую гамму, пропишите это в ТЗ. Если он имеет брендбук с конкретными шрифтами, напишите и это.

А вот слова «красивый» и «современный» употреблять не нужно.

Вывод: структура ТЗ

Одинаковых технических заданий не бывает: для каждой задачи пишется отдельное ТЗ. Грамотное техническое задание должно содержать:

1. Информацию о компании и целевой аудитории, целях и задачах сайта;

2. Глоссарий терминов, непонятных заказчику;

3. Требования к верстке и работе сайта;

4. Описание применяемых технологий и список требований к хостингу;

5. Подробную структуру сайта;

6. Прототипы страниц и описания содержащихся на сайте элементов;

7. Сценарии использования интерфейса, если он нестандартный;

8. Список контента;

9. Требования к дизайну (в общих чертах).

В статье представлен ёмкий гайд по составлению хорошего технического задания.

Что же такое ТЗ? Если кратко, то это подробное описание всех пожеланий
по вашему сайту, необходимый функционал на нем. То есть всё: от структуры сайта и цветов
до чат-виджетов и вида иконок.

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

Почему это вообще нужно?

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

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

Многие считают, что ТЗ — простое выражение желания чего-либо, субъективно абстрактного, и написать
его может кто угодно, и как угодно, например: «Необходимо разработать интернет-магазин для продажи
цветов». В целом, задача поставлена, что уже хорошо, но написанное не выполняет своей цели.

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

1. Бриф

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

• Если у вас имеется старый сайт, укажите ссылку на него. При этом дополните информацию
  о том, хотелось бы вам разработку сайта с нуля или услуги по редизайну. Напишите информацию
  о старом сайте: чем он вас не устраивает и почему хотите новый, как давно он был
  разработан, есть ли адаптивность для различных устройств, какова его посещаемость и общие показатели,
  что вам нравится в старом сайте, а что вы хотели бы улучшить или убрать, если статистика
  показывает, что какой-либо блок неэффективен, а еще, что хотелось бы точно оставить и перенести
  на новую версию сайта.
• Название компании;
• Основная тематика;
• Ключевые слова;
• Фактический адрес компании;
• Телефоны компании, e-mail, режим работы, ссылки на соцсети;
• Опыт работы, год начала работы;
• Персонал и их квалификация;
• Активы компании;
• Юридическая информация (полное наименование юрлица/ИП, ИНН, ОГРН/ОГРНИП, КПП для юрлиц, ФИО
  руководителя);
• Регион продвижения, на который вы нацелены. Это может быть как вся Россия, так
  и определенный город;
• Основные конкуренты компании. Информация, чем они лучше, а чем хуже вас;
• Определите вашу целевую аудиторию — их возраст, пол, их мотивацию,
  т.е. ту цель/побуждение, с которыми они пришли на сайт. Определите для себя
  сразу — сайт в первую очередь не для вас, а для ваших потенциальных покупателей,
  и создание сайта целиком должно быть направлено на них, их удобство, понимание навигации;
• Укажите, откуда будет идти трафик — контекстная реклама, поисковая выдача, справочники,
  карты, соцсети и т.д.;
• Преимущества вашей компании перед конкурентами, т.е. ваше УТП, акции, скидки, бонусы, кэшбек
  и т.д.;
• Уточните, интересует ли вас дальнейшее продвижение и развитие сайта, если да,
  то каким способом?
• Пожелания к сайту. Здесь достаточно вольный набор для указания, но лучше всего именно здесь
  определить точные требования, какие функции и модули на сайте вам необходимы: формы обратной связи,
  подписка на рассылку, ЛК, калькулятор, таблицы, опросник или обязательное наличие форума, поп-апы,
  слайдеры, чат-виджеты или же интерактивные элементы, анимированные баннеры и другие желаемые фичи.

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

Фильтр может быть шаблонным (если это шаблонный дизайн сайта), поэтому укажите, если вас не устраивает такой
вариант и разработка нужна именно под вас и вашу специфику бизнеса.

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

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

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

Что еще необходимо учесть?

Подготовьте всё необходимое перед началом, это основа работ — хостинг, FTP, доменное имя, CMS, доступы
от них, необходимые для специалистов (логин и пароль), продумайте все почтовые адреса, хорошо, если
на них не будет стоять подтверждение входа, тогда все работы будут проходить быстрее —
специалистам не нужно будет ждать, пока вы назовете код, необходимый для подтверждения.

Лучше подготовить новые адреса для нового сайта и определить, какой адрес за что отвечает. Формы обратной
связи, Яндекс.Метрика и т. д.

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

2. Структура

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

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

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

Как составляется структура?

Идите от общего к частному — любой сайт разбивается на следующие составляющие: шапка сайта
(header), к которой относятся пункты меню, сайдбар, выступающий либо как боковое меню (не всегда
обязательно, но лучше рассмотреть возможность), либо включающее в себя наиболее важные моменты, которые
хочется показать пользователю — важные новости, акции и другая информация, и последний,
но не по важности — подвал (footer).

Чтобы было удобнее понимать (обеим сторонам), что необходимо для структуры, можно указать информацию к следующим
пунктам:

• Примеры сайтов. Серьезно, мало когда в сайте нравится сразу всё, поэтому лучше добавьте
  ссылки на те сайты, структура которых вам нравится и отражает представление о целях, который
  должен выполнять сайт, можно добавить краткий комментарий к каждой ссылке.
• Требования к элементам шапки сайта. Укажите, что точно необходимо отобразить —
  строка поиска, логотип, номера телефонов, вход в личный кабинет, и другие элементы. Для меню
  перечислите страницы, которые вам необходимы на сайте.
• Сайдбар (боковая часть сайта). Определитесь, какую наиболее важную информацию в первую
  очередь вы хотите показать: популярные товары, категории, различные опросы, викторины, подарки, акции или
  баннеры, новости, статьи или ответы на часто задаваемые вопросы.
• Подвал. Чаще всего, в подвале повторяются пункты меню и ситуативно дополнительные
  страницы, например, страница вакансий. Классически заведено, что в подвале дублируется контактная
  информация, копирайт с актуальным годом, иконки для перехода на соцсети и политика
  конфиденциальности, поэтому, если необходимо внести изменения, то нужно указать, какие.

Зачем это делается? Как только у вас появляется примерный схематичный набросок или блок-схема
того, что будет на сайте, всё это будет передано для разработки структуры с учетом карты релевантности,
еще на этом этапе составляются теги Title, Description и H1 для лучшего ранжирования поисковыми
системами.

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

3. Контент

Если кратко, контент — это любые графические или текстовые материалы на сайте. К графическим
относятся: баннеры, аудио-видео форматы подачи информации, фотографии, картинки. Если обобщать, то наиболее
ценный текстовый контент сайта включает в себя основное содержимое наиболее «ценных» страниц:
главной, страниц описания услуг и категорий товаров, их описание, статьи и новости, различные обзоры.

Чаще всего в тариф создания сайта уже входят ключевые страницы, которые будут иметь значение для пользователя,
например, тексты для главной, страницы о компании, 3-4 дополнительных страницы на выбор и Контакты.
Заполнение остальных же остается на ваше усмотрение, можно как заполнить оставшиеся страницы самостоятельно, так и заказать наполнение контентом за дополнительную плату.

На что еще важно обратить внимание при наполнении страниц, и какая страница стала наиболее
важной для 2021 года? В связи со вступившими изменениями для Федерального закона
«О персональных данных», рекомендую разработать политику конфиденциальности на сайт, более
подробно об изменениях вы можете прочитать в статье.

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

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

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

Какие должны быть требования к контенту?

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

Более подробно о том, как пишется хорошая статья на сайт, мы написали здесь, это поможет пониманию того, что необходимо помнить и какие аспекты учесть.

4. Дизайн

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

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

Далее просто посмотрите новые разработанные сайты, например, можно зайти на сайт Awwwards.com, открыть
понравившиеся проекты и отметить для себя моменты, которые привлекли — композиционное расположение
блоков, дизайн, шрифты, иконки или иллюстрации, различная микроанимация элементов.

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

Как, собственно, ставится задача дизайнеру? Прототип для сайта и его структура, а также ваши материалы
и пожелания передаются исполнителю, который отрисует дизайн-макеты, включающие в себя всё
вышеперечисленное. Чтобы всё учесть и подготовить материалы для передачи, мы составили небольшой
чек-лист по дизайну:

• Укажите примеры сайтов: что нравится и не нравится, лучше всего, если вы укажете
  ссылки на сайты, особенно на ваших прямых конкурентов.
• Если есть брендбук или фирменный стиль — прикрепите документы и файлы, это
  будет самым лучшим дополнением к ТЗ, если нет, указать какие цвета нравятся/не нравятся.
• Проработка логотипа и фавикона (если нет брендбука). Если у вас был старый сайт
  и уже есть фавикон и логотип, укажите, нужно ли обновлять их и приложите
  их в нужном формате.
• Опишите общую концепцию для сайта с помощью прилагательных, отвечая на вопрос
  «Каким должен быть сайт?»: развлекательный, яркий, строгий, продающий и т.д.
• Укажите, какие стили вам нравятся: минимализм, глассморфизм, ретро стиль, журнальный или любые
  другие стили. Подойдет также ссылка на сайт, стиль которого полностью отвечает вашим вкусам.
• Пожелание по графическим элементам — нужно ли много графических
  и привлекающих внимание элементов и блоков, или необходим минимум и лаконичность.
• Отдельное внимание обратите на блоки и элементы для сайта — они могут
  иметь острые углы, либо же быть закругленными, у них могут быть плавные линии, они могут быть
  визуально выпуклыми, иметь тени и градиенты. Укажите и эту информацию тоже.
• Дополнительные макеты — сейчас часто встречаются сайты с темной темой сайта,
  при этом есть как полноразмерная версия, так и проработка отдельных участков с переходом
  на темный цвет, например, текстовых. Также дополнительные макеты понадобятся, если необходимо создать
  версию сайта для слабовидящих людей.
• Разработка баннеров. Есть всегда два варианта — их можно как разместить
  и создавать в дальнейшем самостоятельно, так и сразу написать, какие баннеры необходимы,
  например: «Необходима отрисовка 6 баннеров в первый экран сайта».
• Подбор изображений. Не у всех есть готовые изображения для размещения на сайте.
  Поэтому укажите те страницы, для которых вы хотели бы их подобрать. Также сообщите, если
  необходим подбор с платных фотостоков или обработка фотографий под единый стиль.
• Функционал всплывающих поп-ап окон. Необходимо перечислить элементы, для которых нужен сценарий
  отрисовки и вида элемента при взаимодействии с ним.
• Если вам необходимо обязательное продуманное отображение на мобильных, планшетах
  и ноутбуках меньшего разрешения, укажите это, так как при создании сайт имеет адаптивность, но это
  может выглядеть неаккуратно.

5. Технические доработки сайта и разработка

Иначе говоря, к доработкам сайта относятся все меры, направленные на поисковую оптимизацию сайта
и проверку всех его характеристик. Что можно отнести к данным работам?

• Настройка основных зеркал;
• Создание страницы 404-ошибки;
• Установка средств аналитики, Вебмастера;
• Xml-карта сайта;
• Настройка файла robots.txt;
• Разработка шаблонов для составления тегов title и description для страниц категорий и карточек товара;
• Настройка https;
• Семантическая разметка сайта;
• Аудит сайта на выдачу ошибок для их устранения. В него входит проверка индексирования страниц,
  количества внешних ссылок, ведущих на страницы, количества и полезности исходящих ссылок, проверка
  всех тегов, скорости сайта.
• Настройка редиректов.

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

Разработка же включает в себя следующие аспекты — это создание какого-либо
индивидуального функционала для сайта полностью с нуля, или доработка существующего модуля, блока или плагина
калькуляторов, таблиц, конструкторов и так далее.

Какие действия нужно совершить тут? Для начала, конечно же, нужно определиться, что именно вам необходимо.
Возьмем за пример разработку конструктора по заказу наклеек. Так как вы точно понимаете, как
у вас проходит процесс, важно указать:

• Сколько видов наклеек у вас имеется и какой они формы.
• Их материал — бумага, винил, голографическая и т.д.
• Способ печати.
• Вариант резки наклеек.
• Подробное описание, как считается конечная стоимость, т.е. вся логика работы конструктора относительно выбора
  определенных параметров. Подумайте, есть ли какая-то скидка, например, при заказе
  от 10 листов — скидка 5%.
• Подготовьте изображения для размещения, если они необходимы.
• Далее есть два варианта действий — форма обратной связи и/или добавление в корзину. Для
  конструктора наклеек наиболее удобной будет форма обратной связи, в которую можно приложить файл
  с тем, что необходимо напечатать, после чего вся необходимая информация будет отправлена в виде заявки
  на почту.

Таким образом, следует продумать каждую возможную разработку, после чего будет получен точный расчет работ.

Подытожим

Помните, что разработка сайта — это всегда работа в тандеме между заказчиком и исполнителями,
и чем лучше вы друг друга будете понимать, тем лучше получится результат.

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

Помните, что исполняющая сторона всегда точно также (а то и еще больше вашего) желает сделать хороший
сайт и гораздо проще, когда не нужно это делать во тьме и на ощупь.

Так что, теперь у вас есть информация, а у нас возможности реализации, поэтому за разработкой
сайта можете смело обращаться к нам, ведь нам очень важно, когда заказчик
доволен

Содержание

1. Кому будут полезны наши советы
2. ТЗ: что это такое и зачем требуется
3. Составление ТЗ — задача исполнителя
4. Точность и однозначность
5. Указание общей информации
6. Работа со сложными терминами
7. Описание инструментов и требований к хостингу
8. Требования к работе сайта
9. Описание структуры сайта
10. Описание каждой страницы
11. Сценарии использования сайта
12. Ответственный за контент
13. Описание дизайна
14. Структура ТЗ

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

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

Кому будут полезны наши советы:

• специалистам по созданию сайтов — дизайнерам, веб-разработчикам, верстальщикам;
• менеджерам проектов;
• владельцам бизнеса, планирующим заказать создание сайта;
• руководителям диджитал-студий.

ТЗ: что это такое и зачем требуется

Техзадание — это документ, в котором прописаны требования к сайту. Они должны быть точными и подробными – так, все, кто участвует в разработке сайта, будут четко понимать свои задачи. Это значит, что с высокой вероятностью результат порадует всех.

Главная цель техзадания — уверенность в том, что заказчик и исполнитель правильно понимают друг друга.

Каждая из сторон может извлечь из создания технического задания свою пользу.

Что получает клиент:

1. Понимание, за что он отдает свои деньги и каким будет готовый сайт. Заказчик может сразу увидеть структуру и понять принципы работы сайта, оценить, все ли его устраивает. Если у клиента появляются какие-либо замечания, то устранить недочеты можно до начала разработки.
2. Возможность оценить компетентность исполнителя. Грамотное и понятное ТЗ вызывает доверие, а запутанное и невнятное — настораживает.
3. Страховку от недобросовестности исполнителя. Заказчик может сверить готовый сайт с техзаданием. Если обнаружены несоответствия, то исполнитель обязан их устранить. При заключении договора клиент дополнительно застрахован на законодательном уровне и может при необходимости обратиться в суд.
4. Возможность заменить исполнителя. Иногда между заказчиками и разработчиками возникают неразрешимые разногласия, и их партнерские отношения заканчиваются, а разработка сайта останавливается. Имея подробное ТЗ, клиент может просто передать его новой команде, которая быстро втянется в работу.
5. Возможность узнать стоимость создания сложного веб-сервиса. Ни один разработчик не станет сходу озвучивать точные сроки и стоимость разработки сложного продукта. Сначала необходимо понять специфику работы сервиса, и поможет в этом техническое задание.

Что получает исполнитель:

1. Понимание желаний клиента. Заказчик отвечает на множество вопросов, знакомится с примерами, оценивает решения, а исполнитель составляет единый документ для согласования. Если клиент согласовал ТЗ, то разработчик все понял правильно.
2. Защиту своих интересов. Некоторые заказчики пытаются «переиграть» ход работы, внося неожиданные предложения. При согласованном и подписанном техзадании исполнителю не грозит поток сиюминутных «хотелок» клиента — закон на стороне разработчика.
3. Возможность продемонстрировать свою компетентность. Тщательно проработанное ТЗ — это наглядная демонстрация того, на что способен исполнитель. Составляя продуманное техзадание, разработчик доказывает, что ему можно доверять.
4. Возможность дополнительного заработка. Некоторые веб-студии и разработчики предлагают составления техзадания как отдельную услугу.
5. Возможность упростить и ускорить процесс разработки. Хорошее ТЗ содержит описание структуры сайта, функций и элементов на каждой странице. При наличии техзадания разработчику остается только создать дизайн и написать код.

Теперь перейдем к тому, как составить правильное техническое задание.

Составление ТЗ — задача исполнителя

Теоретически составить ТЗ может кто угодно. Даже короткое предложение (например, «Нужен сайт-визитка для салона красоты») — это уже техзадание. Однако подобное ТЗ не будет достаточно информативным.

Составлением хорошего технического задания всегда занимается исполнитель, а не заказчик, ведь создание сайта — это задача для разработчика, а не для владельца клиники или магазина техники. Это не означает, что ответственность полностью ложится на исполнителя. Клиенту также предстоит принимать непосредственное участие в разработке. Чтобы результат был качественным, заказчику следует:

• рассказать исполнителю о своей компании, услугах/продукции, целевой аудитории;
• объяснить, для чего именно нужен сайт;
• донести до разработчика свои желания и поделиться идеями;
• привести примеры сайтов, которые ему нравятся;
• ответить на возникающие у разработчика вопросы.

При желании клиент может предложить черновой вариант ТЗ, который либо ускорит работу, либо будет забракован.

Точность и однозначность

Главное правило при составлении ТЗ звучит так: «Пишите точно и однозначно».

Во-первых, это значит, что в техзадании не должно быть качественных прилагательных — «привлекательный», «надежный» и других определений, которые нельзя понять однозначно. Все просто — у каждого свои личные представления о привлекательности, надежности и т.д.

Внимание на картинку.

Кто-то посчитал, что этот красивый, по его мнению, дизайн можно использовать для сайта. Результат оказался плачевным.

Рекомендуемые решения

То же касается и расплывчатых формулировок, например, «Сайт должен понравиться клиенту» или «Сайт должен выдерживать большие нагрузки». У клиента может быть плохое настроение, из-за которого он раскритикует любой сайт, а под «большими нагрузками» может подразумеваться как сотня, так и миллион посетителей.

Только конкретика! Обязательно проверьте текст ТЗ на наличие «невнятностей». Пишите четко и точно. Например, вместо «Сайт должен быстро загружаться» следует писать «Все страницы сайта должны иметь более 80 баллов в Google PageSpeed Insights. Фразу «На главной странице выводится список статей» замените фразой «На главной странице выводится список последних пяти опубликованных статей» и т.д.

Указание общей информации

Вся команда исполнителей должна понимать, чем занимается клиент и на какую целевую аудиторию рассчитан будущий сайт. Это следует прописать в начале ТЗ. Помимо этого, стоит указать цель сайта, кратко описав его функционал. Если заказчику нужен интернет-магазин, то разработчик должен сделать именно интернет-магазин, а не блог.

Работа со сложными терминами

Техзадание должно быть понятно заказчику — не забывайте об этом правиле. Используя сложные термины, объясните их клиенту максимально простым и доступным языком, даже если ваш заказчик очень далек от премудростей веб-разработки.

Описание инструментов и требований к хостингу

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

Рекомендуемые решения

Требования к работе сайта

Казалось бы, всем заказчикам и исполнителям очевидно, что сайт должен работать в любом браузере и на любом устройстве. Однако следует перечислить требования к работе сайта, чтобы интересы клиента были защищены.

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

Описание структуры сайта

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

Структуру можно показать в виде списка или блок-схемы.

Помните, что структура — это фундамент сайта.

Описание каждой страницы

Заказчику необходимо объяснить, зачем нужна каждая страница и размещенные на ней элементы. Продемонстрировать это можно двумя способами.

Первый способ — прототип. Исполнитель прилагает к ТЗ нарисованные им эскизы каждой страницы, чтобы заказчик мог увидеть, как будет выглядеть интерфейс сайта, и внести свои замечания.

Второй способ — перечисление элементов. Исполнитель прописывает, какие блоки будут размещены на странице и какие функции они выполняют.

Сценарии использования сайта

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

1. Действие посетителя.
2. Ответное действие сайта.
3. Результат.

Если вы занимаетесь разработкой обычной визитки или лендинга, то сценарии вам не понадобятся, а вот при создании сайтов с интерактивными сервисами без них не обойтись.

Ответственный за контент

Одни разработчики сразу наполняют сайт контентом, другие — пользуются «рыбой», а третьи предлагают написать тексты за отдельную плату. Наполнение сайта содержимым оговаривается в самом начале сотрудничества и фиксируется в техническом задании.

Объективно оценить качество текстов достаточно сложно. Не предлагайте клиенту «вкусный продающий контент» — это лишнее. А вот подчеркнуть, что весь контент является уникальным, полезно. Так заказчик будет защищен от недобросовестности исполнителей, пользующихся чужими наработками.

Описание дизайна

Вывести систему объективной оценки дизайна сложно (как и в случае с текстами). Вы можете обсудить с клиентом цветовую гамму и указать шрифты, если у заказчика есть брендбук.

Не пишите о том, каким красивым и современным будет дизайн будущего сайта — такие слова ничего не значат.

Структура ТЗ

Разные задачи — разные структуры техзадания. ТЗ для новой соцсети и ТЗ для лендинга по оптовым продажам стройматериалов по умолчанию не могут быть одинаковыми. Однако можно перечислить разделы, которые следует включить в структуру:

1. Информация о компании-заказчике и ЦА, цели и задачи будущего сайта.
2. Глоссарий сложных технических терминов.
3. Требования к верстке и работе сайта.
4. Описание применяемых технологий и перечень требований к хостингу.
5. Структура сайта.
6. Прототипы страниц/описания элементов, размещенных на странице.
7. Сценарии использования нестандартного интерфейса.
8. Контент, который создает исполнитель.
9. Требования к дизайну.

Теперь вы знаете, как составить хорошее техническое задание и найти взаимопонимание с любым клиентом.

Техническое задание на разработку сайта/веб-приложения

Аннотация

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

Документ является основным источником требований для реализации проекта.

1. Цели создания сайта

Здесь приводится описание основных целей и задач проекта.

2. Целевая аудитория

Здесь описывается, кто является основным пользователем проекта и решаемая им задача/потребность.

3. Требования к сайту

3.1. Общие требования

В данном разделе приводятся общие требования к проекту, например доменное имя, название, языки и т.д.

3.2. Ролевая модель

Описание основных ролей, их возможностей и полномочий

Таблица 1 – Ролевая модель

Роль	Возможности и полномочия	Кем создается
Незарегистрированный пользователь	Взаимодействие с публичной частью сайта Регистрация
Зарегистрированный пользователь	Взаимодействие с публичной частью сайта Авторизация Взаимодействие с личным кабинетом пользователя	Незарегистрированный пользователь
Менеджер	Взаимодействие с панелью управления в части обработки заказов пользователя	Администратором
Администратор	Взаимодействие с панелью управления	Администратором

3.3. Функциональные требования к публичной части

В данном разделе перечисляются и описываются все функциональные требования для публичной части сайта, например:

1. Просмотр каталога товаров.
2. Добавление товара в корзину.
3. Заказ обратного звонка.
4. Регистрация.
5. и т.д.

Для каждого функционального требования также должно быть конкретизированы детали, например, какие сведения должен указать пользователь при регистрации: Имя, телефон, email и т.д.

3.4. Функциональные требования к личному кабинету клиента

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

3.5. Функциональные требования к панели управления (администрирования)

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

3.6. Требования к структуре сайта

В данном разделе описывается структура сайта (разделы и связи между ними) для каждого типа пользователя (роли).

3.6.1. Структура публичной части сайта

Структура разделов публичной части сайта приведена на рисунке ниже.

Рисунок 1 – Структура публичной части сайта

Далее приводится описание каждого раздела, что в нем должно находиться в формате таблицы:

Раздел / подраздел	Содержимое	Функциональные требования	Требования к контенту
Блог	Список статей	Просмотр статьи Возможность фильтрации статей по дате и теме Голосование за статью Возможность оставить комментарий (только для авторизованных пользователей)	Нужно написать 3 статьи на заданную тему
…	…	…	…

3.7. Архитектура сайта

Сайт представляет собой клиент-серверное веб-приложение, архитектура которого представлена на рисунке ниже.

Рисунок 2 – Архитектура сайта

Далее приводится описание всех архитектурных блоков приложения и связей между ними.

3.8. Требования к интеграциям

Приводится список систем, с которыми должна быть выполнена интеграция, а также приводятся ссылки на описание API/модулей для интеграции с данными системами или сервисами.

3.9. Технические требования

Указываются технические требования, такие как:

• На какой системе (платформе) должен быть разработан проект.
• Требования к используемым технологиям.
• Требования к техническим средствам.
• Требования к адаптивности.
• Требования к кроссбраузерности.
• и т.д.

3.10. Требования к дизайну

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

3.11. Требования к контенту

В данном разделе необходимо указать какой контент должен быть создан/добавлен Исполнителем, а какой предоставляется Заказчиком.

3.12. Требования к внутренней SEO оптимизации

В данном разделе приводятся требования по внутренней SEO оптимизации сайта.

3.13. Требования к к системам аналитики

В данном разделе приводятся требования по подключению систем аналитики и отслеживания.

3.14. Дополнительные требования

Указываются дополнительные требования, модули и компоненты, которые должны быть использованы в проекте, несколько примеров приведено ниже.

3.14.1. Поисковые подсказки

При поиске по товарам/услугам пользователю должны предлагаться варианты поисковых запросов, соответствующих введенному запросу.

Пример поисковых подсказок приведен на рисунке ниже.

Рисунок 3 – Умный поиск

3.14.2. Требования к уведомлениям

Для оперативного информирования пользователей о новостях и событиях должна выполняться отправка email уведомлений в случае наступления следующих событий:

• Регистрация пользователя;
• Формирование заказа;
• Изменение статуса заказа;
• Отправка обращения через форму обратной связи;
• Начисление бонусов;
• Новые товары.

3.14.3. Требования к управлению изменениями

Все изменения кода сайта должны внедряться с использованием системы контроля версий – git после предварительного тестирования на тестовом сервере.

4. Требования к документации

Приводится перечень разрабатываемой документации и требований к ней.

5. Стадии и этапы разработки

В данном разделе приведена последовательность этапов реализации проекта (состав этапов зависит от конкретного проекта).

5.1. Прототипирование

На данном этапе необходимо выполнить:

• Создание интуитивно понятного и удобного интерфейса для требуемых типов устройств;
• Проектирование и разработка прототипа;
• Usability-тестирование прототипа.

Артефакты:

• Рабочий прототип, который будет отражать основные функции и возможности сайта.

5.2. Создание дизайна

На данном этапе необходимо выполнить:

• Создание полноцветного дизайна для требуемых разрешений экранов в соответствии с разработанной структурой и логикой, а также стилевыми пожеланиями Заказчика.

Артефакты:

• UX/UI дизайн проекта (макеты основных видов сайта для заданных разрешений).

5.3. Верстка и разработка

На данном этапе необходимо выполнить:

• Разработка веб-интерфейса сайта с заданным функционалом согласно макету;
• Разработка серверной части сайта и базы данных;
• Интеграция со смежными системами.

Артефакты:

• Полнофункциональная версия сайта.

5.4. Тестирование

На данном этапе необходимо выполнить:

• Тестирование сайта, исправление выявленных ошибок, оптимизация.

Выполняются следующие виды тестирования:

• Unit тестирование;
• Интеграционное тестирование;
• UAT тестирование;
• Нагрузочное тестирование;
• Тестирование безопасности.

Артефакты:

• Работоспособный сайт(веб-приложение), прошедший испытания и готовый к эксплуатации.

5.5. Документирование

На данном этапе необходимо выполнить:

• Разработку комплекта документации, согласно требованиям данного технического задания.

Артефакты:

• Программная и эксплуатационная документация.

5.6. Обучение

На данном этапе необходимо выполнить:

• Обучения персонала Заказчика работе и администрированию сайта.

Артефакты:

• Обученный персонал Заказчика.