Бесплатный фрагмент - Техническое задание на сайт

Введение

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

Я занимаюсь разработкой сайтов более 15 лет и в каждом проекте сталкиваюсь с тем, что техническое задание вызывает проблемы со стороны клиента. В первую очередь это непонимание поставленной задачи, незнание терминов, сложность проведения анализа конкурентов и т. д.

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

Чем грозит безграмотное ТЗ

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

Иногда клиенты, не понимая вопросов в ТЗ, стараются избежать прямого ответа и заполняют ТЗ, используя обтекаемые, неконкретные формулировки. Например, «нужен красивый современный сайт». Это так же приводит к недопониманию и пустой трате времени и средств клиента.

Без ТЗ есть шанс получить:

— Не тот внешний вид сайта, что задуман заказчиком. Дизайн в другом стиле, не соответствующий общему фирменному стилю.

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

— Подключение не тех модулей, что нужны. Отсутствие необходимых блоков и модулей на первой странице.

— Невозможность исполнить те задачи, что поставлены перед сайтом.

— Потеря времени и нервов.

— Дополнительные траты денег на переделки.

Цена составления ТЗ

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

Цена услуги 66 000 руб. — немного кусается для небольшого проекта. Поэтому многие клиенты пытаются сами разобраться и составить ТЗ, в результате чего делают массу ошибок и между ними и разработчикам происходит недопонимание.

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

К сожалению, это обычная ситуация в сфере разработки сайтов, когда нет ТЗ или оно составлено безграмотно. Посмотрите рис. 2, что бывает при отсутствии четкого ТЗ.

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

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

Кто должен делать ТЗ на сайт

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

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

Так почему так же не подойти к разработке сайта? Узнать азы, какие бывают виды сайтов, что такое хостинг, чем отличается конструктор сайтов от движка, какие задачи могут выполнять продающие сайты — и т. д. Только так, узнав основные моменты о сайтах, можно точно понять, что именно вам нужно, в какой срок и за какую цену вы получите нужный вариант. Ведь стоимость некоторых сайтов иногда доходит до стоимости автомобиля! Стоит уделить некоторое время новым знаниям и разобраться с тем, как правильно заполнить ТЗ, чтобы получить сайт, соответствующий своим запросам.

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

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

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

Кому будет полезна эта инструкция

Разработчикам сайтов.

Веб-дизайнерам.

Верстальщикам сайтов, программистам.

Менеджерам проектов.

Руководителям диджитал-студий.

Заказчикам, предпринимателям, которые заказывают разработку сайта.

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

Глава 1. Что такое техническое задание

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

ТЗ отвечает на ключевые вопросы о проекте:

— что делаем,

— зачем,

— для кого предназначен сайт,

— как будет происходить монетизация,

— как реализовать поставленные задачи.

Составляется ТЗ в том формате, который удобен для клиента и для специалистов, которые будут работать над сайтом. Например, в формате MS Word + прототип сайта в Jpg. См. рис. 3.

Зачем нужно техническое задание на создание сайта

Сайты делаются не за один день, иногда на это уходит от нескольких недель до нескольких месяцев (есть и сложные проекты, которые делаются 6—12 месяцев). За это время может случиться все что угодно, например:

— Может поменяться ответственное лицо со стороны заказчика (менеджер проекта). При появлении нового ответственного сотрудника потребуется понимание всех деталей проекта.

— Клиенту может понадобиться перерыв в работе над сайтом или изменение первоначального ТЗ.

— Могут поменяться тренды и технические требования к разработке сайта.

— Могут возникнуть изменения в структуре сайта, дополнения по материалам.

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

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

Важность технического задания

Техническое задание играет важную роль на всех этапах разработки. Оно позволяет:

Уяснить цели проекта: заказчики могут предоставить разработчикам чёткое понимание своих ожиданий и целей.

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

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

Обосновать финансовые затраты: наличие ТЗ позволяет более точно рассчитать бюджет проекта и обосновать стоимость услуг.

