Как писать ТЗ для сайта и полезные онлайн-сервисы для начинающих

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

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

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

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

Почему важно рисовать такие штуки про свой сайт?

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

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

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

Какой должна быть последовательность действий?

1. Рисуем все уникальные страницы сайта сами;
2. Пишем в текстовом документе описания каждой страницы;
3. Если какие-то элементы сложные, пронумеровываем их и описываем их отдельно;
4. Согласовываем с разработчиками каждый пункт;
5. Если мы хотим еще и адаптивный дизайн, значит для каждого разрешения экрана надо рисовать все страницы;
   1. Тут надо помнить, что каждый вариант дизайна на каждое разрешение — это умножение стоимости верстки на число разрешений, ибо это отдельная работа;
6. Если с разработчиками никаких вопросов не осталось, всем все понятно, ждем от них оценку трудоемкости, этапность работ и сроки;
7. Не забываем прописывать и «санкции» по просрочке сроков по вине одной из сторон. Если вы что-то недодумали или не приняли нужное решение — идет протяжка сроков, разработчик переключается на другие задачи, дедлайны срываются. Если разработчик тупит, тут уже договаривайтесь, вариантов много;
8. Если дизайнер не работает с разработчиком, готовое ТЗ отдаем дизайнеру и все обсуждаем с ним;
   1. В этом случае обязательно надо передать дизайнеру требования разработчика к файлу .PSD с дизайнами страниц, это важное требование, которое может стать камнем преткновения в разработке;
   2. Дизайнер должен понимать, сколько экранов ему надо отрисовать. Визуализация помогает, но всякие хотелки с отображением содержимого может потребовать дополнительных экранов, это нормально. Стоимость работы изайнера вполне честно может складываться из числа отрисованных страниц;
9. Когда все будет нарисовано, файлы понравятся разработчику, можно расплачиваться с дизайнером окончательно;
10. А как контролировать разработку сайта с разработчиком — расскажу в другой раз;
11. А как должна выглядеть блок-схема действий пользователя в вашем интерфейсе — расскажу еще раньше, без нее вообще никак.

Всем начинающим, да и опытным онлайн комерсантам тоже, будет полезно посмотреть эту ссылочку: 12 онлайн сервисов для создания прототипов