Обсудим ваш проект?
Отправить заявку
Интернет-маркетинг,
который даёт результат
Россия: 8 (800) 775-63-20
Отправить заявку

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


Просмотров:
1870
Время на прочтение:
Статья обновлена:
22 Мая 2020
Информация о статье
Просмотров: 1870
Время на прочтение:
Статья обновлена: 22.05.2020
Дарья Иванова, редактор
Станислав Мозгель, руководитель отдела разработки
Дарья Иванова, редактор
Станислав Мозгель, руководитель отдела разработки

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

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

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

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

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

Составляем ТЗ

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

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

ПунктСодержаниеПример

Назначение сайта

Название проекта, тип сайта, задачи, которые сайт должен решать

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

Пожелания заказчика к дизайну

Цветовая гамма, стиль, присутствие аудио-/видео-контента, анимации и т.д.

Уклон в техническую тематику. Светлая цветовая гамма. Присутствуют белый, зеленый, красный и розовый цвета. Также присутствует анимация кнопок и пунктов меню

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

Перечень категорий и разделов сайта

Присутствуют категории по видам товара (ТВ, компьютеры, бытовая техника и т.д.). Также будут подразделы: к примеру, в разделе «Бытовая техника» — подраздел «Техника для кухни»

Навигация

Главное меню, подменю всех страниц сайта, пути перемещения по сайту, необходимость присутствия кнопок возврата и т.д.

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

Администрирование

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

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

Содержание веб-страниц

Описание контента, который будет размещен на страницах сайта (тексты, изображения, видео, аудио, анимация и т.д.), применяемые технологии, система ссылок

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

Общие вопросы

Примерные наработки обеих сторон по особенностям работы сайта и каждого его элемента.

Здесь же могут быть указаны требования к производительности и безопасности сайта

Сайт корректно отображается во всех браузерах (подробно об этом читайте в статье о кроссбраузерности), а также на ПК и мобильных устройствах. Важно обеспечить возможность быстрого изменения контента представителям компании-заказчика

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

Как найти сайт-образец

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

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

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

Образец сайта бухгалтерской компании
Образец сайта бухгалтерской компании

Сайт выполнен в минималистичном дизайне. Используются светлые цвета и оттенки, ключевые элементы голубого цвета. Все вместе выглядит гармонично и не мешает ознакомлению с информацией. На странице присутствуют важные пункты меню: «Услуги», «Кейсы», «О нас». Также можно найти ответы на частые вопросы и получить консультацию, заказав звонок или позвонив по телефону самостоятельно.

Помимо сайтов конкурентов, поищите интересные примеры верстки и дизайна на тематических ресурсах.

Так, на сайте TemplateMonster содержится большое количество шаблонов. Среди них можно найти подходящий и указать его в ТЗ как пример:

Шаблоны сайтов на TemplateMonster
Шаблоны сайтов на TemplateMonster

На сайте Timeweb также содержится множество примеров блогов, визиток, интернет-магазинов и прочих типов сайтов. Для ознакомления с демонстрационной версией достаточно кликнуть по соответствующим иконкам из списка:

Каталог шаблонов на Timeweb
Каталог шаблонов на Timeweb

Как описать дизайн сайта

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

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

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

Дизайнер намного быстрее и точнее выполнит свою работу, если в ТЗ будет разобран внешний вид каждого элемента сайта:

  • инструментов навигации,
  • шапки,
  • меню,
  • текстовых блоков и т.д.

Так, например, можно указать предпочтительную форму, цвет и способ развертывания панели навигации

Элементы навигации обычно располагаются в шапке страницы. Именно здесь формируется индивидуальность сайта в глазах пользователя. По канонам дизайна шапка должна занимать пространство в пределах от 200 до 300 пикселей.

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

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

Текстовые блоки должны быть оформлены в соответствии с общим дизайном сайта. При этом важно, чтобы у посетителя не возникало трудностей при чтении текста. Что касается шрифтов, если у заказчика нет определенных предпочтений или корпоративных шрифтов, чаще всего используются Tahoma, Verdana и Arial. Оптимальный размер – от 12 до 16 px. В ТЗ также можно указать, какими заказчик видит заголовки. Они должны гармонично сочетаться с основным текстом, привлекать внимание пользователя, но при этом не мешать чтению.

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

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

Как не допустить ошибок при составлении ТЗ

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

  • противоречия в требованиях,
  • неясные формулировки,
  • принцип «2 в 1»,
  • отсутствие четкого дедлайна,
  • не указаны ответственные лица,
  • слишком высокий уровень детализации,
  • слишком много терминов,
  • недостаток информации.

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

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

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

Укажите в ТЗ сотрудников, ответственных за каждый этап разработки. К примеру, за техническую реализацию отвечает программист Иван Петров, а за внешний вид — дизайнер Елена Кузнецова. Каждый специалист, согласно документу, несет ответственность за качественное выполнение своей работы в установленный срок.

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

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

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

Поможем с сайтами на Битрикс!
Разрабатываем, развиваем и обеспечиваем бесперебойность работы сайтов на Bitrix. Работаем с сайтами любой технической сложности и бизнес-логики. В течение 2 часов реагируем на любые ваши задачи в тикетной системе. В команде 6 программистов и 3 технических менеджера.