Направить рабочий процесс в нужное русло: ТЗ улучшает планирование и распределение задач среди команды разработчиков.

Считается, что ТЗ на сайт необходимо разработчикам сайта, но по факту это не так, в нем есть потребность и у заказчика.

Польза ТЗ для клиента:

1. После составления ТЗ клиент четко понимает срок и стоимость своего проекта.

2. Клиент видит и утверждает законченную структуру сайта и прототип первой страницы.

3. По ТЗ клиент может оценить компетентность разработчиков — грамотно составленное ТЗ сразу видно.

4. Заказчик собирает все свои пожелания в одном документе, что очень удобно.

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

6. Наличие ТЗ позволяет обосновать претензии при некачественно выполненной работе.

7. Ускоряет и упрощает замену исполнителя, если заказчик решит поменять команду разработчиков.

8. ТЗ дает клиенту понимание, какие материалы (фото, видео, тексты, инфографика) необходимо подготовить для сайта и в какой срок.

9. ТЗ показывает, чего недостает для разработки сайта, например, отсутствие логотипа или слогана.

10. Техзадание не позволяет разработчику включить в проект дополнительную платную работу.

11. Техзадание поможет контролировать не только все работы, но и соблюдение сроков каждого этапа.

Польза для разработчика:

1. ТЗ помогает правильно понять, чего хочет заказчик, обговорить все детали и правильно поставить задачи.

2. ТЗ содержит перечень и этапы всех работ, что не позволит клиенту навязать дополнительную неоплаченную работу.

3. Организует исполнителя выполнять работу в срок, обязует клиента вовремя оплатить работу.

4. Через грамотное ТЗ исполнитель может показать свою компетентность и высокую квалификацию.

5. Составление ТЗ может стать дополнительное услугой и принести деньги специалисту.

6. Защищает исполнителя от неоправданных претензий клиента, навязывания дополнительной работы и т. д.

7. ТЗ помогает разработать структуру сайта и тем самым ускорить процесс создания интернет-проекта.

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

9. Сокращают время на объяснение терминов, используемых при работе над сайтом.

Термины, используемые в ТЗ на сайте

CRM (Customer Relationship Management) — это система для управления взаимоотношениями с клиентами.

Html — язык гипреразметки текста и фото на сайте.

PHP — язык программирования сайтов.

RGB — это цветовая модель для экрана.

Автоворонка — страничка захвата контактов (форма обратной связи с бонусом при регистрации).

Адаптивная верстка сайта — вариант перегруппировки порядка блоков страниц сайта на различных мобильных устройствах и при разных разрешениях экрана. Пришла на смену отдельной мобильной версии.

Анализ конкурентов — анализ сайтов конкурентов с целью выявления полезных модулей для создания структуры и дизайна сайта заказчика.

Блог (сайт-блог) — веб-сайт, основное содержимое которого — добавляемые пользователем записи (посты), содержащие текст, изображения или мультимедиа с возможностью комментировать.

Веб-баннер — рекламное изображение (может быть с анимацией), имеющее ссылку на сайт.

Веб-дизайнер — специалист по компьютерной графике, создатель дизайна страниц сайта.

Веб-разработка — процесс создания дизайна сайта, программирования и верстки страниц сайта, реализация его в сети Интернет.

Верстальщик — это специалист в области веб-разработки, который превращает дизайн-макет в интерактивную страницу.

Главная страница сайта — «лицо» сайта, первая и основная страница веб-ресурса.

Движок сайта (см. CMS)

Домен (доменное имя) сайта — это адрес сайта в сети Интернет, уникальное название, привязанное к конкретному сайту, которое пользователи вводят в адресную строку браузера, чтобы выполнить переход на этот сайт, например www.site.ru.

Интернет-магазин — сайт с каталогом товаров, корзиной и привязанной системой оплат.

Квиз — опросник на сайте с бонусом, либо отдельный сайт-опросник.

Корпоративный сайт — многостраничный сайт фирмы или компании.

Контент сайта — текст, изображение, анимация и видео на сайте.

