Бесплатный вебинар «SEO на максималках» Зарегистрироваться
Елена Кузнецова
Контент-менеджер

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

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

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

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

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

Как сделать и создать свой сайт с нуля: пошаговая инструкция по самостоятельному созданию
Как сделать и создать свой сайт с нуля: пошаговая инструкция по самостоятельному созданию
Определяем цель Это первоочередное – разобраться с вашими задачами и тематикой. Сначала решите, сайт будет продавать или информировать. Классический пример коммерческого проекта – интернет-магазин. Здесь есть витрина товаров, разрабатывается форма заказа, корзина. Словом, придется тщательно поработать над функционалом. Цель информационного – удовлетворить поисковые запросы пользователей. Работы здесь сравнительно меньше, основной упор делается на правильном оформлении статей, дизайне, навигации и т. д. Выбираем тип Будет площадка повышать имидж бренда, продавать товары, предоставлять место для дискуссий или просто развлекать – с этим…

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

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

В брифе подробно расписывают:
  • позиционирование компании, услугах, продуктах, фирменном стиле и конкурентах в нише;
  • для сего будет использоваться ресурс;
  • тип ресурса (имиджевый, под офер, визитка, магазин, информационный портал);
  • нужны ли мобильная или десктопная версии, приложение для смартфона (скорее всего, необходимы!);
  • референсы (примеры, которые нравится по дизайну, наполнению, структуре, фишкам, анимации).

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

Рейтинг лучших хостингов для вашего сайта: обзор ТОП-13 провайдеров в России
Рейтинг лучших хостингов для вашего сайта: обзор ТОП-13 провайдеров в России
Рекомендации по выбору хостинга Правильный выбор хостинга — это не искусство, а внимательность. Перед тем, как покупать услуги, обратите внимание на несколько базовых функций и возможностей: место на жестком диске — для небольшого сайта хватит нескольких гигабайт, но интернет-магазин или новостной портал потребуют больше места на диске (поэтому не поленитесь проверить, какой максимальный объем дискового пространства способен предоставить хостинг); аптайм — очень важный параметр, который показывает доступность сайта (лучше, чтобы был не менее 99%); возраст — чем больше лет провайдер…

Что обязательно должно быть

Тех.требования. Существует несколько технологий для разработки:

  • на движке CMS – система управления. Позволяет в полуавтоматическом режиме работать с базами данных и контентом. Движков много, среди них WordPress, Joomla, Drupal, OpenCart, MODX, 1С-Битрикс, UMI-CMS, Nethouse, CS-Cart, Netcat, Moguta и другие.
Так выглядит админка Битрикса
  • на конструкторе. Такое решение выбирают, когда не хотят заморачиваться с базами данных, кодами, хостингом. Нужно лишь выбрать платформу и определиться с шаблоном для дальнейшей работы. Программ тоже много: Nethouse, Ukit, Tilda, Wix, приложение от Тинькофф, Insales, Битрикс24, Mottor.
Ресурс сделан на конструкторе Tilda
  • самописные решения. Разработчики пишут сайт с нуля, используя языки программирования: HTML, CSS, PHP, JavaScript, Perl, Flash, C/C++ или другие. Подходит в тех случаях, когда нужен продукт индивидуальной разработки с нестандартными задачами.

От выбора зависит дальнейшее администрирование, развитие, продвижение и обслуживание вебресурса.

Коммерческий трафик
Коммерческий трафик
Продвижение по коммерческому трафику от студии SEMANTICA – привлечение целевых пользователей из систем Яндекс и Google. Мы работаем над внутренними и внешними факторами ранжирования и видимостью сайта в поисковиках. Вы получаете рост посещаемости и высокий охват среди своих потенциальных клиентов.

Требования к быстродействию. Скорость загрузки страницы влияет на пользовательский опыт, конверсию, вовлеченность и выход в ТОП поисковой выдачи. Согласно исследованию Strangeloop, 57% посетителей покидают интернет-ресурс, который грузится 3 секунды и дольше. Такой ресурс имеет на 22% меньше просмотров, на 50% больше отказов и на 22% хуже конверсию, по сравнению с более быстрым ресурсом. А если ускорить загрузку на одну секунду, то конверсия увеличится на 10% (это уже исследование Staples).

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

Пример структуры простого сайта

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

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

