В блог

Техническое задание на разработку сайта: как правильно составить и оформить

01.06.2022
  • Инсайты
  • Советуем
  • 164 просмотра
  • 19 минут

Вступление

Что нужно писать в техзадании? Кто и зачем должен этим заниматься? Специалисты DIART AGENCY делятся полезными инструкциями и рекомендациями, которые помогут разработать техническое задание на разработку сайта правильно. 

Для чего нужно техническое задание

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

Преимущества ТЗ для заказчика

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

Преимущества ТЗ для исполнителя

Исполнитель, проект-менеджер digital-агентства или разработчик-фрилансер, также заинтересован в составлении подробного вдумчивого техзадания по ряду причин. К ним относятся: 
  • Способ ясно обозначить задачу. Быстро и без проблем разработать нужный ресурс поможет описание всех значимых для заказчика деталей. 
  • Возможность «блеснуть». Классное ТЗ наглядно продемонстрирует экспертность исполнителя. 
  • Защита проделанной работы (и гарантия оплаты). Представьте ситуацию: подрядчик берет в работу крупный проект, разрабатывает сложный веб-ресурс, погружается в тематику, тратит свое время…и представляет готовый сайт заказчику. Но заказчик недоволен! Он утверждает, что хотел CMS на Java, а не на PHP.  Что делать? Обратиться к ТЗ. Если тот или иной нюанс не был прописан в документе, то клиент не может требовать его выполнения.
  • Способ заработать. ТЗ – это первый важный шаг при создании сайта. На этом документе базируется техническое и смысловое содержание ресурса. А потому нередко агентства и фрилансеры расценивают составление техзадания, как отдельно оплачиваемую услугу. 
Особенно большое значение техзадание имеет при создании крупных веб-ресурсов со сложной структурой. Не поленитесь и сделайте ТЗ качественно…или делегируйте задачу специалистам DIART AGENCY. Мы на разработке сайтов собаку съели, а потому зададим все нужные вопросы и уточним важные детали быстро и прицельно точно. В результате вы получите подробный профессионально выполненный документ для создания 100% эффективного ресурса. Поверьте, это сэкономит ваше бесценное время и нервы. 

Кто составляет техническое задание

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

Бриф на разработку сайта

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

Структура и объем технического задания

Каждое ТЗ состоит из двух основных смысловых разделов: организационной и технической частей.

Организационная часть: общая информация о проекте

Для всех специалистов, которые будут работать над разработкой сайта, в ТЗ нужно добавить вводную информацию о проекте:
  • Общие сведения о компании и целях создаваемого сайта.
  • Подробное описание ЦА сайта, ее интересов и «болей».
  • Описание объема работ. Важно, чтобы каждый специалист, работающий над проектом, видел «картину» в целом. Разработка простого сайта-визитки и создание интернет-магазина с поддержкой всех необходимых сторонних сервисов – это разные вещи. 
  • Информация об особенностях будущего сайта, деталях, на которые нужно обратить особое внимание. 
  • Сроки выполнения работы. 
Разработка сайта на шаблоне занимает примерно от 2 до 4 недель. На реализацию сложных проектов, включающих создание уникального дизайна и/или внедрение сложного функционала, потребуется от 1 месяца и более. 

Техническая часть: требования к сайту

К важным техническим аспектам проекта, описать которые необходимо в техзадании относятся: 
  • Система управления контентом сайта (CMS). Выбор «движка» – один из первых важных выборов, с которыми предстоит столкнуться при разработке веб-ресурса. «Движок» может быть коммерческим (как 1C-Битрикс),  бесплатным (как WordPress, Joomla, OpenCart) или самописным, то есть создаваемым разработчиком с нуля по требованию заказчика. 
  • Кроссбраузерность. Важно указать, на каких версиях популярных браузеров должен работать будущий сайт. 
  • Адаптивность. На каких устройствах будет чаще всего использоваться сайт? Нужна ли ему мобильная версия? Эту информацию также необходимо добавить в ТЗ.
Каждый из вышеуказанных пунктов критичен для будущего сайта и значительно влияет на объем и характер работы, которые необходимо выполнить в ходе разработки. 

Структура сайта

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

1. Сквозные элементы