Лид — это пользователь, который заинтересовался конкретным товаром или услугой и выполнил целевое действие. Например, оформил заявку, заказал звонок от менеджера или указал контакты в форме обратной связи, но еще не совершил покупку или заказ услуги.

Линк — ссылка на сайте. Перелинковка — взаимные ссылки с одной страницы на другую.

Материалы на сайт — это тексты, названия рубрик или категорий, фотографии, видео, веб-баннеры, иконки, логотип, инофграфика, схемы, пдф-файлы, архивы для скачивания и т. д. Иными словами все, что будет на сайте. Обычно предоставляется заказчиком в электронном виде. Тексты, написанные на бумаге от руки или распечатанные на принтере, в работу обычно не принимаются.

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

Мобильная версия сайта — версия сайта для мобильных устройств.

Новостной портал — сайт с новостями.

Новостная лента — лента новостей на сайте.

Одностраничник — лэндинг, сайт, состоящий из одной страницы.

Пагинация — это способ разбиения большого объёма информации на отдельные страницы для удобства восприятия пользователем, в конце страницы вы можете увидеть «Далее» или 1… 2… 3… (переход на следующие страницы) — это и есть пагинация. Виды пагинации: нумерованная, буквенная, диапазонная, гибридная.

Подвал (футер) — блок сайта, который отображается внизу каждой страницы сайта.

Программист сайта — специалист, который занимается созданием и поддержкой сайтов и веб-приложений, он работает с кодом сайта, тегами.

Продвижение сайта (Яндекс. Директ) — реклама сайта (контекстная) через сервис Яндекс. Директ, основана на рекламных объявлениях, созданных по ключевым словам.

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

Разделы сайта — крупные блоки информации, посвящённые определённым темам, как правило, представляют собой отдельные страницы или категории (например, рубрики на блоге или категории товаров в интернет-магазине).

Сайт, веб-сайт (от англ. website: web — «паутина, сеть» и site — дословно — «место, сегмент, часть в сети») — одна или несколько логически связанных между собой веб-страниц, которые представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователями как единое целое.

Сайт-визитка — небольшой сайт с минимальным количеством страниц (или одностраничный) с необходимой информацией о фирме. В отличие от корпоративного сайта такой сайт не располагает разветвленной структурой и большим количеством страниц.

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

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

CMS — это система управления сайтом, например WordPress. Через нее можно добавлять и редактировать контент сайта без специальных знаний.

СЕО-продвижение сайта — ряд мер по продвижению сайта в поисковых системах, основанный на ключевых словах и обмене ссылками.

Сопровождение сайта — ряд мер по поддержке сайта, работы, выполняемые в течении месяца по обновлению, наполнению и улучшению сайта.

Структура сайта — организация (схема) разделов, подразделов и страниц сайта, определяющая, как пользователи и поисковые системы находят, воспринимают и перемещаются по информации на сайте. Обычно структура включает в себя страницы: Главная, О компании, Преимущества, Каталог товаров, Услуги, Контакты, Подвал. Для каждого сайта будет своя, индивидуальная структура. Есть внешняя структура: расположение модулей на первой странице (она же прототип сайта) и внутренняя — это список всех страниц сайта, выраженный на схеме со всеми взаимосвязями страниц.

Форма заявки — форма обратной связи на сайте, через которую можно подать заявку, задать вопрос, отправить файл, подтвердить участие в мероприятии, заказать услугу.

Форум — онлайн-платформа для дискуссий, обмена мнениями и знаниями между пользователями, объединёнными общими интересами или целями.

Функционал сайта — это совокупность всех возможностей и инструментов, доступных на веб-сайте для пользователей.

Хлебные крошки — система навигации на сайте, навигационная цепочка ссылок, например: «Главная — Каталог — Обувь — Детская обувь для мальчиков».

Хостинг сайта — площадка для расположения файлов сайта в сети Интернет со специальным ПО, платная услуга.

