Как самим написать техническое задание. Правила технического задания
О чём вы думаете, когда видите по городу или на сайтах (в рекламных блоках) баннеры с заголовками: «Сайт за 500 грн.», «Сайт за 1000 руб.»?
Я, как разработчик, долго думала - развод! Но количество подобных объявлений наводит на мысли:
- А возможно ли такое вообще?
- Какое качество будет у сайта в таком случае?
- Можно ли будет его потом продвигать?
- Займёт ли он достойные позиции?
- Будет ли он удобным и будет ли возможность его редактировать?
Конечно, порой приемлем и простой набор HTML-файлов: если страниц немного, их редко меняют из-за тематики и владелец сайта (или контент-менеджер) знает HTML. А если нет? Если, например, потенциальный владелец ничего не знает об HTML и после того, как получит сайт, не вносит никаких изменений? Обычно мало кто вносит какие-то изменения сразу, ведь всё актуально. Но спустя некоторое время, когда нужно прописать метатеги и обновить какую-либо информацию, оказывается, что сайт статичный и нет редактора, с помощью которого можно менять его содержимое.
Кроме того, только владелец сайта знает, что он продаёт и на чём должны быть сделаны акценты. Дизайнер может нарисовать что угодно, программисты и верстальщики сверстают и создадут функционал, какой вы захотите. А как сделать так, чтобы вас поняли как можно корректнее и реализовали ваши планы и идеи?
В нашем блоге мы уже писали о том, с описанием его структуры и (заказчика, дизайнера, программиста, верстальщика и др.). В этот раз опишем (с примерами), что заказчик должен передать верстальщику и программисту, чтобы ожидания совпали с реальностью.
Я предлагаю вам рассмотреть пример хорошего ТЗ. Техническое задание программисту составлялось не один день, но все эти временные затраты составителя оправданы.
Итак, образец технического задания на разработку небольшого сайта отзовика.
ТЗ по разработке сайта
Как правило, работа над созданием или редизайном сайта начинается с дизайнера, ведь на выходе вы получаете картинку. Однако сложно найти человека, который поймёт, что вы хотите, и сможет оцифровать эту картинку в вашей голове. Поэтому всё нужно продемонстрировать.
Не стесняйтесь и не ленитесь приводить примеры сайтов, на которых вам нравится тот или иной функционал или элементы дизайна, вёрстка, эффекты. Но! не просто давайте ссылки, а прикрепляйте скриншоты. Вы можете составить ТЗ, а владелец сайта (который вы приведёте в пример) к тому моменту, когда ТЗ перейдёт к исполнителю, поменяет вёрстку. Тогда вам снова придётся искать пример и объяснять, что вы имели в виду.
Обязательно сохраняйте скриншоты себе на компьютер или в облачный сервис, чтобы они не были удалены через месяц (как, например, это возможно при использовании бесплатной версии сервиса Joxi). Всё должно храниться ещё хотя бы месяц после того, как сайт появится с обновлённой вёрсткой/функционалом.
Не рекомендую заканчивать работу с дизайнером на этапе создания макета сайта. В процессе также важно обсудить, прорисовать и описать поведение элементов дизайна. Это поможет верстальщику и разработчику понять вас так же, как понял дизайнер. Понятно, что часто такой диалог изматывает, но не стоит останавливаться на полпути.
Десктопная версия
Ширина сайта – 1140 px (пример –vizaua.com).
Шапка и футер растягиваются по ширине экрана и одинаковы для всех страниц.
Семейство шрифтов: Cambria (предпочтительно), Century, Georgia. Можно указать и другие популярные шрифты с засечками.
Размеры шрифтов (для Cambria):
Текст под логотипом в шапке – 15px
Ссылки в шапке – 14px
Текст в футере – 16px
Главная страница – home.png
Текст над строкой поиска – 25px
Текст под строкой поиска – 14px
Описание элементов:
1, 2 – цифры с реальным числом магазинов и отзывов. Можно пересчитывать один раз в 24 часа.
3 – категории. Располагаем вручную в таком порядке, как на макете.
4 – ссылки на магазины. Рядом с названием магазина выводим число отзывов. Если отзывов ещё нет, ничего не выводим.
Под каждой категорией выводим 6 самых популярных по количеству отзывов магазинов. Если в категории есть ещё магазины, на неё ведёт ссылка «Ещё N», где N – число магазинов. Если больше магазинов нет, на категорию ведёт ссылка «Показать всё».
5 – список низкопопулярных категорий. Выводим их тут.
Страница с описанием магазина и отзывами – shop-page.png
Заголовок H1 – 30px
Заголовок H2 – 22px
Описание элементов:
1, 2, 3 – место под рекламные блоки. Нужно отметить это место при вёрстке и закрыть к индексации.
4 – контент страницы. Дизайн меняется таким образом, чтобы все изменения можно было внести глобально, без редактирования каждой страницы по отдельности:
– добавлен серый фон контентного блока;
– добавлен белый border у таблиц (по умолчанию, вроде, нигде не прописывался);
— добавлено место под рекламный блок над отзывами.
5 – заголовок формы. Нужно проставить «Добавить отзыв».
6 – последние отзывы (сквозной блок для постов и категорий). Это примерное отображение, допускается готовый плагин с похожей визуализацией.
Описание элементов:
1,2 – место под рекламные блоки.
3 – контентная часть. Нужно удалить все описания категорий (тексты сохранить в отдельном.doc-файле и загрузить этот файл на сервер).
4 – ссылка на отзывы. Во всех шаблонах ТЗ слово «комментарии» меняем на «отзывы».
Служебная страница – page.png
404 ошибка – 404.png
404 – шрифт 80px
Текст под ним – 20px
Наклонный текст – 15px
Твой сайт плохо ранжируется в Яндексе или Google,
а все усилия по его продвижению не дают нужного эффекта?
Отправь заявку на бесплатную SEO-диагностику и узнай,
что не так с твоим сайтом.
Мобильная вёрстка
Сейчас лучше ставить мобильную вёрстку главной и от неё «плясать». Не зря же вся справка и блог Google пестрят «Mobile first» (сначала мобильные или мобильность). Мы говорим вам об этом с 2014 года (статьи « » и « »).
Поэтому в первую очередь подумайте и опишите, как ваш сайт должен выглядеть и работать на мобильных устройствах. Особое внимание уделите:
- Контактам. Номера телефонов должны быть кликабельными – при нажатии должна открываться панель ввода номера с уже набранным номером и кнопкой вызова.
- Меню. Опишите, как оно должно открываться: выезжать сбоку, сверху и т. д.
- Не должно быть горизонтальной прокрутки на страницах сайта (это само собой разумеется, но я всё же решила напомнить).
Ниже представлены макеты страниц для отображения сайта на мобильных устройствах (адаптивная вёрстка).
Основные требования:
– меню-бургер – раскрывается вниз при касании значка меню:
– сайдбар опускаем под основной контент.
Для начала, надо напомнить, что техническое задание (ТЗ) - официальный документ, являющийся неотъемлемой частью Договора на разработку сайта.
ТЗ содержит техническое обоснование разработки и требования, предъявляемые к проектируемому сайту (дизайну, навигации, способам представления информации); определяет сроки, стоимость, объем и порядок выполнения каждого этапа разработки.
Техническое задание - это исходный документ проектирования сайта, утверждается в двустороннем порядке, Заказчиком и Исполнителем. ТЗ является главным документом, на основе которого ведется разработка и оценивается качество готового продукта.
На основании ТЗ принимаются или отклоняются претензии Заказчика к качеству работы Исполнителя, оплачивается готовая работа, оформляется акт приема-передачи.
bikeriderlondon / Shutterstock.comТехническое задание составляет Исполнитель на основе заполненного брифа, анализа результатов предварительных исследований, расчетов и проектного моделирования будущего сайта. ТЗ должно учитывать все требования, аспекты и детализацию будущего сайта.
В настоящем документе приводится полный набор требований по реализации сайта.
Заказчик и Исполнитель соглашаются
Подпись Заказчика и Исполнителя в настоящем документе подтверждает их согласие с нижеследующими фактами и условиями:
- Исполнитель подготовил и разработал настоящий документ, именуемый Техническое Задание (ТЗ), который содержит перечень требований к выполняемым работам.
- Заказчик согласен со всеми положениями настоящего ТЗ.
- После утверждения ТЗ все предыдущие договоренности теряют силу и действуют только пункты данного ТЗ.
- Заказчик не вправе требовать от Исполнителя в рамках текущего Договора выполнения работ либо оказания услуг, прямо не описанных в настоящем ТЗ.
- Исполнитель выполняет только работы, указанные в данном ТЗ.
- Все что выходит за рамки пунктов данного ТЗ, Заказчиком оплачивается дополнительно, на основании утвержденных сторонами дополнений к данному ТЗ.
- Исполнитель приступает к выполнению работ по ТЗ, после: письменного утверждения ТЗ, получения всей необходимой информации указанной в ТЗ, получения необходимых материалов заказчика и выполнения пунктов оплаты.
- Заказчик берет на себя обязательства, по завершению принять работу в течении 3-5 рабочих дней, оплатить работы по данному ТЗ в указанные в нем сроки, в случае если работы выполнены в полном объеме и в соответствии с ТЗ.
- Заказчик не вправе требовать от Исполнителя соблюдения каких-либо форматов и стандартов, если это не указано в настоящем ТЗ.
- Все работы по созданию сайта ведется на собственном хостинге Исполнителя. После завершения всех работ, переносится на реальный сервер для тестирования.
- По окончанию работ, Исполнитель предоставляет консультации по администрированию в течение 5 рабочих дней, но не более получаса в день. Дополнительное время оплачивается отдельно, согласно действующих тарифов Исполнителя.
- Все неоднозначности, выявленные в настоящем ТЗ после его подписания, подлежат двухстороннему согласованию между Сторонами. В процессе согласования могут быть разработаны дополнительные требования, которые оформляются дополнительным соглашением к Договору и оцениваются соответствующим образом.
- Положения данного документа являются обязательными для разработчиков после его утверждения в установленном порядке.
- ТЗ является средством верификации выполненных работ.
Статья по теме: Как подключить Яндекс.Спеллер к WordPress
Совместимость с браузерами
Необходимо учесть функциональность различных браузеров, которые, вероятно, будут использовать посетители. Для обеспечения идентичного отображения сайта, нужно обеспечить совместимость с наиболее популярными браузерами:
- Internet Explorer (версия 8 и выше);
- Mozilla Firefox (версия 3 и выше);
- Google Chrome (версия 4 и выше);
- Opera (версия 10 и выше).
Требования к компоновке страниц сайта
Текст должен быть читаем. Согласно статистике, минимальное экранное разрешение мониторов пользователей составляет 1024×768 пикселей. При таком разрешении все тексты на сайте должны выглядеть понятно и хорошо видны без использования горизонтальной полосы прокрутки. При разрешении, меньшем, чем 1024×768 появится горизонтальная полоса прокрутки.
Сайт также должен иметь ограничения и на максимальный размер, чтобы хорошо выглядеть на мониторах с высоким разрешением. Поэтому максимальная ширина сайта будет 1280×1024.
Требования к изменению содержимого сайта
Для удаленного администрирования (добавления, редактирования и удаления текстовой и графической информации) может использоваться бесплатная система управления контентом сайта (CMS), например WordPress. Но можно использовать и UMI.CMS (она более удобна пользователю для редактирования сайта, но сложнее для разработчика). Поэтому, если Заказчик пожелает использовать UMI.CMS, стоимость внедрения оговаривается отдельно, после утверждения дизайна. Ориентировочно она будет дороже на 50% от стоимости программирования.
С помощью CMS можно легко добавлять новые разделы и подразделы, но при этом, кроме управления содержимым базы данных, возможности изменять внешний вид сайта - не будет.
Резюме
От того насколько подробно вы опишите задачи, стоящие перед разработчиком сайта, настолько проще будет сдавать проект. Вплоть до того что написать как открывается картинка во всплывающем окне, в какой она будет рамочке и будет ли она открываться с каим-то дополнительным эффектом. Так как очень часто заказчики, еще при создании сайта норовят вносить правки в текст, картинки и тому подобное, что собственно относится к совершенно другому этапу, который называется «Наполнение сайта» или «Обновление сайта».
Редкая коммерческая организация сегодня обходится без собственной страницы в интернете. Это удобная форма предоставления информации о деятельности компании, эффективный способ рекламы или даже продажи товаров. Для успешной организации работы над электронным ресурсом необходимо тщательно согласовывать техническое задание на разработку сайта.
Отношения разработчика и заказчика строятся на возмездной основе. Права и обязанности сторон закрепляются письменным договором. При этом каждый из участников сделки должен понимать, что конкретно получится после завершения работ.
Любые изменения и доработки проекта влекут за собой временные и материальные затраты, ведь труд дизайнеров, программистов и верстальщиков стоит денег. Без всеобъемлющего технического задания возникнут многочисленные споры о том, за чей счёт должны производиться доработки.
Важно! Техническое задание на разработку сайта является неотъемлемой частью договора на проведение соответствующих работ. Без его подписания не стоит приступать к работе.
Структура
Задание делится на несколько составных частей:
- Глоссарий. В этом разделе даются определения основных понятий, которые будут использоваться в документе. Например, требуют пояснения такие термины, как шаблон раздела, HTML-теги, контент и другие;
- Общие положения. Сторонам следует определить статус технического задания, порядок внесения в него правок и согласования отдельных положений;
Также в этом разделе регламентируются цели и задачи сайта. Любая компания ориентируется на конкретную аудиторию, и для каждой целевой группы подбирается свой дизайн и определённое информационное наполнение.
Сайты используются для различных целей: в качестве интернет-магазина, в рекламных целях, для предоставления информации о компании и так далее. Цели, для которых создаётся сайт, также влияют на его структуру и содержание.
- Требования к программному обеспечению. Они включают в себя серверную часть (программные условия, за которые отвечает владелец сайта) и клиентскую (браузеры, через которые заходят на электронный ресурс клиенты);
- Технические требования. Сайт разрабатывается под конкретные аппаратные возможности вычислительной техники. Неоптимизированные страницы будут проблемно открываться на устаревших устройствах, что существенно снизит аудиторию. В задании указываются требования к процессору, оперативной памяти и так далее;
- Типы пользователей. Сайт посещают пользователи с различными статусами: администраторы, авторизованные пользователи, неавторизованные и так далее. Для каждой из этих групп должен быть разработан собственный функционал;
- Требования к графическому дизайну. Заказчик и исполнитель согласовывают цветовую гамму, размеры баннеров и кнопок, расположение блоков на страницах и так далее. Отдельно указываются элементы, которые не должны быть использованы в ходе создания графической составляющей (например, мелькающие баннеры);
Обратите внимание! Обязательно следует прописать порядок утверждения концепции дизайна сайта. Любые изменения в уже принятую концепцию могут вноситься только за дополнительную плату.
- Требования к структуре сайта. Это самый объёмный раздел. В нём описывается, какие именно элементы нужны на электронном ресурсе: главная страница, личный кабинет, раздел «О компании», страницы с описаниями товаров и так далее;
Подробно следует остановиться на статических и динамических частях страницы, размерах кнопок, баннеров, других структурных элементов. Чем больше будет информации о каждой части, тем быстрее работники организации-заказчика справятся с поставленной задачей.
- Система управления сайтом. Отдельно стоит остановиться на структуре инструментов, предназначенных для добавления новых страниц, удаления и добавления новостей на сайт, внесения иных изменений. После создания сайта он будет управляться силами компании-заказчика, и интерфейс должен быть понятен её работникам;
- Требования к контенту. Нередко заказчики желают получить полностью наполненный сайт. На страницах должны быть тематические статьи, новости по теме, информация о новинках продукции фирмы и так далее. Кроме этого, должны присутствовать графические материалы, видеоролики, баннеры;
- Этапы выполнения работ, порядок сдачи-приёмки каждого из этапов. Весь процесс создания сайта должен быть разделён на несколько частей. Работа над каждой частью должна быть выполнена за определённый период времени и принята заказчиком.
Переделка уже принятого этапа неизбежно повлечёт за собой внесение изменений в последующие, что увеличит время работы над проектом и затраты исполнителя;
- Порядок передачи сайта. После завершения работ сайт может быть передан в дистрибутиве или размещён на хостинге. Подходящую форму стороны должны согласовать в техническом задании.
Как составить и образец
Сложно сформировать исчерпывающий шаблон технического задания для всех случаев. Каждый разработчик сайтов составляет собственное техническое задание, исходя из предыдущего опыта работы. Постепенно создаётся определённый алгоритм работы с заказчиками.
Каждый сотрудник компании, непосредственно занятый в работе над сайтом, должен составить перечень вопросов, которые должны быть заданы заказчику. Нужно спросить мнение дизайнера, программиста, специалиста по СЕО. Таким образом будет сформирован список важных моментов, требующих согласования с заказчиком.
Использовать объективные критерии оценки
Большинство заказчиков оперируют оценочными понятиями. Сайт должен быть красивым, удобным для пользователя, содержать исчерпывающий объём информации о компании – вот в таких категориях предстаёт первоначальное задание перед исполнителем.
Применение подобных терминов в техническом задании не позволит однозначно судить о том, справился с задачей исполнитель или нет. Поэтому работники компании-разработчика должны формализовать запросы клиента в чёткие требования, которые легко можно оценить третьему лицу при возникновении спора. Часто в техническом задании используются наброски шаблонов страниц, закрепляется цветовая палитра сайта.
Подробно описывать все элементы сайта
Даже страница с информацией о компании, содержащая юридический адрес, официальное наименование, контактные телефоны, может быть по-разному оформлена. Чем больше сведений будет собрано о каждом разделе, тем проще будет работать над сайтом и сдавать его заказчику.
Согласования
Согласовывать техническое задание следует только с одним человеком. Представитель заказчика должен быть уполномочен подписывать договоры от лица организации. В противном случае, может возникнуть проблемная ситуация, когда все детали были согласованы с одним сотрудником, а решение по утверждению технического задания принимает другой. И условия приходится обсуждать повторно.
Этапы задания проходят согласование с дизайнером, программистом и другими работниками. Если им что-то непонятно, то лучше это выяснить на раннем этапе и уточнить все вопросы.
Утверждение технического задания на разработку сайта направляет отношения исполнителя и заказчика цивилизованное русло. В ходе разработки документа проделывается масса подготовительной работы, что помогает упростить задачи, которые ставятся перед конкретными исполнителями.
Итак, техническое задание, сокращенно ТЗ, уже довольно давно служит для формального описания того, что мы собственно хотим видеть в конечном продукте. Не является исключением и ТЗ для разработки web-ресурса. По своей сути - это база для разработки сайта. В нем указываются все положения, прямо или косвенно касающиеся сайта.
ТЗ, как правило, прилагается к основному договору на работы по созданию web-ресурса, т. к. включает полный перечень всех работ для обязательного выполнения дабы исключить возможные споры между клиентом и исполнителем, которые как известно все-равно время от времени возникают.
Есть мнение некоторых “побитых” опытом людей, что ТЗ надо писать так, как будто с ним вы будете присутствовать на суде и использовать его в качестве защиты. Может это и крайность, но тем не менее - повод лишний раз задуматься о важности хорошо написанного и детализированного ТЗ .
По своему объему ТЗ может быть достаточно большим документом. Web-компании часто предлагают помощь по составлению ТЗ отдельной услугой, как правило 10-20% от стоимости всей разработки сайта.
Составление ТЗ как правило выполняют руководитель проекта или непосредственно программист при участии заказчика, который предоставляет основную информацию.
Чем детализированнее ТЗ
(в разумных пределах конечно), тем лучше для обеих сторон — как для клиента, так и для исполнителя работы. В выигрыше так сказать оба:
— клиент будет уверен, что все задуманное им в проекте четко прописано и должно быть реализовано в соответствии с ТЗ.
— исполнитель – застрахован от множества мелких или крупных корректировок и доработок, опять же опираясь на то самое ТЗ.
Существует мнение, что без ТЗ можно обойтись. Например, один из доводов — задача слишком творческая, что бы уложить ее в рамки ТЗ. Такое мнение, скорее всего, скрывает нехватку опыта и профессионализма в данной области. Считаю такое мнение ошибочным, так как почти все в сайтостроении можно формализовать и представить в ТЗ и составить его – это скорее дело опыта.
- Простая истина — чем сложнее проект, тем детализирование должно быть ТЗ.
- Среди возможных вариантов можно назвать ТЗ, описывающее главные страницы интерфейса со всей совокупностью элементов на ней и описанием их поведения. Или же это может быть лаконичное описание нескольких страниц для сайта-визитки и т.п.
- В ТЗ для программиста не должен упоминаться дизайн элементов или звучать пожелания по дизайну. Задание все-таки для программиста..
- Описания задач в отдельных частях ТЗ должны быть граничными. Что это значит? Нужно четко обозначать конец конкретного пункта задания. В ТЗ не должно быть абстрактных фраз типа «должна быть удобная навигация». Это все субъективные признаки – одним удобно, другим не удобно и понять выполнен ли данный пункт бывает сложно из-за нечеткости положений ТЗ. Т. е. это необходимо контролировать.
- Для несложных сайтов, где нужно описать какой-нибудь функциональный модуль, чтобы заново не изобретать велосипед, нужно проанализировать сайты с похожим функционалом, так сказать, провести анализ конкурентов; сохранить гиперссылки на страницы с требуемыми элементами интерфейса и функциями, и включить их в ТЗ с расширенными пояснениями о том, что именно делать. Также необходимо в обязательном порядке снять скриншоты с нужных страниц на случай, если сайт через время будет не доступен. При этом можно ставить свои пометки на изображениях (благо средств сейчас много для этого — Clip2net, Joxi, Awesome Screenshot и прочие).
- Если дизайна для страниц нету или он не так важен в рамках какого-то проекта, скажем, заказчик решил сэкономить на дизайне админ-панели сайта, в этом случае программист вполне может использовать прототипы.
Справка
Прототип — это графическая схема размещения элементов интерфейса. Грубо говоря, нарисованная в специальной программе страница со всеми элементами.
Существует много софта для прорисовки прототипов, включая как декстопные приложения, так и онлайн-сервисы, а также расширения для браузеров с более скромными возможностями. Софт как с бесплатной лицензией так и с платной.
Из популярных можно выделить:
— среди бесплатных: iPlotz, MockFlow, Mockup Builder, Cacoo;
— среди платных: Creately, ProtoShare, Adobe Fireworks,Axure . Возможностей в общем много - выбирай, осваивай, рисуй…
Общая структура ТЗ. От абстракции к конкретике
Одна из возможных структур сайта, подчеркну возможных, может выглядеть примерно так:
- Общая информация о сайте.
- Функциональное назначение сайта.
- Понятия и термины
- Описание модулей сайта
- Функциональные характеристики
- Описание страниц.
- Резервирование и надежность.
- Хостинг для сайта.
1. Общая информация о сайте
Здесь достаточно несколько предложений для того что бы ввести в курс дела, что за сайт или модуль будет разрабатываться и его цель в общем. Пишется вольным стилем.
2. Функциональное назначение сайта
Тут краткий перечень того, какими техническими средствами или инструментами должен обладать сайт, исходя из общей цели. Поясню на примере. Для сайта-визитки это может быть банально, форма обратной связи, перечень основных страниц, например с «о компании», «контакты» и прочие.
3. Понятия и термины
Этот раздел должен гарантировать понимание обеими сторонами специфических для данной предметной области понятий, которые важны для понимания и разработки сайта. Могут вводиться обеими сторонами.
4. Описание модулей сайта
Этот раздел включает список модулей, которые используются на сайте. Это вполне например может быть упоминаемая выше форма обратной связи (ФОС). Но, что очень важно — нельзя просто писать «Должна присутствовать ФОС». Каждая сущность требует определения своих атрибутов! В данном случае атрибуты могут быть такими:
- Поле «Ваш имя»;
- Поле «Ваш е-mail»;
- Поле «Ваш вопрос»;
- Поле ввода капчи для защиты от спам-роботов.
И все это должно быть четко прописано, что бы потом не возникло вопросов: «…а где перечень выбора категории вопроса? » или что-то в этом роде.
5. Функциональные характеристики
Сюда можно отнести, например, список браузеров, где сайт должен корректно отображаться и работать. Например, некоторые заказчики могут требовать, что бы их сайт работал корректно и в небезызвестном Internet Explorer 6, что бы не терять хоть и небольшую, но долю возможных посетителей.
Если планируется делать высоконагруженный сайт – это тоже нужно указывать. Высоконагруженный сайт требует другого подхода при разработке и по настройке сервера.
Также в функциональные характеристики входит наличие или отсутствие мобильной версии сайта, но это, как правило, либо уходит в отдельный раздел данного ТЗ либо вообще отдельно пишется.
6. Описание страниц сайта
Это довольно обширный пункт, где прорисовуются все страницы сайта и пишутся комментарии к их работе.
Также может приводиться общая структура страниц сайта. Так называемые «высокоуровневые» прототипы. Например, для простого сайта-каталога это может быть:
Для каждой конкретной страницы могут рисоваться прототипы с подробными комментариями по каждому из элементов интерфейса с их поведением.
Страницы, используемые для админ-панели обычно уазываются отдельно от спубличных страниц. Эти два раздела в свою очередь могут группироваться в свои отдельные подразделы. Здесь стоит следить, чтобы прототипы не конфликтовали с их описанием, и не возникало никаких противоречий. Примером прототипа определенной страницы сайта может быть:
Остальные страницы
Последние два раздела ТЗ мы не будет рассматривать детально, скажу вкратце, что одно из требований к надежности может включать настройку резервного копирования БД.
Требования к хостингу может включать доступную физическую память для сайта, пропускную способность канала, поддержку используемой базы данных и ряд других требований, предъявляемых для корректной работы сайта.
В конец ТЗ в обязательном порядке нужно внести информацию о том, что все работы, не описанные в настоящем ТЗ, выполняется по усмотрению программиста по очевидным причинам. Это наша «маленькая гарантия» от возможных доработок и переделок, выходящих за рамки ТЗ.
Выводы: Надо сказать, что такая структура разделов ТЗ не претендует на всю полноту (по крайней мере для больших стратегических проектов), но основные моменты все же охватывает.
Надо подчеркнуть, что всё вышеизложенное является только рекомендациями, основанными на опыте людей, работающих в сфере сайтостроения и никак не является жестким требованием, предъявляемым к написанию ТЗ.
Удачных Вам проектов и человеческого взаимопонимания!
Техническое задание важно и исполнителю, и клиенту. Исполнителю оно помогает лучше понять, что хочет заказчик, застраховаться от внезапных «хотелок» со стороны клиента, ускорить работу по выполнению задачи. Клиенту - рассказать точно о том, что он хочет, упростить контроль качества, получить точную стоимость услуги. Мы расскажем о том, как правильно составить ТЗ и что с ним потом делать.
Что такое техническое задание
Техническое задание - документ, в котором отражены все требования к будущему продукту. В нем описывают все технические требования. Обычно ТЗ составляют в виде текстового документа, редко - в других форматах.
ТЗ используют все разработчики сайтов. Верстальщикам, программистам, дизайнерам оно помогает лучше понять требования клиента и сделать ресурс, соответствующий его ожиданиям. Кроме того, ТЗ используют во всех других сферах, например - в:
- разработке приложений;
- проектировании дома;
- написании текстов и другие.
Если вы работаете по техническому заданию, риск споров и затяжных тяжб сведен к минимуму.
Как составить техническое задание: структура ТЗ на сайт
Прежде чем приступать к работе:
- Определитесь, кто будет составлять техническое задание
- Разъясните термины
- Откажитесь от субъективных терминов
На первый взгляд кажется, что ТЗ на сайт должен составлять клиент , потому что он заказывает ресурс и выдвигает требования к нему. На самом деле в процессе должны участвовать оба: клиент озвучивает требования, а исполнитель записывает их конкретно, точно и понятно. Например, клиент говорит, что хочет сайт, адаптированный под всех пользователей, а разработчик прописывает требования к адаптивности под 4 доступных размера - ПК, ноутбуки, планшеты, смартфоны.
Разъяснение терминов - очень важный момент . Все узкоспециализированные термины желательно объяснить в самом начале - клиенты не всегда знают, что такое подвал (футер), CMS, рыба. Чем проще и понятнее будут объяснения, тем понятнее будет ТЗ для обеих сторон.
Субъективные термины могут вызвать ненужные споры . Не пишите «дизайн должен быть красивым» - понятие красоты у всех разное. То же относится к качественным прилагательным «удобный», «легкий в использовании», «большой». Используйте конкретные цифры и параметры: например, опишите цветовую гамму или расположение элементов.
Структура технического задания может быть любой. В качестве примера мы предлагаем простую структуру ТЗ на сайт.
Опишите сайт
Расскажите, какой тип сайта нужен, кем он будет использоваться, для чего он вообще создается. Например, напишите, что вам нужен интернет-магазин, лендинг для продажи товара или сайт-визитка с 10 страницами. Укажите ориентировочное количество страниц, если не знаете точного числа.
Если у проекта есть конкретная целевая аудитория, опишите ее. Это поможет создать ресурс, который понравится клиентам - например, использовать подходящие выражения в статьях или дизайн, который нравится молодежи или представителям старшего поколения.
Расскажите о структуре
Без представления о структуре невозможно разработать нормальный сайт. Распишите, какие страницы будут на сайте, и покажите уровни их вложенности. Сделать это можно разными способами:
- Схемой
- Таблицей
- Списком
Главное, чтобы в итоге было понятно, какие страницы будут располагаться в меню, куда они будут вести, какая родительская страница у каждого раздела. Мы рекомендуем использовать блок-схемы - они проще и удобнее в восприятии, чем списки и таблицы, помогают за несколько секунд оценить всю структуру сайта.
Пример простейшей структуры в виде блок-схемы
Опишите, что будет на каждой из страниц
Расскажите, какими видите страницы сайта. Делать это желательно в формате прототипа, чтобы наглядно продемонстрировать расположение каждого элемента. Можно описать требования и списком, например - рассказать, что будет в шапке сайта, где расположена форма обратной связи, что будет в свободной боковой колонке.
Если все страницы сайта примерно схожи - например, вы планируете создать сайт-визитку, можно обойтись двумя прототипами: для главной страницы и остальных разделов. Если есть несколько групп схожих страниц - например, разделы в каталоге интернет-магазина, блог со статьями и описание услуг по доставке/сборке/установке, лучше сделать свой прототип для каждой группы.
Пример прототипа главной страницы сайта: все просто, удобно, понятно
Выдвините требования к дизайну
Если есть разработанный макет, отлично - можно просто вставить его в техзадание. Если нет - нужно расписать требования к цветовой гамме, используемым изображениям, логотипам. Например:
- Укажите, какие корпоративные цвета можно использовать в дизайне, а какие оттенки - категорически нет
- Предоставьте логотип, который обязательно должен присутствовать в шапке сайта
- Укажите шрифты, которые желательно использовать для оформления страниц, меню, футера, контента
Если четких требований нет - то есть клиент сам не может сформулировать свое видение сайта, можно предложить ему несколько типовых макетов на выбор или разработать макет индивидуально, а затем - согласовать. Делать это нужно до утверждения ТЗ, иначе разница во вкусах может существенно затянуть проект.
Опишите требования к инструментам, коду, хостингу, домену
Это нужно, чтобы заранее знать, с какими инструментами можно работать, а с какими - нет. Опишите отдельным блоком:
- На какой должен находиться сайт - Вордпресс, Джумла, Модэкс и так далее
- Какой язык программирования можно использовать - PHP, JavaScript, HTML, другие
- На каком хостинге и в какой доменной зоне должен располагаться сайт, какое доменное имя можно использовать
- Какую программную платформу можно использовать - .NET, OpenGL, DirectX
- И так далее
Если клиент не понимает ничего в используемых терминах - объясните, чем отличается Вордпресс от Модэкса, PHP от HTML, домен в зоне.ru от домена в зоне.com. Вместе составьте требования так, чтобы они устроили клиента.
Уточните требования к работе сайта
По умолчанию сайт должен работать у пользователей всех устройств, в разных браузерах, выдерживать хакерские атаки и не ложиться при одновременном посещении 1000 пользователями. Но лучше прописать это отдельным блоком. Укажите:
- Приемлемую для вас скорость загрузки сайтов или стандартное значение - 1–5 секунд
- Кроссбраузерность - распишите, в каких браузерах сайт должен открываться
- Адаптивность - укажите размеры экранов, под которые должен подстраиваться дизайн, и используемые устройства
- Устойчивость к нагрузкам - сколько человек должно находиться на сайте одновременно, чтобы он не «лег»
- Устойчивость к хакерским и dDos-атакам: сайт должен выдержать небольшие атаки
Распишите сценарии работы сайта
Опишите, как пользователь должен взаимодействовать с сайтом, и какие действия на ресурсе должны происходить в ответ. Сделать это можно в форме простого нумерованного списка либо разветвленным алгоритмом, если у пользователей будет выбор между действиями. Если интерактивных сервисов много, распишите сценарий для каждого из них.
Пример простейшего сценария работы сайта
Уточните, кто занимается контентом.
Какие-то разработчики сами пишут тексты, кто-то заказывает их у копирайтеров, кто-то использует рыбу. Сразу уточните, входит ли предоставление контента в услугу разработки. Если да, можно сразу прописать дополнительные требования, например, к:
- - не меньше 95% по Адвего, Текст.ру, Контент.Вотч
- Тошноте (заспамленности)- не более 10% по Адвего иди 65% по Текст.ру
- Баллам по Главреду - не менее 6,5 или 7 баллов
Конечно, разные сервисы - не панацея, но они минимизируют риск того, что он будет «водянистым» или переспамленным. Кроме того, так появляются точные критерии оценки качества текстов.
Укажите сроки
Об этом часто забывают. В большинстве технических заданий должны быть прописаны сроки, иначе разработка может затянуться на несколько месяцев, полугодий, лет. Не используйте некорректные формулировки - например, «через месяц». Пишите точную дату: 1 декабря 2018 года, например.
Лайфхак: техническое задание лучше оформлять как приложение к договору о сотрудничестве. Так вы закрепляете все требования к разработке сайта, и в случае споров сможете выиграть дело в суде.
Запомните: в каждом ТЗ должны быть несколько основных блоков:
- Цели и задачи - о том, для чего вообще вы создали ТЗ, что хотите сделать с продуктом
- Каким должен быть продукт - описание в общих чертах
- Технические требования - площадь дома, объем текста, функционал приложения и так далее
- Сроки - они важны, чтобы исключить споры.
Пример составления ТЗ на программное обеспечение
Нужно создать ПО. Технические требования - ниже.
Описание : программа для поиска статей по ключевому слову на всех авторитетных сайтах, адреса авторитетных сайтов прописывать нужно вручную.
Что должно делать ПО: после ввода ключевого слова находит статьи на сайтах, которые внесены заранее в качестве авторитетных источников, выводит список совпадений в таком формате:
- Линк
- Название статьи
- Лид-абзац
Если больше 10 совпадений, нужно разделить на страницы - по 10 на каждой.
Технические требования: язык программирования - любой, не принципиально. Главное, чтобы программу потом можно было доработать и вывести в качестве онлайн-сервиса. В идеале сервис должен искать за 10 секунд.
Сроки : до 15.09.2018.
Естественно, это ТЗ можно улучшить - мы предоставили его в качестве примера. А как вы считаете, как можно доработать техническое задание, чтобы оно стало еще понятнее, проще, удобнее?