Проработанное техническое задание с четкими требованиями — одна из основ успешной разработки любого сайта. Данный документ позволяет заказчику и разработчикам определить ключевые элементы и этапы работы и мыслить в одном направлении. Поэтому техническое задание должно содержать исчерпывающую информацию о том, каким заказчику видится будущий сайт, включая описание всех элементов, их внешнего вида, назначения и функционала. Подробно о том, как правильно составить техническое задание, читайте в этой статье.
Что такое техническое задание
Техническим заданием (далее сокр. ТЗ) называют специальный документ, на основе которого заказчик оценивает качество сайта и степень завершенности его разработки. ТЗ регламентирует отношения заказчика и исполнителя, а также содержит следующую информацию:
- требования к дизайну сайта,
- необходимость присутствия и принцип работы навигационных элементов,
- способ передачи информации,
- объемы работ;
- сроки сдачи каждого этапа разработки.
Чем подробнее будет описан каждый пункт, тем легче будет избежать недоразумений и конфликтов между сторонами сделки. Кроме того, ТЗ помогает самому заказчику яснее представить будущий проект. По этим причинам такой документ — первое, что нужно проработать исполнителю и заказчику при заключении договора на разработку сайта.
Составляем ТЗ
В подавляющем большинстве случаев техническое задание разрабатывается совместно обеими сторонами сделки. Обычно заказчики не имеют сильных технических знаний в области веб-разработки и лишь поверхностно знакомы или вовсе не знакомы с этой сферой. Поэтому активное участие в составлении ТЗ принимают разработчики агентства-исполнителя.
В таблице ниже указано, какие нюансы, помимо сроков, обязательно должны быть описаны в ТЗ.
| Пункт | Содержание | Пример |
|---|---|---|
|
Назначение сайта |
Название проекта, тип сайта, задачи, которые сайт должен решать |
Интернет-магазин бытовой техники известной торговой сети. Оптовая и розничная торговля, доставка, самовывоз, техническая поддержка, консультации |
|
Пожелания заказчика к дизайну |
Цветовая гамма, стиль, присутствие аудио-/видео-контента, анимации и т.д. |
Уклон в техническую тематику. Светлая цветовая гамма. Присутствуют белый, зеленый, красный и розовый цвета. Также присутствует анимация кнопок и пунктов меню |
|
Структура сайта |
Перечень категорий и разделов сайта |
Присутствуют категории по видам товара (ТВ, компьютеры, бытовая техника и т.д.). Также будут подразделы: к примеру, в разделе «Бытовая техника» — подраздел «Техника для кухни» |
|
Навигация |
Главное меню, подменю всех страниц сайта, пути перемещения по сайту, необходимость присутствия кнопок возврата и т.д. |
Главное меню в верхней части сайта содержит панель поиска, выпадающее меню «Категории товаров», кнопки «Регистрация» и «Вход» для доступа в личный кабинет пользователя |
|
Администрирование |
Если заказчик планирует самостоятельно управлять сайтом, в этом пункте указывается, как будет реализован этот процесс |
Поддерживать сайт будет технический отдел компании. Логины и пароли учетных записей с правами администратора передаются заказчику. Возможность управлять сайтом для технического обслуживания остается у разработчика с разрешения заказчика |
|
Содержание веб-страниц |
Описание контента, который будет размещен на страницах сайта (тексты, изображения, видео, аудио, анимация и т.д.), применяемые технологии, система ссылок |
Товары в категориях размещаются по принципу «Плитка». В каждом разделе будет опубликована статья на соответствующую тему. При нажатии на плитку с товаром будет высвечиваться его карточка с техническими характеристиками и описанием |
|
Общие вопросы |
Примерные наработки обеих сторон по особенностям работы сайта и каждого его элемента. Здесь же могут быть указаны требования к производительности и безопасности сайта |
Сайт корректно отображается во всех браузерах (подробно об этом читайте в статье о кроссбраузерности), а также на ПК и мобильных устройствах. Важно обеспечить возможность быстрого изменения контента представителям компании-заказчика |
В данном примере нет подробной информации о многих технических нюансах (синхронизации сайта с CRM компании, алгоритмах покупки товаров, учете товарно-денежного оборота и др.), поскольку их описание содержит программный код, схемы и т.д. К тому же у каждого разработчика свои методы и подходы к решению технических задач. Все подобные моменты обсуждаются исполнителем и заказчиком в индивидуальном порядке.
Как найти сайт-образец
Перед заполнением ТЗ на разработку сайта заказчику рекомендуется проанализировать сайты конкурентов для того, чтобы получить более точное и широкое понятие о задачах, которые предстоит решать. Также можно ознакомиться с готовыми шаблонами сайтов нужной тематики. Их можно взять за основу для разработки алгоритмов работы собственного сайта.
Кроме интернет-магазинов, существуют и другие типы сайтов: визитки, блоги, порталы и т.д. Именно исходя из типа, следует выбирать дизайн.
Если вам необходим сайт-визитка, обратите внимание на сайты частных специалистов по разным направлениям. К примеру, на этот сайт компании по предоставлению бухгалтерских услуг:
Образец сайта бухгалтерской компании
Сайт выполнен в минималистичном дизайне. Используются светлые цвета и оттенки, ключевые элементы голубого цвета. Все вместе выглядит гармонично и не мешает ознакомлению с информацией. На странице присутствуют важные пункты меню: «Услуги», «Кейсы», «О нас». Также можно найти ответы на частые вопросы и получить консультацию, заказав звонок или позвонив по телефону самостоятельно.
Помимо сайтов конкурентов, поищите интересные примеры верстки и дизайна на тематических ресурсах.
Так, на сайте TemplateMonster содержится большое количество шаблонов. Среди них можно найти подходящий и указать его в ТЗ как пример:
Шаблоны сайтов на TemplateMonster
На сайте Timeweb также содержится множество примеров блогов, визиток, интернет-магазинов и прочих типов сайтов. Для ознакомления с демонстрационной версией достаточно кликнуть по соответствующим иконкам из списка:
Каталог шаблонов на Timeweb
Как описать дизайн сайта
В первую очередь заказчику нужно определиться, какой тип сайта нужен. От этого зависит объем работ дизайнера и стиль сайта. К примеру, если вы планируете сделать корпоративный сайт, то дизайн будет простым, в фирменном стиле вашей компании. Для блогов и визиток важно привлечение внимания аудитории, поэтому в дизайне этих сайтов есть место интересной анимации и интерактивным элементам.
Важно максимально точно передать дизайнеру ваше видение будущего сайта и всех его элементов. Для этого нужно описать в ТЗ ваши предпочтения относительно внешнего вида сайта, а именно следующую информацию:
- основная палитра (светлая или темная),
- цвет фона (или пример изображения),
- необходимость следовать фирменному стилю компании,
- шрифты.
Дизайнер намного быстрее и точнее выполнит свою работу, если в ТЗ будет разобран внешний вид каждого элемента сайта:
- инструментов навигации,
- шапки,
- меню,
- текстовых блоков и т.д.
Так, например, можно указать предпочтительную форму, цвет и способ развертывания панели навигации
Элементы навигации обычно располагаются в шапке страницы. Именно здесь формируется индивидуальность сайта в глазах пользователя. По канонам дизайна шапка должна занимать пространство в пределах от 200 до 300 пикселей.
В соответствующей графе технического задания также нужно поместить образцы логотипа компании и указать корпоративные шрифты.
Для фона сайта чаще выбирают светлые цвета. Причина этого решения, как правило, в том, что пользователю удобнее читать текст, просматривать изображения и изучать другой контент именно на светлом фоне.
Текстовые блоки должны быть оформлены в соответствии с общим дизайном сайта. При этом важно, чтобы у посетителя не возникало трудностей при чтении текста. Что касается шрифтов, если у заказчика нет определенных предпочтений или корпоративных шрифтов, чаще всего используются Tahoma, Verdana и Arial. Оптимальный размер – от 12 до 16 px. В ТЗ также можно указать, какими заказчик видит заголовки. Они должны гармонично сочетаться с основным текстом, привлекать внимание пользователя, но при этом не мешать чтению.
Если на сайте предполагаются большие статьи, рекомендуем обдумать оформление блока с содержанием. Он нужен для более удобного ознакомления с информацией и легкого перехода к определенным блокам статьи. Для этого пункты содержания нужно сделать якорями на определенные подзаголовки текста. Их дизайн может отличаться от остальных ссылок в тексте или в целом на странице.
На последнем этапе согласования разработчик обычно предлагает клиенту образцы дизайна сайтов той же или смежной тематики, а также наброски элементов страниц. Заказчик может внести свои коррективы. После согласования всех нюансов, этапов работ, способа оплаты и сроков выполнения проекта заказчик утверждает ТЗ, и разработчик принимается за выполнение заказа.
Как не допустить ошибок при составлении ТЗ
При составлении и проверке техзадания на разработку сайта важно учитывать даже самые мелкие нюансы. В противном случае можно допустить такие ошибки:
- противоречия в требованиях,
- неясные формулировки,
- принцип «2 в 1»,
- отсутствие четкого дедлайна,
- не указаны ответственные лица,
- слишком высокий уровень детализации,
- слишком много терминов,
- недостаток информации.
В техзадании не должны быть противоречивых утверждений. Например, если предполагается, что сайт будет модернизироваться или видоизменяться, то не стоить прописывать в ТЗ подготовку тех элементов, которые изменению не подлежат. Проследите за тем, чтобы указанные элементы не были взаимоисключающими.
Требования к разрабатываемому сайту и процесс его создания должны быть описаны подробно, но лаконично. Расплывчатые и некорректные формулировки удаляйте из текста.
Важно прописать не только основной дедлайн, но и сроки выполнения каждого этапа. Так обеим сторонам будет легче регулировать процессы.
Укажите в ТЗ сотрудников, ответственных за каждый этап разработки. К примеру, за техническую реализацию отвечает программист Иван Петров, а за внешний вид — дизайнер Елена Кузнецова. Каждый специалист, согласно документу, несет ответственность за качественное выполнение своей работы в установленный срок.
Чрезмерно подробное описание может сбить с толку как разработчика, так и самого заказчика. Есть вероятность, что лишняя информация вызовет у исполнителя ряд дополнительных вопросов. В итоге все рискуют потерять время и силы на выяснение ненужных деталей.
ТЗ должно быть понятно и заказчику, и исполнителю. Поэтому документ следует составлять на понятном для обеих сторон языке. Рекомендуем избегать профессиональных терминов или использовать их только в случае крайней необходимости.
Хоть некоторые графы в ТЗ бывают необязательны к заполнению, мы советуем заказчикам по возможности заполнять все и указывать исчерпывающую информацию по каждому запрашиваемому пункту. Такой подход помогает обеим сторонам: заказчику — яснее представлять желаемый результат, исполнителю — максимально качественно выполнять свою работу.
* Meta Platforms Inc. (и принадлежащие ей соц.сети Instagram, Facebook) признана экстремистской организацией, ее деятельность в России запрещена.