Электронная система оплат (или электронная платёжная система) — это система расчётов между финансовыми организациями, бизнес-организациями и интернет-пользователями при покупке-продаже товаров и услуг через Интернет. Например, Робокасса. Позволяет совершать платежи различными электронными способами, через карту, через электронные деньги и т. д. Обычно такая система берет проценты с продавца за ее использование и предоставляет пользователи услуги Интернет-эквайринга. Процент зависит от способа оплаты.

Яндекс. Метрика — счетчик и система анализа посещаемости от Яндекса.

Посмотрите на рис. 4, скриншот первой страницы ТЗ, присланного клиентом в студию разработки сайтов.

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

Этапы подготовки технического задания

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

Исследование проекта, анализ темы

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

Помогает разобраться в определённой теме:

— рекламная продукция заказчика,

— информация на сайтах-конкурентов,

— прочтение статей в СМИ на эту тему,

— изучение материалов энциклопедий и справочников на заданную тему,

— прочтение форумов и пабликов, публикующих статьи в этой сфере,

— опрос специалистов, работающих в фирме заказчика.

Обсуждение со специалистами

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

Формирование структуры ТЗ

На основе собранной информации сформируйте структуру технического задания. Это позволит лучше организовать мысли и упростить процесс написания. За основу можно взять ТЗ из главы 2 и пример ТЗ из главы 7 и дополнить своей информацией.

Написание ТЗ

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

Проверка ТЗ и его утверждение

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

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

Глава 2. Структура технического задания

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

Рассмотрим основные разделы, которые обязательно должны быть включены в ТЗ.

Контакты, содержание, термины

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

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

Содержание

Для большого и обстоятельного ТЗ делается подробное содержание всех его разделов с указанием страниц. Это помогает легче ориентироваться в документе. См. рис. 7.

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

Сфера деятельности

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

Обязательно укажите ваших основных конкурентов и их сайты. Можно еще указать партнеров (на сайте обычно делается модуль «Партнеры» с указанием логотипов и ссылок на сайты партнеров).

Предоставьте фотографии офиса или склада, руководителей компаний или сотрудников.

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

Здесь так же возможно описать концепцию бизнеса (ее лицо, образ), подробнее о концепции сайта смотрите главу 4, раздел «Концепция сайта». Если это сайт коуча или отдельного специалиста, то предоставьте информацию о нем (историю, достижения, особенности личности, имиджевые фото и т.д.).

Целевая аудитория

В ТЗ надо прописать ЦА (целевую аудиторию), это те, кто будут основными пользователями сайта. И надо сегментировать ЦА: разбить на группы и прописать портреты каждой группы. У разных сегментов целевой аудитории могут быть разные потребности, разный уровень платежеспособности и т. д. Знание своей аудитории поможет лучше адаптировать функционал и внешний вид сайта к её потребностям.

Создайте портрет целевого потребителя:

— Возраст, пол, география.

— Образ жизни и интересы.

— Боль, проблемы, варианты решения проблем.

— Трудности, с которыми сталкиваются пользователи при заказе товаров или услуг.

— Платёжеспособность.

— Конверсионный путь (как клиент находит нужную услугу или товар).

Пример портрета целевого потребителя (для курса по дизайну):

Женщины 18—30 лет, интересующиеся обучением дизайну рекламы. Как правило это студенты или молодые специалисты, недавно закончившие ВУЗ, либо матери в декрете, желающие обучиться новой профессии. Платёжеспособность средняя, ищут эти услуги на Авито и в сети Интернет по запросу «обучение дизайну».

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

Цели проекта

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

Возможные цели сайта:

Коммерческие:

Продажа товаров в интернет-магазине.

Быстрая продажа одного товара на лэндинге.

Заказ услуг на корпоративном сайте.

Формирование имиджа фирмы, рассказ о ценностях компании, описание особенностей товаров и т. д.

Повышение узнаваемости бренда.

Организация онлайн-представительства для того бизнеса, который уже существуют офф-лайн.

Сбор контактной информации (базы потенциальных клиентов).

Поддержка коммуникации с клиентами через сайт.

