Меню

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

Игорь Бахарев

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

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

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

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

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

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

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

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

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

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

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

Материал по теме

Итог дня обучения контекстной рекламе в AdWords

Материал по теме

Покупка интернет-магазина: проблемы и решения

Материал по теме

О лучших работниках

Подписаться на новости

Актуальное сейчас

Какие данные и как использовать для персонализации в ритейле

Треть клиентов считают , что ритейлеры недостаточно стараются, чтобы обеспечить высокий уровень персонализации. Эксперты приложения "Кошелёк" разбираются, на что обратить внимание, чтобы улучшить актив...

Amazon всё-таки проведёт осенние распродажи

Amazon всё-таки проведет акцию Prime Day 13-14 октября, сообщают несколько источников издания The Verge. Ранее стало известно, что Amazon предупредил своих селлеров о начале распродаж "Черной пятницы" 26...

Седьмой Международный ПЛАС-Форум "Online & Offline Retail 2020": готовимся к сбору урожая ключевых кейсов индустрии

Седьмой Международный ПЛАС-Форум "Online & Offline Retail 2020": готовимся к сбору урожая к лючевых кейсов индустрии Дорогие друзья и коллеги, рады Вам сообщить, что октябрьский ПЛАС-Форум состоится ...

Социальный шопинг в Instagram: кейс Sephora

У любителей косметических товаров, представленных в Sephora, появилась возможность купить их через Instagram Checkout, виртуальную витрину, позволяющую оформлять заказ непосредственно из ленты пользователя ...

Клиенты "Петровича" подсчитают ремонт на "Калькуляторе"

СТД "Петрович" представил пользователям своего сайта новый цифровой сервис "Калькулятор ремонта". С помощью этого инструмента на этапах планирования ремонта можно рассчитать стоимость ремонта в зависимости ...

Ozon и Lamoda встроят товары в кинофильмы

Онлайн-площадки Ozon и Lamoda станут партнерами площадки Сберанка SberDevices. Этот сервис видеошопинга интегрирует ассортимент маркетплейсов в видеоконтент ТВ-приставки. Как будет работать новый рекламны...