Сквозными структурными элементами называют те элементы, которые демонстрируются на всех страницах сайта. К ним относятся: 
  • Хедер (header, шапка сайта) — отдельный информационный блок, располагающийся вверху на каждой странице сайта. В хедере содержатся название и логотип компании, элементы навигации по сайту (меню), контакты, корзина (если речь об интернет-магазине), кнопка «вход/выход» (если на сайт добавлена возможность регистрации). 
  • Футер (footer, подвал сайта) — нижний информационный блок с полезной, но не первостепенно важной информацией. В футер обычно выносятся ссылки на социальные сети компании, полные контактные данные, навигационное меню.
  • Сайдбар (sidebar) — закрепленная боковая панель сайта, которая размещается справа или слева от основного контента и улучшает показатели юзабилити ресурса. Размещенная в сайдбаре информация упрощает навигацию, а также может содержать анонсы или комментарии, рекламу. 
  • Всплывающие окна, попапы (pop-up) — элемент интерфейса, появляющийся поверх основного контента на странице в ответ на определенное действие пользователя. В попап может быть добавлена форма подписки на рассылку, заполнения заявки, заказа звонка. 
В ТЗ нужно добавить как можно более подробное описание вышеуказанных элементов.

2. Уникальные страницы

Объем работы дизайнера и разработчика, а также время, необходимое на проведение работ, напрямую зависят от числа уникальных страниц ресурса. Поэтому каждую страницу, имеющую оригинальную структуру и дизайн, нужно подробно описать. 
Уникальная страница это своего рода шаблон, по которому будут создаваться страницы с аналогичной структурой.
Уникальными могут быть страницы самых разных типов. Из описания могут быть примерно такими: 
  • Страница статьи в блоге. Содержит сквозные элементы в виде хедера и футера, а также дополнительные блоки: фотографию-обложку с размещенным на ней заголовком статьи, дату публикации, время чтения, текст статьи с подзаголовками и фотографиями, форму обратной связи, ссылки на другие статьи. 
  • Страница «О компании». Содержит сквозные элементы в виде хедера и футера, а также дополнительные блоки: фотографию-обложку с размещенным на ней заголовком страницы, текст страницы с подзаголовками, фотографиями, графическими элементами, крупная карта с контактными данными. 
Каждую уникальную страницу нужно описать максимально подробно и добавить к описанию все имеющиеся вспомогательные файлы. 

3. Прочие страницы

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

Рекомендации для составления ТЗ

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

Пишите однозначно и точно

При описании задачи важно избегать качественных прилагательных, таких как «красивый», «удобный», «надежный», «понятный», «современный», «классный». Такие определения не однозначны: то, что одному кажется красивым и удобным, другой может оценить иначе. А потому чем более конкретными будут требования в ТЗ, тем лучше. Вот несколько не самых удачных формулировок: 
  • «Сайт должен быть удобным». Удобным для кого? По каким критериям будет оцениваться его удобство?
  • «Сайт должен содержать экспертный контент». Что делает контент экспертным? Кому он должен таковым показаться? 
  • «Сайт должен выдерживать большие нагрузки». То есть какие? Сотню или тысячу пользователей запросов пользователей одновременно? А может гораздо больше? 
Используемые в ТЗ формулировки должны быть точными и четкими, лучше всего – имеющими цифровое значение. 

Укажите общую информацию

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

Поясните сложные термины

Техзадание должно быть одинаково понятно и клиенту, и исполнителю. Поэтому важно, чтобы заказчик пояснил все специфические узкопрофессиональные термины, которые могут быть неизвестны подрядчику. В свою очередь, подрядчик должен разъяснить термины, которых может не знать клиент (такие как хедер и футер, контент, CMS и т.д.) 

Опишите инструменты и требования к хостингу

Зафиксируйте в ТЗ, на каком «движке» будет работать будущий сайт и какой функционал необходимо внедрить в ходе разработки.

Перечислите требования к работе сайта

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

Укажите структуру сайта

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

Объясните, что будет на каждой странице

Какие элементы будут на каждой странице сайта? Для чего? Зафиксируйте информацию по наполнению каждой страницы, сделав это одним из двух способов:
  • Способ 1. Прототип. Создание прототипа — наиболее наглядный способ демонстрации интерфейса будущего сайта.
  • Способ 2. Перечисление. Перечисление — менее энергозатратный способ, подразумевающий простое перечисление запланированных элементов.

Распишите сценарии использования сайта

