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

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

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

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

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

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

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

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

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

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%.
• Подготовьте изображения для размещения, если они необходимы.
• Далее есть два варианта действий — форма обратной связи и/или добавление в корзину. Для конструктора наклеек наиболее удобной будет форма обратной связи, в которую можно приложить файл с тем, что необходимо напечатать, после чего вся необходимая информация будет отправлена в виде заявки на почту.

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

Подытожим

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

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

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

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