12 лет создаем и продвигаем сайты в интернете
ДЕЛИМСЯ ОПЫТОМ
Время чтения: 11 минут

Как правильно составить техническое задание на разработку сайта?

 
 
тз разработка сайта

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

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

Составление ТЗ на разработку сайта можно разделить на несколько этапов

 

Первый этап - обсуждение и креатив

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


Второй этап - фиксация на бумаге

Мало просто продумать все до мелочей, нужно еще и зафиксировать эту информацию в официальном документе:

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

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

 

ТЕХНИЧЕСКАЯ ИНФОРМАЦИЯ ПО ВЕБ-ДИЗАЙНУ

Исполнитель разрабатывает веб-дизайн для следующих страниц сайта Заказчика:

Главная, О компании, Новости, Новости внутр., Вакансии, Срочный выкуп, Доставка, Акции, Контакты, Каталог товаров, Каталог внутр. (плитка), Каталог внутр. (список), Каталог внутр. (таблица), Карточка товара, Личный кабинет, ЛК История заказов, ЛК Личные данные, ЛК Мои бонусы, Корзина

 

ЭЛЕМЕНТЫ, ИСПОЛЬЗУЕМЫЕ НА ВСЕХ СТРАНИЦАХ САЙТА

Ниже перечислены элементы, используемые на всех страницах сайта:

Top Menu

  • Выбор города
  • Наши магазины
  • Доставка и оплата
  • Акции
  • Новости
  • О нас
  • Вакансии
  • Франшиза
  • Корзина
  • Авторизация

Header (Верхняя часть сайта)

  • Логотип (Расположение с левой стороны)
  • Каталог
  • Телефон (На каждом городе свой номер телефона)
  • Срочный выкуп

Menu (Меню сайта)

  • Поиск
  • Необходимые категории

Footer (Нижняя часть сайта)

  • Логотип (с левой стороны)
  • Адрес
  • Email
  • Социальные сети
  • Необходимые пункты меню

Bottom Menu

  • Копирайт компании
  • Копирайт Веб Студии

ГЛАВНАЯ СТРАНИЦА

Левая часть блока

  • Баннер ( Является ссылкой)

Правая часть блока

Слайдер

Находится с левой стороны контентного блока сайта

Слайдер состоит из нескольких слоев:

  1. Текст
  2. Изображения
  3. Навигация
  4. Ссылка кнопка «Подробнее»

Блок «Популярные категории»

В данном блоке можно вывести 9 популярных категорий с товарами.

Блок «Акции и спецпредложения»

Представляет из себя витрину с товарами, которые участвуют в акции

Блок «Лучшие новинки»

Представляет из себя витрину с новыми товарами, которые были добавлены на сайт

Блок «Оформить подписку»

Данный блок предназначен для формирования Email базы подписчиков

Форма ввода данных:

  • Имя (Валидация по текстовому значению)
  • Телефон (Валидация по номеру)

Блок «Информация о компании»

  • Тестовая и графическая часть контента

Блок «Вы тоже можете присоединиться к нашей команде…»

  • Тестовая и графическая часть контента

Блок «Не нашли, что искали?»

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

Блок «Новости и статьи»

  • Тестовая и графическая часть контента
  • - См. Элементы, используемые на всех страницах сайта.

О КОМПАНИИ

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта.

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта

Блок «Текст о компании»

  • Тестовая и графическая часть контента
  • Видео (Youtube)

Блок «История компании»

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

Блок «Фотографии наших магазинов»

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

  • Фотографии (Открывается в лайтбоксе)

Footer - См. Элементы, используемые на всех страницах сайта.

 

НОВОСТИ И ПОЛЕЗНЫЕ СТАТЬИ

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта

Страница «Новости, видео и интересные статьи»

Здесь выводятся превью всех новостей в виде графических блоков и видео через видеохостинг Youtube. 

Карточка «Новости» состоит из:

  • Дата
  • Заголовок
  • Краткое описание

Footer - См. Элементы, используемые на всех страницах сайта.

 

НОВОСТИ И СТАТЬИ (ВНУТРЕННЯЯ СТРАНИЦА)

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта.

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта.

Блок «Контент»

Footer - См. Элементы, используемые на всех страницах сайта.

 

ВАКАНСИИ

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта

Блок «Контент»