Оптимизация процессов продаж и повышение конверсий.

Автоматизация задач, например, обработка онлайн-платежей, управление взаимодействием с клиентами и т. д.

Некоммерческие цели:

Информирование о деятельности компании.

Популяризация новых продуктов или услуг (без продаж).

Блог для привлечения активной аудитории и превращение ее в сообщество единомышленников.

Продвижение идей или имиджа.

Повышение видимости и доступности информации о миссии, целях, проектах и достижениях организации.

Расширение круга потенциальных партнёров и спонсоров.

Увеличение числа волонтёров и активистов, поиск сотрудников.

Сбор финансовых средств — веб-сайт позволяет организации проводить сбор средств онлайн, например, через кнопки «Donate» или специальные платформы для сбора средств.

Обратная связь и коммуникация с аудиторией. Получение отзывов о работе фирмы или ее сотрудниках.

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

Примеры целей и задач

В ТЗ обязательно нужно прописать конкретную цель сайта, можно разбить ее на отдельные задачи.

Например сайт психолога ставит цель: продажа консультаций, тогда будут такие задачи:

— задача номер один: собрать посетителей на онлайн-вебинар и продать им курс обучения,

— задача номер два: записать клиентов на личные консультации психолога,

— цель номер три: продвинуть имидж психолога,

— задача номер четыре: продать книгу психолога.

Ключевые вопросы для клиента для понимания целей сайта:

— Какую задачу решает сайт? Например: увеличение продаж товаров, привлечение новых клиентов, создание имиджа, информирование клиентов и т. д.

— Кто будет пользоваться сайтом? Это поможет адаптировать интерфейс и функционал под нужды целевой аудитории.

— Каких результатов ждете от сайта? Рост продаж, увеличение трафика, улучшение вовлечённости пользователей и т. д. Каждый результат требует определённых решений.

— Будет ли обновление сайта? Часто заказчик недооценивает, что сайту потребуется регулярное обновление контента и техническое сопровождение.

Виды целей:

Бизнес-цель: увеличить количество продаж через сайт.

Имиджевая цель: создать сайт, отражающую ценности и миссию компании, продвигать имидж компании или персоны.

Маркетинговая цель: привлечь новую целевую аудиторию через полезный контент.

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

Примеры постановки задач для сайта

Корпоративный сайт

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

Интернет-магазин

Создать каталог товаров, на витрину вывести новинки и ТОП товаров, обеспечить возможность покупки товаров онлайн с удобным процессом оформления заказа, с простой корзиной и онлайн оформлением доставки. Планируется продвижение по СЕО и Яндекс. Директ.

Личный сайт эксперта

Запустить блог на ВордПресс для публикации новостей, постов и экспертных статей, предусмотреть раздел «Об авторе» с переходом на сайт с услугами. Задача сайта — раскрутка имиджа специалиста. Должны быть написаны интересные статьи об эксперте и его деятельности, приведены результаты и достижения учеников.

Сайт-блог

Задача для сайта-блога писателя: возможность легко и просто выкладывать статьи и отрывки из книг автора блога, оптимизированные под СЕО-продвижение. В статьях должны быть разные форматы: тексты, видео, подкасты и т. д.

Цели и задачи проекта — это не пустые слова, а стратегический план, который поможет веб-разработчикам сделать именно тот сайт, который необходим, превратить его в действующий бизнес-инструмент.

Функциональные требования

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

Общие функции:

Возможности регистрации и авторизации пользователей.

Формы заявок и обратной связи.

Captcha или другая анти-спам функция.

Политика конфиденциальности и согласие на обработку персональных данных (в ТЗ указать, кто готовит текст этих документов).

Подписка на рассылку.

Призывы к целевым действиям.

Интеграция с социальными сетями.

Наличие онлайн-консультанта (как правило, это интеграция с платными онлайн-сервисами).

Квиз и калькулятор расчетов.

Фото и видеогалерея.

Новостная лента.

Портфолио работ или Выполненные работы.

