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

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

Техническое задание (ТЗ) – это документ, в котором описаны все задачи и требования по проекту. Оно охватывает технические, дизайнерские, функциональные, SEO и контентные аспекты. Каждый из этих этапов должен быть подробно описан. Можно сделать базовый макет или схему для визуализации идеи.

Зачем составлять ТЗ на сайт

Заказчику это помогает донести свое видение до исполнителя. Объяснить что и как должно выглядеть, работать, располагаться.

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

1. Как будет проходить процесс.
2. Каковы будут промежуточные результаты.
3. Сколько времени может занять разработка.
4. Какая примерная стоимость работ.

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

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

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

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

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

Как правильно сформировать техзадание для сайта и кто должен это делать

В идеале это должна быть совместная работа заказчика и веб-студии. Но заказчик не всегда хорошо осведомлен в технических нюансах.

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

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

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

Основные пункты и разделы ТЗ для сайта

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

Платформа, на которой будет создан сайт

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

Платформы конструкторов предлагают дополнительные опции и интеграции – их можно оплачивать отдельно или при переходе на более дорогую подписку.

С CMS немного другая ситуация, так как есть много условно бесплатных вариантов с открытым кодом. Они дорабатываются программистами вручную и путем подключения готовых модулей. Модули могут быть платные и бесплатные.

Сайт на фреймворке изначально пишется под заказчика. Это уникальная разработка. Дает максимально широкие возможности для индивидуального дизайна и кастомного функционала.

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

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

В случае с конструктором желательно указывать тарифный план и список опций. В случае с CMS – список всех необходимых модулей (плагинов).

Основные требования к сайту

Здесь должны быть описаны:

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

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

1. Поделиться информацией.
2. Перейти на корпоративные страницы.
3. Поставить лайк публикации.
4. Оставить комментарий.
5. Авторизоваться на сайте.

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

• скорость загрузки страниц;
• поддерживаемый объем трафика;
• допустимый размер каталога.

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

Структура сайта

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

Самый лучший вариант – интерактивный прототип. Он наиболее качественно визуализирует расположение и взаимосвязь разных блоков.

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

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

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

Отдельно нужно указать сквозные элементы, которые будут на каждой странице сайта:

• логотип;
• верхнее меню;
• нижнее меню;
• боковое меню;
• всплывающие окна.

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

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

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

Кроме того SEO-специалист изучает структуры сайтов конкурентов и дает рекомендации на основании полученной информации. Итоговая структура утверждается по согласованию с заказчиком.

Дизайн

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

1. Выбрать цветовую гамму и шрифты.
2. Определить основной и второстепенные шрифты.
3. Определить допустимые и недопустимые сочетания цветов.
4. Описать стилизацию иконок, кнопок, инфографики.
5. Выбрать тематику изображений.
6. Заказать логотип (если его нет).
7. Описать пожелания по адаптивности сайта.
8. Описать пожелания по эффектам и анимациям (если нужно).

Графические элементы создаются по заданным требованиям: размер, стиль, выборка цветов. Это все должно быть описано в ТЗ. Можно использовать готовый логотип, если он у вас уже есть.

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

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

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

Содержание страниц и описание их элементов

Для каждой уникальной страницы должна быть прописана своя структура – она будет скопирована для однотипных страниц. К элементам страницы, как правило, относятся:

• шапка;
• подвал;
• боковое меню;
• кнопки;
• баннеры;
• текстовые блоки;
• фото и видео;
• блоки отзывов;
• блоки комментариев;
• формы заявки;
• формы обратной связи.

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

Поэтому структуру страниц сверяют с общей структурой сайта, а требования к дизайну страницы – с общими требованиями по дизайну.

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

Контент

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

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

На основании этого можно дать задания по написанию текстов с конкретными ключевыми словами. Также SEO-специалист даёт рекомендации по использованию и загрузке изображений на сайт.

Домен и хостинг

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

Если вам все же нравится конкретное доменное имя, то можно попробовать сменить доменную зону: вместо популярных .com, .ua и .com.ua использовать менее конкурентные .shop или .online.

Выбор доменной зоны зависит от типа и географии вашей деятельности. А еще от наличия торговой марки – без нее в Украине не получится зарегистрировать домен .ua.

Процесс поиска и подбора свободного домена может занять некоторое время, поэтому можно доверить его веб-студии. Только укажите требования к будущему домену:

1. Наличие в его составе слов, ассоциирующихся с коммерцией.
2. Наличие в его составе названия вашей компании.
3. Наличие в его составе ключевых слов.
4. Желаемая доменная зона (возможные варианты).
5. Тематика домена: спорт, одежда, обувь, путешествия, новости.

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

1. Желаемый тип – виртуальный хостинг, виртуальный сервер, физический сервер или облачный.
2. Пространство на диске, процессорное время, память, трафик.
3. Поддержка технологий: защита от DDoS-атак, возможность бекапов, доступ по SSH.
4. Есть ли панель управления и какая именно.
5. Возможность быстрой установки выбранной CMS.
6. Возможность переноса сайта на другой хостинг и платформу.

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

SEO-требования

Они обычно создаются при сотрудничестве с SEO-специалистом – своим или от веб-студии. Он дает как технические рекомендации по сайту, так и рекомендации по контенту.

Первый вид рекомендаций предназначен для программистов, верстальщиков и в некоторой степени для дизайнеров. Второй вид рекомендаций предназначен для контент-менеджеров и копирайтеров.

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

Эти параметры влияют на поведенческие факторы. Внешний вид url и внутренняя перелинковка играют важную роль. Игнорировать их значимость было бы ошибочно.

Популярные ошибки при формировании ТЗ

Есть ряд ошибок, которые часто встречаются при составлении технического задания. Среди них:

1. Не указаны целевые действия – надо уточнить, какие действия будут вести к желаемым продажам или подпискам. Это помогает построить воронку продаж и правильно настроить аналитику на сайте.
2. Нет примеров похожих сайтов – желательно подобрать несколько хороших примеров и один плохой. При этом объясните, что именно вам нравится и что не нравится. Это поможет исполнителям сориентироваться.
3. Не описаны пользовательские сценарии – это связано с типом сайта, интерфейсом и поведением целевой аудитории. Надо понять для чего люди будут приходить на сайт и что делать на нем.
4. Не указана установка и настройка сервисов веб-аналитики. Как минимум, стоит установить и настроить Google Search Console и Google Analytics.
5. Не регламентирована семантическая разметка сайта – это к вопросу о SEO-требованиях. Особенно важно для коммерческих ресурсов. Семантическая разметка помогает поисковику лучше понимать содержание страниц.
6. Расплывчатые формулировки. Вместо “красивый и стильный” лучше написать “индивидуальный дизайн в тематике спорттоваров”, вместо “быстрая загрузка страниц” – “от 90 баллов в Google PageSpeed для каждой страницы”. А вместо фразы “качественные тексты” написать требования по процентам уникальности, тошноты и воды.

Ключевое правило – как можно больше конкретики. Если вы что-то не укажете в ТЗ, то это могут не сделать. Даже если вам это кажется обязательным, очевидным или элементарным.

Выводы и рекомендации

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

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

Даже то, что кажется очевидным лучше прописывать в ТЗ. При этом стоит придерживаться модели SMART: все задачи должны быть конкретными (Specific), измеримыми (Measurable), достижимыми (Achievable), релевантными (Relevant) и ограниченными по времени (Time-bound).

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