Footer - См. Элементы, используемые на всех страницах сайта.

 

СРОЧНЫЙ ВЫКУП

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта

Блок «Контент»

Блок «Оставить заявку»

Представляет из себя блок, через который клиент может оставить заявку на оценку товара

Форма ввода данных:

  • Состояние товара
  • Поле введите название вашего товара
  • Желаемая стоимость товара (Числовое значение)
  • Прикрепить фото товара (Формат Jpg или Png)
  • Имя (Валидация по текстовому значению)
  • Телефон (Валидация по номеру)
  • Кнопка (Оставить заявку)

Footer - См. Элементы, используемые на всех страницах сайта.

 

ДОСТАВКА И ОПЛАТА

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта

Блок «Контент»

Footer - См. Элементы, используемые на всех страницах сайта

 

АКЦИИ И СПЕЦПРЕДЛОЖЕНИЯ

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта

Блок «Контент»

Footer - См. Элементы, используемые на всех страницах сайта

 

КОНТАКТЫ

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта.

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта.

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

Карточка магазина

  • Адрес
  • Email
  • Телефон (Единый)

Яндекс карта

На карте обозначены адреса магазинов

Блок «Реквизиты компании»

  • - См. Элементы, используемые на всех страницах сайта.

КАТАЛОГ ТОВАРОВ

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта.

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта.

Блок « Каталог товаров»

Блок «SEO Тексты»

В данном блоке будут размещены продающие и SEO тексты.

Footer - См. Элементы, используемые на всех страницах сайта.

 

КАТАЛОГ  (ВНУТРЕННЯЯ СТРАНИЦА)

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта

Sidebar (Левая сторона)

Фильтр товара

  • Наличие в магазина (Адрес магазина)
  • Цена (ползунок «от» и «до»)
  • Чек-бокс
  • Радио-кнопка

Center (Центральная часть)

  • Баннер (Сквозной на все категории и подкатегории.)
  • Вид отображения (Согласно возможностям системы управления сайта)
  • Заголовок активной категории
  • Сортировать по (возрастанию и убыванию цены)

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

  • Изображение товара
  • Наименование товара
  • Количество товара
  • Стоимость
  • Купить

Блок «SEO Тексты»

В данном блоке будут размещены продающие и SEO тексты.

Footer - См. Элементы, используемые на всех страницах сайта.

 

КАРТОЧКА ТОВАРА

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта

Блок «Информация»

  • Изображения товара
  • Стоимость
  • Характеристики
  • Наличие
  • Купить

Блок «Информация»

  • Описание
  • Характеристики

Блок «Похожие товары»

Footer - См. Элементы, используемые на всех страницах сайта.

 

ЛИЧНЫЙ КАБИНЕТ

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта.

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта.

  • История заказов
  • Личные данные

Footer - См. Элементы, используемые на всех страницах сайта.

 

ИСТОРИЯ ЗАКАЗОВ

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта

Центральная часть

Карточка заказа

  • Дата заказа
  • Сумма
  • Состав заказа (при клике по ссылке "развернуть список товаров" разворачивается дополнительное окно, в котором отображаются все товары из заказа)

Footer - См. Элементы, используемые на всех страницах сайта.

 

ЛИЧНЫЕ ДАННЫЕ

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта

Центральная часть

Контактные данные

  • ФИО
  • Телефон
  • Email
  • Адрес доставки
  • Текущий пароль / Замена пароля

Footer - См. Элементы, используемые на всех страницах сайта.

 

ОФОРМЛЕНИЕ ЗАКАЗА

Top Menu (Меню верхнего уровня) - См. Элементы, используемые на всех страницах сайта.

Header (Верхняя часть сайта) - См. Элементы, используемые на всех страницах сайта

Menu (Меню сайта) - См. Элементы, используемые на всех страницах сайта

Центральная часть

  • Контактные данные
  • Наименование товара
  • Количество товара
  • Оформить заказ

Footer - См. Элементы, используемые на всех страницах сайта

Вы можете заказать составление ТЗ в нашей веб-студии по тел.: +7 (3452) 73-85-05 или скачать образец технического задания на разработку сайта и заполнит его самостоятельно.

 
 
Вам понравилась эта статья?
Поделитесь с друзьями
 
посмотрите также
Другие статьи