В том случае, если предстоит разработка нестандартного интерфейса, помимо прототипов (или подробного перечисления элементов страниц) к ТЗ необходимо добавить пользовательские сценарии. Они понадобятся для того, чтобы составить удобную карту пути пользователя (CJM), просчитав все возможные варианты поведения посетителей.  Приведем для примера сценарий авторизации в типичном интернет-магазине (OZON, Wildberries и т.п.): 
  • пользователь нажимает на кнопку «Войти» — сайт открывает форму входа/регистрации →
  • пользователь вводит номер телефона/e-mail и получает код для входа — сайт открывает форму ввода кода для подтверждения учетной записи →
  • пользователь вводит полученный код — сайт открывает версию сайта для авторизованного пользователя. 
Если в разработке лендинг или простой сайт-визитка, то прописывать пользовательские сценарии необязательно.

Определите, кто отвечает за контент

Ведь как выглядит сайт без контента? Как рама без картины.  Поэтому заранее подумайте о том, кто будет поставлять контент: наполнять сайт текстами, фото- и видеоматериалами. Варианты работы по созданию контента:
  • контент предоставляется исполнителем и включен в стоимость сайта;
  • контент предоставляется исполнителем и оплачивается заказчиком отдельно;
  • контент предоставляется заказчиком. 
В ТЗ важно прописать объективные оценки качества контента (например, уникальность текста в процентах). При этом стоит отказаться описательных качественных характеристик – «интересный», «привлекательный» и тому подобные. 

Опишите дизайн (если сможете)

Сложно описать дизайн объективно. Но кое-что указать все-таки можно: 
  • предпочтительная цветовая гамма; 
  • шрифты (или их общие характеристики);
  • пожелания к дизайну конкретных элементов сайта.
Если у заказчика есть брендбук, то нужно приложить его к техзаданию.

Лайфхаки по составлению ТЗ

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

Где взять сайты-образцы

На просторах интернета можно найти множество сайтов-образцов для вдохновения. Особо обратить внимание стоит на креативную медиа-платформу Behance, сайт конкурса профессиональных веб-дизайнеров и разработчиков Awwwards и собирающий лучшие сайты мира ресурс All Awards

Как определить цветовую гамму

Не знаете, как выбрать цвета для сайта? Попробуйте поискать в интернете палитры хорошо сочетающихся оттенков, просто вбив в поисковую строку «подборки цветов». Или воспользуйтесь сервисами для создания цветовых схем: Adobe Color CC, Colormind, Coolors и тому подобными.

Как подобрать шрифты для сайта

С шрифтами важно не прогадать, ведь от них зависит то, насколько читабельным будет контент на сайте. Прежде всего, внимание стоит обратить на четкие шрифты без засечек. А для подбора более необычных вариантов можно воспользоваться онлайн-инструментами:  В интернете легко найти альтернативу вышеуказанным сервисам. Найдите ту, что подойдет именно вам!

Есть ли специальные требования для написания ТЗ

Нет «высеченных на камне» правил написания техзадания на разработку сайта. Главное, создать документ, который точно отразит пожелания клиента и ясно обрисует задачу для исполнителя.

Ошибки при написании ТЗ

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

Нет ограничений во времени

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

Отсутствие наглядности

Важно, чтобы заказчик предоставил исполнителю референсы. Наглядные примеры значительно упрощают понимание задачи.

Утрата данных доступа

Важно отнестись к данным доступа серьезно. Получив все нужные логины и пароли (к примеру, для входа на хостер или DNS-регистратор) от разработчика, следует аккуратно приложить их к ТЗ и не потерять впоследствии. 

Качественные прилагательные

В ТЗ следует избегать пространных пожеланий, которые можно интерпретировать двояко. Согласитесь, что у каждого человека весьма субъективные представления о том, что такое «красивый» сайт.

«На усмотрение разработчика»

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

Не прописана цель создания сайта

Нужно сразу определить, какие ключевые (читай, продающие) действия ожидаются от пользователя. В дальнейшем это значительно упростит настройку сквозной аналитики проекта.

Не учтена семантика

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

Нет пользовательских сценариев

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

Пример-образец технического задания

Заключение

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

Популярное

Все статьи

Подпишитесь на нашу рассылку

Нажимая на кнопку, вы даете согласие
на обработку персональных данных

Смотрите
наши проекты

Все проекты