Как составить правильное ТЗ на разработку сайта?

В данной статье представлено краткое руководство по составлению эффективного технического задания.

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

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

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

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

Бриф сайта

Что необходимо при разработке брифа вашего сайта:

• Если у вас имеется старый сайт, укажите ссылку на него. При этом дополните информацию о том, хотелось бы вам разработку сайта с нуля или услуги по редизайну. Напишите информацию о старом сайте: чем он вас не устраивает и почему хотите новый, как давно он был разработан, есть ли адаптивность для различных устройств, какова его посещаемость и общие показатели, что вам нравится в старом сайте, а что вы хотели бы улучшить или убрать, если статистика показывает, что какой-либо блок неэффективен, а еще, что хотелось бы точно оставить и перенести на новую версию сайта.
• Название компании;
• Основная тематика;
• Ключевые слова;
• Фактический адрес компании;
• Телефоны компании, e-mail, режим работы, ссылки на соцсети;
• Опыт работы, год начала работы;
• Персонал и их квалификация;
• Активы компании;
• Юридическая информация (полное наименование юрлица/ИП, ИНН, ОГРН/ОГРНИП, КПП для юрлиц, ФИО руководителя);
• Регион продвижения, на который вы нацелены. Это может быть как вся Россия, так и определенный город;
• Основные конкуренты компании. Информация, чем они лучше, а чем хуже вас;
• Определите вашу целевую аудиторию — их возраст, пол, их мотивацию, т.е. ту цель/побуждение, с которыми они пришли на сайт. Определите для себя сразу — сайт в первую очередь не для вас, а для ваших потенциальных покупателей, и создание сайта целиком должно быть направлено на них, их удобство, понимание навигации;
• Укажите, откуда будет идти трафик — контекстная реклама, поисковая выдача, справочники, карты, соцсети и т.д.;
• Преимущества вашей компании перед конкурентами, т.е. ваше УТП, акции, скидки, бонусы, кэшбек и т.д.;
• Уточните, интересует ли вас дальнейшее продвижение и развитие сайта, если да, то каким способом?
• Пожелания к сайту. Здесь достаточно вольный набор для указания, но лучше всего именно здесь определить точные требования, какие функции и модули на сайте вам необходимы: формы обратной связи, подписка на рассылку, ЛК, калькулятор, таблицы, опросник или обязательное наличие форума, поп-апы, слайдеры, чат-виджеты или же интерактивные элементы, анимированные баннеры и другие желаемые фичи.

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

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

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

Как составляется структура?

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

Чтобы было удобнее понимать (обеим сторонам), что необходимо для структуры, можно указать информацию к следующим пунктам:

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

Контент

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

Какие должны быть требования к контенту?

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

Дизайн

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

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

• Укажите примеры сайтов: что нравится и не нравится, лучше всего, если вы укажете ссылки на сайты, особенно на ваших прямых конкурентов.
• Если есть брендбук или фирменный стиль — прикрепите документы и файлы, это будет самым лучшим дополнением к ТЗ, если нет, указать какие цвета нравятся/не нравятся.
• Проработка логотипа и фавикона (если нет брендбука). Если у вас был старый сайт и уже есть фавикон и логотип, укажите, нужно ли обновлять их и приложите их в нужном формате.
• Опишите общую концепцию для сайта с помощью прилагательных, отвечая на вопрос «Каким должен быть сайт?»: развлекательный, яркий, строгий, продающий и т.д.
• Укажите, какие стили вам нравятся: минимализм, глассморфизм, ретро стиль, журнальный или любые другие стили. Подойдет также ссылка на сайт, стиль которого полностью отвечает вашим вкусам.
• Пожелание по графическим элементам — нужно ли много графических и привлекающих внимание элементов и блоков, или необходим минимум и лаконичность.
• Отдельное внимание обратите на блоки и элементы для сайта — они могут иметь острые углы, либо же быть закругленными, у них могут быть плавные линии, они могут быть визуально выпуклыми, иметь тени и градиенты. Укажите и эту информацию тоже.
• Дополнительные макеты — сейчас часто встречаются сайты с темной темой сайта, при этом есть как полноразмерная версия, так и проработка отдельных участков с переходом на темный цвет, например, текстовых. Также дополнительные макеты понадобятся, если необходимо создать версию сайта для слабовидящих людей.
• Разработка баннеров. Есть всегда два варианта — их можно как разместить и создавать в дальнейшем самостоятельно, так и сразу написать, какие баннеры необходимы, например: «Необходима отрисовка 6 баннеров в первый экран сайта».
• Подбор изображений. Не у всех есть готовые изображения для размещения на сайте. Поэтому укажите те страницы, для которых вы хотели бы их подобрать. Также сообщите, если необходим подбор с платных фотостоков или обработка фотографий под единый стиль.
• Функционал всплывающих поп-ап окон. Необходимо перечислить элементы, для которых нужен сценарий отрисовки и вида элемента при взаимодействии с ним.
• Если вам необходимо обязательное продуманное отображение на мобильных, планшетах и ноутбуках меньшего разрешения, укажите это, так как при создании сайт имеет адаптивность, но это может выглядеть неаккуратно.

В заключение

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