ТЗ на сайт – так ли оно нужно
Создание сайта не обходится без технического задания (ТЗ). Это документ, в котором четко прописывается функционал, а также технические и контентные особенности будущего сайта. От грамотного составления ТЗ зависит понимание своих задач исполнителем и удовлетворенность результатом заказчика. Кстати, у нас в блоге вы можете найти статью о том, как выбрать исполнителя для разработки сайта.
Мало кто обходится без составления технического задания при разработке сайта. Работать без него нецелесообразно, тем более в digital сфере. Обоснуем.
Заказчику ТЗ необходимо, так как оно:
- ориентирует в предварительной стоимости сайта;
- позволяет быстрее согласовать основные вопросы;
- дает представление о внешнем виде и функционале сайта;
- упорядочивает все требования по разработке в одном документе;
- обеспечивает более последовательный контроль за промежуточными этапами работы, исходя из общего плана.
Подрядчику этот документ помогает:
- оптимизировать время на разработку;
- ясно формулировать главную задачу;
- подстраховывать от «ухода в сторону» и выполнения незапланированных задач.
Кроме того на ТЗ всегда можно сослаться при возникновении взаимных претензий. Да, по сути это не договор, но в документе прописываются фундаментальные основы работ, которыми и можно будет оперировать при необходимости.
Как составляется ТЗ и кто этим занимается
Прекрасно, когда над созданием технического задания трудится заказчик вместе с исполнителем. Так получится услышать друг друга, и уже на этом этапе понять, насколько первоначальная идея будет близка к воплощению. Но учитывая то, что в большинстве случаев заказчик – человек, достаточно далекий от веб-разработки, основная ответственность по составлению ТЗ ложится на плечи исполнителя. По мере готовности документа происходит согласование его содержания с клиентом, когда подробно рассматриваются все пункты. Облегчить труд разработчика можно, заполнив бриф, где собраны главные вопросы по поводу предстоящей работы. Это сведения о структуре (одностраничный сайт, лендинг, корпоративный, интернет-магазин и пр.), интерфейсе, референсы (список ресурсов, которые нравятся с обязательным уточнением того, что нравится) и т.д. Кроме того, для понимания направления бизнеса, заказчик предоставляет информацию о своей компании, целевой аудитории, отрасли, специфике продаж, основных каналах притока клиентов.
Главные пункты технического задания
Чаще всего ТЗ состоит из нескольких разделов, наименование которых может меняться от случая к случаю, но суть остается той же.
Организационные моменты:
- сроки готовности сайта. Этот параметр индивидуален для каждого конкретного проекта. Так, создание сайта с нуля, со сложным функционалом и разветвленной структурой, потребует минимум одного месяца. Разработка сайта, создаваемого с помощью шаблона, займет от 2 до 4 недель. Лендинг на шаблоне делается еще быстрее;
- описание объема работ. Естественно, сайт-визитка и интернет-магазин с каталогом и возможностью продаж, требуют разных трудозатрат. Что и уточняется в соответствующем разделе;
- подробное описание каждого этапа, начиная от дизайна, особенностей движка, структуры, содержания, предпочтительного контента и заканчивая доменным именем. Обо всем этом и многом другом поговорим чуть ниже.
Требования к сайту
Здесь прописываются следующие нюансы:
- сценарии использования сайта;
- структура;
- навигация;
- дизайн;
- юзабилити;
- функциональные возможности;
- технологии.
Это достаточно усредненный перечень, но в принципе он дает понять, что должно входить в ТЗ на создание сайта.
Примеры. Как это может выглядеть
Ниже приводим пример из ТЗ, в котором указано содержание документа.
Техническое задание на разработку сайта
Оглавление
- Термины и определения
- Общие положения
- Цели проекта
- Задачи проекта
- Структура Сайта
- Требования к функциональному назначению страниц сайта
- Типы данных
- Требования к html-вёрстке страниц
- Требования к CMS
- Требования к хостингу
- Условия приёмки работ и требования к передаче сайта
- Гарантийные обязательства
- Требования к ведению проекта, согласованию и предоставлению результатов работ
- Ожидаемые результаты исполнения Договора
- Права на результаты интеллектуальной деятельности
А вот так выглядит фрагмент из пункта «Задачи проекта»:
- Задачи проекта
В рамках выполнения работ по разработке Сайта Исполнителем должны быть выполнены следующие задачи:
4.1. Аналитика и проектирование:
4.1.1. Сбор и обработка входящих требований, аналитика.
4.1.2. Проектирование ключевых страниц сайта.
4.2. Создание дизайн-концепции:
4.2.1. Разработка дизайн-концепции сайта на примере 1 главной и 2 внутренних страниц.
4.3. Создание дизайн-макетов всех страниц Сайта:
4.3.1. Разработка дизайн-макетов внутренних страниц Сайта.
4.4. Верстка
4.4.1. Подготовка макетов к верстке;
4.4.2. Верстка шаблонов;
4.4.3. Адаптивная верстка.
4.5. Настройка CMS и программирование
4.5.1. Создание и настройка структуры сайта, меню, статических страниц.
4.5.2. Настройка шаблонов страниц в соответствии с прототипами сайта.
4.5.3. Настройка стандартных компонентов и основного функционала CMS 1С-Битрикс.
4.5.4. Разработка динамических компонентов и дополнительного функционала сайта.
Еще один пример, где регламентируется структура сайта.
Необходимо создать структуру (шаблон) сайта, состоящую из следующих элементов:
- “шапка” (хедер). В данном блоке необходимо расположить логотипы предприятия и герб города, также название предприятия;
- блок отображения меню главного меню сайта. Данный блок должен содержать перечень всех основных страниц. Требования к меню будут изложены далее. Меню должно поддерживать иерархическую структуру, дочерние элементы меню должны быть “выпадающими” (данный эффект необходимо создать с использованием языка JavaScript). Меню должно располагаться слева на сайте;
- Блок отображения нескольких последних новостей;
- Блок для входа зарегистрированных пользователей на сайт;
- Блок отображения погоды;
- “подвал” (футер) сайта. В данном блоке необходимо разместить краткую контактную информацию о предприятии;
- Блок отображения различного рода графической информации (рекламные баннеры, изображения и т.п.). Данные блоки могут добавляться по мере необходимости.
Выбираем движок сайта (CMS)
На этом этапе регламентируется система управления контентом сайта, или иными словами движок. Чтобы помочь заказчику ответить на этот вопрос, необходимо выяснить:
- кому будет поручено администрирование сайта – профессионалу со стороны разработчика или специалисту со стороны клиента;
- кто будет публиковать контент;
- кем будет обслуживаться сайт.
Если штатом компании заказчика не предусмотрена должность разработчика, то лучше выбрать так называемую коробочную CMS. Реже рекомендуются SaaS-сервисы, как более сложные, с закрытой архитектурой и подходящие для более специализированных задач. Итак, среди различных движков, выбираемых для сайта, могут быть следующие системы:
- Drupal, WordPress, OpenCart, Joomla,
- самописный движок,
- фреймворк,
- SaaS-платформы – Tilda, Wix.
Дизайн
Тут задачу облегчит брендбук компании. Если такового нет, будет сложнее. При описании желаемого оформления откажитесь от субъективных оценок типа «красивый», «современный» и пр.Такие расплывчатые формулировки здесь не подходят. ТЗ – документ точный и это в полной мере относится и к дизайну. Конкретные требования по оформлению сайта фиксируются в отдельном ТЗ для дизайнера. А уже там нужно будет указать:
- предпочтительные шрифты – главные и вспомогательные;
- направленность изображений;
- цветовую палитру – основные и дополнительные цвета;
- цветовые сочетания – рекомендуемые и недопустимые;
- пожелания по организации пространства сайта.
Здесь же прописывается множество деталей, таких как соотношение шапки с лого и названием компании по отношению к общей площади страницы, количество блоков, вид коллажей, наличие дополнительных графических элементов и пр.
Основные разделы сайта
Конечно же, в ТЗ указываются главные разделы сайта, а также уточняется тип навигации по ним. Большинство сайтов предполагают линейную или блочную структуру, но иногда встречаются и нестандартные форматы. Если подобный случай стал вашим выбором, обязательно опишите его в ТЗ. Предлагаем несколько универсальных советов, подходящих для сайтов различного типа:
- не используйте слишком сложную навигацию;
- разделите разделы на основные и второстепенные;
- отдавайте предпочтение простым ссылкам вместо сложных;
- переход на главную страницу должен быть возможен с любой страницы;
- все документы с сайта должны иметь свой собственный URL.
Сведения о страницах в ТЗ лучше всего подавать в виде блоков или списка, если информации немного. Учтите и еще один момент: под главные страницы важно подобрать семантическое ядро. Это значительно ускорит работу разработчика.
Содержимое страниц и их главные элементы
Исполнителем в ходе работы предоставляется макет главных, посадочных и контентных страниц. Структура может быть отображена списком. В случае, когда слова плохо передают содержание, необходимо создать графический прототип.
Элементы страницы — это шапка сайта, футер, кнопки, сайдбар, фильтры для коммерческих ресурсов. Расположение, размер, площадь от объема страницы для элементов прописывается очень тщательно. Например, уточняется, что шапка должна присутствовать на каждой странице, занимать столько-то места, растягиваться по ширине. Обязательно оговаривается тип используемого шрифта, его размер.
Генерация страниц
Здесь указываются особенности генерации служебных страниц. В качестве примера можно привести знаменитую 404 страницу, на которую пользователь переводится в случае поиска удаленной позиции или устаревшей информации. Из подобного перехода грамотным разработчиком извлекается максимум пользы для сайта и пользователя. То же касается и прочих страниц. Наиболее капризными в этом плане бывают фильтры.
Страницы с фильтрами
Это наиболее слабое звено, часто дающее сбои. Здесь нередко сбрасываются установленные значения, происходят спонтанные перезагрузки, да и с индексацией тоже беда. Существующие методы генерации (статические ссылки, Ajax, GET-параметры) неидеальны и обладают своими минусами. В выборе этого инструмента лучше учитывать мнение специалистов.
В случае с интернет-магазином, оптимизация фильтров прописывается в обязательном порядке. В примерный список требований к страницам-фильтрам входят следующие позиции:
- Использование только статических ссылок с семантическим URL для страниц фильтров первого уровня или для пересечения двух параметров. Обеспечение возможности самостоятельной настройки тегов (Title, Description, заголовки H1-H6, Keywords).
- Соблюдение порядка при создании URL-фильтров позволит избежать ошибок или неработающих параметров.
- Настройка индексирования страниц-фильтров и корректно работающая перелинковка внутри сайта.
Контент
Здесь речь идет о наполнении ресурса материалом в виде текстов, фото, графики, видео и пр. Если этот момент не будет оговорен в ТЗ, есть все шансы получить при приемке пустую оболочку, лишенную всякого содержания. Контент либо предоставляется самим заказчиком, либо разрабатывается исполнителем. Для второго случая актуально прописывание в ТЗ важных технических параметров текста: сео-оптимизированности (вхождения ключей), водности, тошноты. При желании можно указать, что текст должен быть экспертным, соответствующим определенным требованиям грамотности, уникальности и пр. В этом же пункте упоминаются все требования к текстам, визуальным материалам – фото и видео, анимации, иллюстрациям, инфографике и пр.
О поддерживаемых технологиях
Целесообразно оформлять требования к технической стороне отдельным перечнем. Примерно он может выглядеть так:
- Обязательное наличие мобильной версии сайта и как вариант – адаптивного шаблона.
- Кроссбраузерность – верстка, предполагающая корректное и идентичное отображение сайта во всех современных браузерах.
- Попадание в «зеленую» зону по системе оценки пользовательского контента Google Core Web Vitals по следующим позициям:
- скорость загрузки основного контента (LCP ) – менее 2,5 секунд,
- показатель смещения элементов во время загрузки страницы (CLS) – ниже 0,1 балла,
- время ожидания до первого взаимодействия с контентом (First Input Delay) LCP— менее 100 миллисекунд.
- Первоначальная поисковая оптимизация поисковых страниц.
- Корректный код ответа для всех страниц.
- Настроенный доступ посредством FTP.
- Семантический URL.
- Наличие стандарта ограничения доступа роботам в документе robots.txt.
- Карта сайта (пользовательская и XML).
Доменная зона и доменное имя
Доменное имя в нескольких вариантах предоставляется заказчиком. Вполне вероятно, что большая часть из подобных названий (если не все) будут уже заняты. В этом случае поиск имени распространяется за пределы зоны .ru. Тогда исполнителю поможет набор требований от заказчика. Они могут быть подобного типа:
- Присутствие в доменном имени продающих слов kupibilet, salesshop.
- Включение названия компании в состав доменного имени: vkusnoitochka.ru, eldorado.ru.
- Использование дополнительных ключевых слов, близких тематике сайта. Предоставляется заказчиком.
- Предпочтительная доменная зона: .RU, .COM, .BIZ, .UK, .ORG и пр.
- Тематика или категория доменного имени: одежда, мебель, образование, медицина и пр.
На основании предоставленной информации исполнитель выбирает ряд оптимальных вариантов, которые и предоставляются клиенту.
Хостинг и провайдер и требования к ним
Выбор хостинга влияет на то, насколько доступным сайт будет в интернете, и как стабильно он будет работать. В техническом задании по этому поводу указываются такие параметры:
- Разновидность хостинга (виртуальный, серверы, VPS).
- Функция быстрой установки CMS.
- Наличие следующих технологий: защита от DDoS-атак, доступ по SSH, возможность бекапов.
- Минимальная дисковая квота.
- Указание ориетировочной статической нагрузки аккаунта.
- Примерный трафик: предполагаемое количество пользователей на сайте за сутки.
- Встроенный файловый менеджер.
- Возможность бесплатного переноса сайта.
Ошибки при создании ТЗ, которых следует избегать
Составление технического задания на создание сайта – дело серьезное, требующее грамотного подхода. Никаких неточных и неочевидных требований быть не должно. Хорошее ТЗ тяготеет к ясности. Ниже перечислим ошибки, которые могут свести на нет старания разработчиков.
- Не обозначен тип сайта. Без знания этой детали надеяться на положительный итог не стоит. Исполнитель точно должен знать с чем ему придется работать Иначе досадных недоразумений не избежать.
- Не ясна цель и не понятны действия, ради которых создается сайт. Без этого уточнения исполнителю трудно понять, чего, собственно, хочет клиент для своего бизнеса. Страдает первичная настройка аналитики, что в будущем негативно отразится на продажах.
- Отсутствует упоминание о пользовательских сценариях, то есть о том, для какой цели пользователи вообще будут заходить на этот сайт.
- Клиентом не предоставлены референсы – примеры сайтов. Разработчику трудно будет понять, от чего отталкиваться. Тогда как при наличии образцов дело пойдет значительно быстрее.
- Упущен момент установки счетчиков веб-аналитики. Для минимального набора это Яндекс Метрика и Google Search Console.
- Не оговорен вопрос о семантической разметке сайта, которая обеспечивает лучшее понимание контента поисковой системой. Это особенно актуально для коммерческих сайтов, занимающихся продажами.
Используйте озвученные в этом обзоре рекомендации при оставлении ТЗ, предпочитая точность изложения. Ведь от этого в конечном итоге зависит итоговый результат, то, как будет выглядеть и функционировать сайт.
