Как составить ТЗ для сайта

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

ТЗ может включать:

• 1. Схема интерфейса (прототип) сайта
• 2. Список требований (пожеланий, хотелок) от заказчика
• 3. Схема переходов по страницам сайта (карта сайта)
• 4. Робастные диаграммы (нужны определенные знания)
• 5. Диаграммы последовательностей (нужны определенные знания)

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

Теперь подробнее о всех пунктах ТЗ:

1. Схема интерфейса (прототип) сайта

Этот документ нужен для дизайнера и верстальщика. Его можно разработать на одной из специальных программ или начертить на обычном листе и отсканировать его. В качестве программы можно использовать: Axure RP Pro, Omnigraffle, ConceptDrawPro, Pidoco, BalsamiqMockups, Mockingbird, Pencil, iPlotz, ProtoShare, HotGloo, MockFlow, Gliffy, Cacoo, Creately, LovelyCharts, Mockup Builder, LucidChart. Таких программ огромное количество, список можно продолжать долго. Обычно в подобных программах вы можете создавать новые страницы и располагать на них элементы (кнопки, картинки, ссылки, блоки с текстом и др.) в нужной вам последовательности. Еще можно использовать бриф для дизайнера. Это файл, в котором в формате вопроса-ответа указаны пожелания заказчика по цветам, аналогичным сайтам и др. Вот несколько примеров, которые вы можете скачать: пример 1, пример 2

2. Список требований (пожеланий, хотелок) от заказчика

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

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

3. Схема переходов по страницам сайта (карта сайта)

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

4. Робастные диаграммы (нужны определенные знания)

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

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

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

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