Схема работы с компанией, преимущества в виде иконок.

Интерактивные карты.

Автоворонки и чат-боты для сайта.

Часто задаваемые вопросы (спойлер).

Презентация компании.

Кликабельный телефон и мессенджеры.

Слайдер, видео в шапке.

Для мобильных устройств:

Адаптация сайта под мобильные устройства (адаптивная верстка).

Меню «гамбургер» в мобильной версии.

Для интернет-магазинов:

Каталог и корзина товаров, доставка, акции.

Выбор размеров и цвета одежды (варианты товара).

Отзывы и видеообзоры товаров.

Поиск и фильтры в каталоге товаров для удобства навигации.

Онлайн-оплата и расчеты на сайте. Какая будет использоваться платежная система.

Какие службы доставки будут использоваться.

Выгрузка товаров (1С, МойСклад).

Заказчик, составляя ТЗ и описывая функциональную часть сайта, должен советоваться с программистом и СЕО-специалистом, потому что они могут предложить дополнительный функционал сайта, например, если планируется интернет-магазин, SEO-специалист предложит:

— включить разделы с популярными категориями товаров, новинки в витрине;

— использовать правильную иерархию заголовков на страницах;

— предусмотреть фильтры и сортировку, удобные для пользователей и понятные поисковым алгоритмам;

— включить подробное описание товаров с ключевыми словами;

— добавить модуль «Похожие товары»;

— добавить на сайт СЕО-статьи и т. д.

Был пример из практики, когда заказчик хотел простой каталог без фильтров, ему казалось, что фильтры усложнят разработку сайта и запутают клиентов. Был создан простой каталог, но со временем в нем собралось более 1000 товаров. SEO-специалист предложил добавить стандартные фильтры по цене, брендам и характеристикам. Сайт был усовершенствован, добавлены фильтры и после этого увеличилась его посещаемость. Каталог стал приносить больше заказов, примерно на 20%.

Для блога:

1) Функция поиска по блогу.

2) Кнопка «Поделиться» для каждой статьи или поста в социальных сетях.

3) Комментарии для каждой записи.

4) Боковое меню для категорий статей или других постов.

Функционал под СЕО:

1) Автоматическая генерация карты сайта.

2) Возможность легко обновлять заголовки title, H, мета описание.

3) Возможность легко обновлять url (адрес) страницы.

4) Блог со статьями.

5) Наличие установленных СЕО-плагинов для проверки текста перед публикацией.

6) Создание семантического ядра (группы ключевых слов) для продвижения.

Технический функционал

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

Примеры технических требований к сайту:

Простая и удобная CMS (движок сайта).

В ТЗ обязательно нужно указать предпочтительный движок для сайта. Это может быть:

— конструктор сайтов (Tilda, ЛП-мотор и т.д.),

— самописный движок,

— CMS или движок сайта (например 1С-Битрикс, WordPress, Джумла).

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

— Кто будет заниматься администрированием сайта?

— Кто будет заниматься публикацией контента?

— Кто будет обслуживать сайт?

— Будет ли продвижение сайта по СЕО?

Если клиент хочет сам обслуживать сайт и при этом не планирует СЕО-продвижение, ему могут предложить сайт на конструкторе сайтов как наиболее простой в обслуживании. Если же планируется продвижение сайта по СЕО (по ключевым словам), то здесь нужен движок типа ВордПресс с возможностью публиковать СЕО-статьи.

Прочие технические требования:

1. Функция автобэкапа сайта (автосохранение).

2. Последняя версия движка и PHP (язык программирования сайта).

3. Понятная административная часть сайта с передачей логина и пароля клиенту.

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

— тип хостинга (сервер, виртуальный, VPS),

— защищенность сайта от DDOS-атак,

— количество выделенного под сайт места (на каждом хостинге зависит от выбранного тарифа),

— примерное количество пользователей на сайте за одни сутки,

— возможность автоматически регулярно создавать бэкапы (резервные копии сайта),

— наличие на хостинге хорошей технической поддержки,

