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

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

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

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

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

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

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

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

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

В брифе подробно расписывают:

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

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

Рейтинг лучших хостингов для вашего сайта: обзор ТОП-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++ или другие. Подходит в тех случаях, когда нужен продукт индивидуальной разработки с нестандартными задачами.

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

Коммерческий трафик
Коммерческий трафик
от 35 600 ₽
Продвижение по коммерческому трафику от студии 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. Готовое техническое задание – объемный документ, но чем подробнее он расписан, тем лучше обеим сторонам.

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

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

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

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

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

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

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

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

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

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

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

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

Выбираем шрифты для сайта

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

Популярные шрифты, которые часто встречаются в интернете:

  • Arial (этим шрифтом написана статья);
  • Times New Roman;
  • Roboto;
  • Open Sans;
  • Montserrat;
  • Tahoma;
  • Courier New;
  • Verdana.

Вывод

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

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

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