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

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

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

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

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

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

Бриф сайта

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

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

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

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

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

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

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

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

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

Контент

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

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

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

Дизайн

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

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

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

В заключение

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