Seo-оптимизация. Если не продвигаться, то выйти в ТОП будет трудно, если только вы не продаете первое в мире устройство по телепортации. Впрочем, и в этом случае все равно потребуется начальная seo-оптимизация, а ее фундамент закладывается на этапе разработки ТЗ. Важно прописать мета-теги и собрать семантическое ядро.

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

Лучшие CMS - какой движок выбрать для сайта
Лучшие CMS - какой движок выбрать для сайта
В этой статье мы разберем, на каком движке лучше делать сайт, приведем рейтинг самых популярных CMS систем и перечислим их достоинства и недостатки. Какой сайт вам нужен – корпоративный портал, визитка, простой одностраничник, интернет-магазин или информационный блог? Читайте статью и подберите движок под свои задачи. На что обращать внимание при выборе CMS Основная задача систем управления – упростить рабочий процесс по созданию, удалению, наполнению и администрированию сайта. Если вы хотите попасть в топ поисковой выдачи, вам точно понадобятся следующие возможности:…

Основные ошибки при составлении

  • Неясные формулировки. «Красивый, понятный, быстрый» следует заменить конкретными характеристиками: страница открывается с компьютера за 1 секунду, или имеет 50 баллов в Google PageSpeed Insights; сайт выдерживает 30 000 посетителей одновременно.
  • Нет сроков. В документе следует указать, сколько времени потребует разработка каждого этапа, а также дедлайн сдачи всего проекта с учетом правок. Их количество тоже придется прописать, равно как и стоимость.
  • Нет наглядности. Лучше один раз показать, чем сто раз рассказать. Визуальные элементы, референсы, прототипы страниц, шрифты и цвета надо отобразить в ТЗ.

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

Фрагмент из ТЗ на разработку сайта: описание разделов

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

Фрагмент из ТЗ: описание сроков и задач

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

Описание цветов их ТЗ

При описании дизайна назовите конкретные коды цветов, а еще хорошо наглядно показать, как они будут смотреться. Все это можно сделать в два клика на colorscheme.ru. Готовое техническое задание – объемный документ, но чем подробнее он расписан, тем лучше обеим сторонам.

В помощь при написании техзадания

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

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

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

Подбираем сайты-образцы

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

  • по структуре;
  • по дизайну;
  • по контенту;
  • по интерактивным элементам, фишкам и взаимодействиям;
  • по пользовательским сценариям.

Искать их можно вручную или использовать рейтинги. К примеру, ресурс allawards.ru собрал лучшие интернет-ресурсы с точки зрения юзабилити, креатива и эффективности.

Определяем цветовую гамму

Готовый брендбук и фирменные цвета – основа для дизайна, но если этого нет, то тогда придется подбирать оттенки самостоятельно. Помогут статьи на тему восприятия цвета в рекламе, а также готовые цветовые подборки в поисковой выдаче. Еще можно использовать профессиональные программы генерирования схем по правилам колористики, к примеру, colorscheme.ru или colorhunt.co

На colorscheme.ru можно выбрать любой цвет и подобрать к нему сочетающиеся оттенки, в том числе контрастные
А на Color Hunt смотрят сочетаемость цветов. Здесь удобно скопировать код цвета в один клик
Продвижение блога
Продвижение блога
Продвижение блога от студии SEMANTICA — увеличение потока пользователей на сайт и повышение экспертности бренда в глазах целевой аудитории. Мы создаем востребованный контент, отвечающий на запросы потенциальных клиентов, оптимизируем статьи и настраиваем коммерческие триггеры. Вы получаете ощутимый прирост переходов в каталог товаров и услуг из блогового раздела.

Выбираем шрифты

Это один из главных инструментов подачи информации, от удобства восприятия информации зависит, останется ли человек на сайте. Библиотеки шрифтов лучше смотреть в интернете, а не в Microsoft Word. Неплохая коллекция собрана на allfont.ru. Для удобства есть подборки по группам: 3D-шрифты, брендовые, готические, юмористические, восточные, нацарапанные и так далее. Кроме того, здесь можно узнать, как текст будет выглядеть на фронте. Альтернативы: библиотеки Google Fonts и FontSpace.

Популярные шрифты, которые часто встречаются в интернете:
  • Arial (им написана статья);
  • Times New Roman;
  • Roboto;
  • Open Sans;
  • Montserrat;
  • Tahoma;
  • Courier New;
  • Verdana.

Вывод

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

Получайте реальный результат

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