ТЗ на разработку сайта. Коротко о главном

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

Не будем ходить вокруг да около: вы решили создать сайт, что делать в первую очередь?

1. Выбрать название сайта.

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

3. Структура сайта. 
Как минимум шапка, контент, футер, дальше 1 и более сайдбаров (боковые области, в которых обычно располагается меню, блоки типа «последние комментарии/отзывы/новости», блоки «подписка», «поиск» и т.п.).

Также может быть несколько футеров и шапок. Вот на этом этапе обычно требуется помощь специалистов. Можно, конечно, пуститься в мир фантазии с дизайнером и «забабахать» шапку на весь первый экран, с красивыми картинками, слайдшоу и даже видео… И программист(ы) воплотят в жизнь этот ваш каприз… А потом подключатся юзабилитисты и скажут все «снести».

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

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

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

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

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

Структура ТЗ может быть следующей:

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

1. Общая информация о сайте. Согласно выбранному имени мы выбираем доменное имя. Описываем в свободной форме назначение сайта.

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

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

3. Список терминов, используемых при разработке сайта. Для взаимопонимания, чтобы не называть потом элементы дизайна «штучками» 🙂

4. Описываем структуру сайта. В данном пункте перечисляются и расписываются разделы и подразделы сайта, статические и динамические страницы, навигация по сайту.

5. Верстка. Лучше всего, когда версткой дизайна занимается верстальщик, которому пишут свое ТЗ (ТЗ на верстку). А затем, когда верстка готова, программисту передают макет с элементами дизайна и сверстанные страницы.

6. Функциональные характеристики сайта. Определяемся вместе с программистом, какую CMS используем, либо ее разрабатывает программист (группа программистов). Возможно, для ваших нужд хватит и html+css+javascript. Описываем подробно, какой функционал должен быть на сайте, согласно назначению и структуре сайта. Это могут быть как обычные формы и фильтры, постраничная навигация, так и более серьезные инструменты и функционал, вроде системы резервного копирования, модуля массовой загрузки файлов, если на сайте, например, предусмотрена фотогалерея.

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

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

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

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

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

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

Сообщите о возможных несоответствиях. После программистом вносятся правки, если несоответствия были выявлены.

10. Перенос сайта на хостинг. 

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

Примерно так выглядит основной набор разделов ТЗ на создание сайта.

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

Еще по теме:

• Какие возможные последствия, если на сайте убрать функционал корзины и сделать форму заявки на получение оптового прайса?
Есть сайт интернет-магазин, с большим каталогом товаров, нацеленный на мелкий опт(принимаются заказы только от 300-400 $). В листинге товаров, есть кнопка быстрого добавления в корзину,...
• Можно ли в мобильной версии применять display none для скрытия дубля меню?
На сайте есть главное меню товаров, я скопировал его для мобильной версии. Мобильное меню я спрятал под медиа запрос display: none, просто главное меню слишком...
• Какой код ответа ставить на страницы сайта, если стоит заглушка на доступ из других стран?
Стоит заглушка на сайте, что контент в стране недоступен для всех стран, кроме страны регистрации сайта (по требованию правообладателей). Какой код ответа лучше ставить на...
• Как влияет на позиции сайта неправильное расположение заголовков Н4 и Н2?
То, что у нас на сайте неправильно стоят заголовки - после 2 идет сразу 4, насколько это влияет на позиции сайта и выдачу? Ответ Мы...
• Обзор CMS-систем. Мощный, гибкий, безопасный Drupal
Мы продолжаем наш цикл статей, посвященных описанию самых интересных CMS. Сегодня мы с Вами поговорим о DRUPAL. Для каких задач стоит её выбирать, главные особенности...