— возможность бесплатного переноса сайта.

5. Наличие ЧПУ — человеко-понятных URL (названия страниц в ссылках).

6. Наличие сертификата безопасности для домена. SSL-сертификат для защиты данных. Все формы обратной связи с CAPTCHA, личные данные клиентов должны быть зашифрованы.

7. Сайт должен соответствовать «зеленой зоне» системы оценки пользовательского контента Google Core Web Vitals.

8. Сайт должен загружаться быстро. Любая страница сайта должна иметь больше 80 баллов в Google PageSpeed Insights. Время загрузки страницы: не более 2 секунд.

9. Большие нагрузки на сайте, до 50 тысяч посетителей одновременно.

10. Базовая оптимизация страниц.

11. Кроссбраузерная верстка. (Сайт корректно должен отображаться во всех популярных браузерах).

12. Настройка счетчика Яндекс. Метрика и занесение сайта в сервис Webmaster Яндекс.

13. Чистый и оптимизированный код на всех страницах, настроенный редирект.

14. Schema.org Интеграция расширенных сниппетов.

15. Высокая скорость загрузки страниц, использование кэширование браузера, для увеличения скорости загрузки сайта.

16. Наличие на сайте Карты сайта (sitemap. xml) и файла robot. txt.

17. Пагинация страниц (разбиение длинных страниц на короткие).

18. Выбрать языки программирования и фреймворки. Распространенные варианты: PHP, Python, JavaScript (React, Vue, Angular).

19. Определить базу данных сайта. Для небольших проектов подойдёт MySQL, для крупных — PostgreSQL или MongoDB.

Последние два пункта обычно обсуждаются с программистом сайта.

20. На сайте должны быть интеграции со внешними системами. Опишите, с чем сайт должен взаимодействовать: CRM (Customer Relationship Management) — это система для управления взаимоотношениями с клиентами, хранения их данных), ERP, системы аналитики, платежные шлюзы, службы доставки и т. д.

Пример описания в ТЗ: «Сайт должен быть интегрирован с CRM-системой amoCRM, платёжной системой шлюзом Робокасса и системой аналитики Яндекс. Метрика».

На сайте не должно быть:

1) Технологии Flash и большого количества скриптов.

2) Фоновой музыки.

3) Не загружать видео на ваш сервер. Вместо этого используйте доступные видеохостинги.

4) Много анимации и рекламных баннеров.

5) Запрещено использовать черные и серые методы СЕО-продвижения (например, располагать на сайте невидимые ссылки).

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

Дизайн и пользовательский интерфейс

Описание общего видения дизайна сайта — это важный аспект ТЗ. В этом разделе необходимо изложить:

— Основные требования к стилю и цветовой палитре.

— Приложить логотип и фирменный стиль.

— Предпочтения по типографике (по шрифтам).

— Описать элементы дизайна, которые должны быть на Главной странице и других страницах сайта.

— Привести примеры сайтов с желаемым дизайном (указать ссылки) — этот пункт обязателен для всех сайтов, даже на конструкторе.

— Указать требования к дизайну мобильной версии сайта.

— Описать подробно навигацию сайта (меню, «хлебные крошки», пагинацию и т.д.)

— Описать какие иконки и графика будут использованы на сайте.

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

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

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

— Описать и привести примеры основного и второстепенных шрифтов.

— Указать стиль и тематику изображений.

— Привести примеры основных и вспомогательных цветов (приложить пример или написать в цифровом виде цвет). При этом желательно указать два основных цвета, а не двадцать на выбор веб-дизайнера.

— Указать допустимые и недопустимые цветовые сочетания.

— Подробно описать стиль дизайна сайта: например, веселый, детский как в примере (ссылки на несколько сайтов конкурентов), или: строгий, деловой стиль без ярких цветов (пример, ссылка на сайт конкурента) и т. д.

— Дизайн мобильной версии тоже описать и привести пример (ссылку).

Сроки выполнения и бюджет

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

Бюджет

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

Например, так, см. рис. 9.