Бесплатная горячая линия

8 800 301 63 12
Главная - Другое - Тз для разработки дизайна сайта

Тз для разработки дизайна сайта

Тз для разработки дизайна сайта

ТЗ для сайта: как составить идеальное техническое задание


Веб-студия #VA подготовила для вас рекомендации и инструкции о том, как составить правильное и продуманное ТЗ для сайта. Разбираемся и отвечаем на важные вопросы: зачем нужно ТЗ, кто его составляет и что должно включать тех.задание. В конце статьи мы разместили бесплатный шаблон технического задания, используемого в нашей студии.

Валерий Алексеев Руководитель веб-студии #VA Время чтения: 9 минут Содержание статьи Блог #VA В своём блоге в свободной форме и приятном формате делимся интересными мыслями на тему работы компании в digital-пространстве.

Реклама, продвижение, автоматизация процессов, образование — всё это находит отражение в нашем блоге. Подписаться на канал На нашем YouTube-канале регулярно выходят новые видео на тему дизайна, разработки сайтов, продаж и взаимодействия с заказчиками. Подписывайтесь! Чёткое и проработанное тех.задание — залог успешной разработки любого сайта.

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

Какие конкретные преимущества даёт обеим сторонам правильно подготовленное ТЗ для сайта?

Мы подготовили для вас несколько аргументов в пользу составления тех.задания. Мы будем рады, если вы поделитесь этой статьёй с друзьями! Начнём, пожалуй, с того, какие преимущества техническое задание даёт заказчику, который обращается в агентство или .

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

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

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

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

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

Например, в зависимости от размеров проекта мы в веб-студии #VA иногда выделяем разработку документации и проведение аналитики в отдельный подготовительный этап, после завершения которого заказчик может продолжить работу с нами или же с другой студией, взяв за основу составленные нами документы. «Что должно быть в техническом задании?» — главный вопрос, с которым к нам обращаются заказчики на этапе согласования проекта.

«Что должно быть в техническом задании?» — главный вопрос, с которым к нам обращаются заказчики на этапе согласования проекта.

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

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

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

Вот некоторые технические аспекты, на которые стоит обратить внимание:

  1. Адаптивность. Требуется ли вашему сайту отдельный вариант отображения на мобильных устройствах?
  2. Кроссбраузерность. Какие минимальные версии браузера должны отображать сайт? Помните, что старые браузеры (вроде Internet Explorer 7) существенно урезают возможности разработки, занимая при этом не более 1% всех используемых в мире браузеров.
  3. Система управления. Если вы уже определились с тем, какую CMS выбрать для сайта, зафиксируйте это в ТЗ. Если вы выбрали 1C-Битрикс, возможно, вам поможет наша статья о .

Свяжитесь с командой #VA — мы расскажем вам подробнее о сайтах и нашей студии. Описание основных элементов и страниц с использованием иерархической/древовидной модели позволит быстро определить главные модули сайта и взаимосвязи между ними.

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

В большинстве случаев, все сквозные элементы можно свести к четырём основным:

  1. Шапка сайта — верхняя часть, содержащая, как правило, логотип компании, навигацию по страницам, контактную информацию и дополнительные элементы.
  2. Всплывающие окна и формы, появляющиеся на страницах сайта при клике на кнопку или ином действии.
  3. Боковые панели (сайдбары) — вертикальные колонки, содержащие определённый набор функциональных блоков (виджетов). Пример: боковая панель на странице интернет-магазина, содержащая фильтры и навигацию по категориям.
  4. Подвал сайта — нижняя часть, являющаяся заключительной частью каждой страницы. Зачастую, может дублировать часть информации из шапки.

Как правило, объём работы дизайнера и разработчика зависит от количества уникальных разделов/страниц, на базе которых строится сайт. Именно поэтому каждую такую страницу, имеющую уникальные дизайн и структуру, необходимо зафиксировать и описать в ТЗ для сайта. Уникальные страницы — своеобразные макеты, на базе которых будут создаваться и множиться страницы сайта, обладающие схожими характеристиками.

Каждая такая страница требует затрат со стороны дизайнера и разработчика.

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

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

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

Вот краткий список того, что рекомендуется включить в ТЗ практически для любого сайта:

  1. Страницы ошибок — те самые небольшие странички на сайте, которые видит посетитель, когда что-то пошло не так. Не стоит недооценивать эти страницы — если подойти к их реализации с креативом, результат может удивить посетителей вашего сайта. Отличные примеры можно посмотреть , и .
  2. Страница результатов поиска — один из важнейших функциональных блоков на сайте. От того, насколько удобно будут представлены результаты поиска иногда напрямую зависит конверсия в продажи.
  3. Страницы входа и регистрации — если на вашем сайте предполагается авторизация пользователей, позаботьтесь о том, чтобы формы были удобными.
  4. Типовая текстовая страница — на базе неё будут создаваться все новые страницы, не попадающие под описанные уникальные страницы. Рекомендуется на этапе дизайна заложить в этот пункт все необходимые элементы для оформления текста: заголовки, параграфы, списки, таблицы, изображения, встраиваемые видео и так далее.

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

Поясним на примере:

  • Кстати, «Автор» также является сущностью — у каждого из них может быть уникальная фотография и имя. В этом случае, сущности могут быть связаны друг с другом, как новость и её автор.
  • Если вы захотите добавить на свой сайт раздел с новостями, то «Новость» будет новой сущностью. Помимо заголовка и содержимого эти материалы могут иметь, например, дату публикации или автора.
  • Вы создаёте сайт-визитку, состоящий исключительно из нескольких страниц. В этом случае, сущностью будет «Страница», у каждой из которых есть свой заголовок, содержимое и другие опции.

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

В одном из проектов мы реализовали в различных городах США.

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

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

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

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

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

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

Закон Мёрфи, адаптированный для данного случая, будет звучать так: Если какая-то особенность сайта не зафиксирована в ТЗ, она будет реализована неправильно. Безусловно, это актуально не для каждого проекта. Однако, имея качественно подготовленное ТЗ для сайта, вы практически гарантируете сохранение бюджета от 5 до 20%.
Однако, имея качественно подготовленное ТЗ для сайта, вы практически гарантируете сохранение бюджета от 5 до 20%.

И если есть возможность снизить вероятность ошибки — почему ей не воспользоваться? Вам могут также понравиться другие статьи из нашего блога: 12.12.2018 Интеграция amoCRM. Как повысить эффективность работы компании?

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

» Новая статья 14.10.2017 Битрикс или WordPress: почему дорого — не всегда круто Недавно мы рассказывали о недостатках сайтов, сделанных на конструкторах — и в частности, о проблемах с продвижением подобных сайтов. Поэтом. » Новая статья 20.05.2018 Продвижение стартапа. Как продвигать стартап в 2018 году.

Каждый, кто занимается развитием собственного проекта в 2018 году рано или поздно задаётся вопросом: как организовать грамотное и эффективно. » Новая статья

Как создать ТЗ на разработку сайта

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

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

Плачевный итог – клиент получил совсем не то, что представлял себе. Силы, время исполнителей и клиента были потрачены зря.

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

Заказчик и исполнитель должны правильно понимать друг друга, поэтому лучше подробно расписать все требования. Четко составленное ТЗ увеличивает шансы того, что заказчик будет доволен получившимся результатом, а исполнитель не будет переделывать ресурс 2-3 раза.

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

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

  1. Узнать, что именно клиент хочет получить от сайта;
  2. Уточнить о проблемах, с которыми целевая аудитория (ЦА) будет приходить к клиенту и их решения;
  3. Попросить привести примеры удачных сайтов конкурентов.
  4. Рассказать подробнее о компании, предлагаемых товарах или услугах, целевой аудитории;

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

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

Для кого-то красивым будет сайт с обилием анимаций и ярких цветов, другой же сочтёт за красоту минимализм. Главный критерий качества ТЗ — чёткие формулировки, отсутствие двусмысленных трактовок.

Конкретика в техническом задании — главное условие качества, например:

  1. Каждая страница должна провериться на GTmetrix или GoogleSpeed с показателем скорости не менее 80/100 по Google Page Speed.
  2. Ресурс должен выдерживать до 20 тыс. посетителей одновременно.
  3. На главной должны выводиться новости и ниже отображаться форма с кнопкой «Подписаться» с возможностью отправить e-mail адрес.
  4. Список партнеров в виде карусели логотипов, отзывы клиентов в слайдере с горизонтальной прокруткой по 1-му отзыву на слайд.

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

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

Структура сайта – фундамент. Решите, какие страницы необходимо создать и продумайте навигацию на них. По нашему опыту клиент проще воспринимает блок-схему, нарисованную в XMind. Но если вы считаете, что работа в XMind займет слишком много времени, то просто перечислите секции в word файле. Кстати, не лишним будет предварительно собрать , которое поможет в определении структуры и разделов на основании реальных запросов потенциальных клиентов в вашем сегменте.

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

Данные формулировки подходят для преамбулы приложения по техническому заданию к договору услуг.

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

Ниже пример составления структуры для ТЗ. Страница «Главная»

  1. Секция «Преимущества» с указанием ключевых выгод для клиентов;
  2. «Контакты»;
  3. «Каталог продукции» с выпадающим списком разделов «Трубы SML», «Фитинги SML», «Соединительные хомуты»;
  4. Кнопка обратной связи;
  5. «О компании»;
  6. «База знаний / FAQ»;
  7. Секция «Слайдер» с фотографией по ширине экрана и кнопкой обратной связи с запросом на просчёт проекта / запроса на полный прайс-лист продукции.
  8. Логотип и слоган;
  9. Ссылка на скачивание катала продукции в .pdf;
  10. Контактный телефон компании;
  11. «Главная»;
  12. Секция «Продукция» с текстовым описанием преимуществ, ссылками на сертификаты, ссылкой на «Каталог продукции»;
  13. Ссылка на YouTube канал и на социальные сети компании.
  14. «Производство»;
  15. «Проекты»;
  16. Секция «Наши проекты» (с переходом в раздел «Все проекты»);
  17. Секция «Компания в цифрах» с цифрами достижений и ссылкой на раздел «О компании»;
  18. Секция «Видео-инструкции» с текстовым описанием и ссылкой в раздел «Все видео»;
  19. Контакты, телефон, адрес, электронная почта;
  20. Секция «Производство» с кратким описанием и информацией про систему контроля качества, со ссылкой на раздел «Производство» и кнопкой с записью на поездку на завод;
  21. «Проектировщикам»
  22. Кнопка «Заказать звонок».
  23. Секция «Меню» с разделами и выпадающим списком подразделов:
    • Логотип и слоган;
    • «Главная»;
    • «Проекты»;
    • «Каталог продукции» с выпадающим списком разделов «Трубы SML», «Фитинги SML», «Соединительные хомуты»;
    • «Производство»;
    • «О компании»;
    • «Проектировщикам»
    • «База знаний / FAQ»;
    • «Контакты»;
    • Ссылка на скачивание катала продукции в .pdf;
    • Контактный телефон компании;
    • Кнопка «Заказать звонок».
  24. Секция «Подвал»:

Если вы также заказываете уникальный дизайн, то структуру страниц можно строить по предварительному прототипу.

Ниже пример прототипа сайта, который можно прикрепить к техническому заданию на разработку.

Определите вид главной страницы. Решите, где будет заголовок, пропишите основные элементы, на чём сделать акцент и так далее.

Функционал — отдельная история.

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

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

  1. Модули галереи
  2. Модули SEO оптимизации и страниц
  3. Онлайн-карта с гео-метками
  4. Модальные окна
  5. Формы заявок с возможностью оставить заявку
  6. Слайдеры
  7. Модули кеширования и сжатия
  8. с расчетом цены
  9. CMS система Вордпресс, Битрикс и тп.

К технической части относятся требования хостингу и его настройкам. Советуем выбирать проверенный и быстрого хостинг-провайдера с приемлемыми тарифами на обслуживание.

Мы используем в проектах вот хостинг. Стоимость всего 2500 в год, домен в зоне .ru можно купить за 179 руб. Вот пример функционального описания для технического задания.

Подключение и настройка CMS системы 1С Битрикс Исполнитель настраивает CMS систему управления сайтом 1С Битрикс.

Лицензия «1С-Битрикс: Управление сайтом» оплачивается Заказчиком самостоятельно.

Наполнение контентом Наполнение текстом и фотографиями указанных выше страниц. Текст и фотографии предоставляет Заказчик.

Исполнитель в праве использовать также контент с сайта заказчика.

Расположение блоков на страницах выводится в рамках структуры страниц шаблона.

Настройка ролей доступа Добавление роли «Администратор» с возможностью администрирования CMS, роли редактора (для отдела закупок) с возможностью добавления информации.

Адаптация для мобильных устройств и планшетов Широкоэкранная верстка и адаптация под более мелкие разрешения экрана, сайт должен корректно отображаться на экранах шириной от 1920 до 320 пикселей, появление горизонтальной прокрутки недопустимо. Подключение дополнительных модулей CMS Исполнитель также вправе добавлять модули CMS и функциональные элементы на своё усмотрение, если они улучшают работоспособность сайта по согласованию с Заказчиком, платные модули оплачиваются Заказчиком. Подключение домена и хостинга Заказчика Исполнитель подключает домен и хостинг Заказчика для веб-сайта.

Производится парковка домена с указанием адресов ns1, ns2.

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

Доступы к базе данных передаются Исполнителем Заказчику по электронной почте.

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

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

Вывод форм обратной связи Форма обратной связи должна выводиться на каждой странице. В форме обратной связи должны присутствовать: форма поля ввода номера телефона и кнопка «отправить заявку». Данные с формы должны передаваться на электронный адрес администратора, а также дублироваться на адрес Подключение Яндекс карты c ГЕО-метками На страницах выводится Яндекс.Карта с ГЕО меткой расположения / адреса Заказчика.

Заказчик устанавливает метку на собственном аккаунте Яндекс.

Подключение статистики Яндекс.Метрика Сервис сбора данных о посещаемости и поведении пользователей. Заказчик предоставляет Яндекс почту, на которую Исполнитель подключает сервис. Настройка целей в Яндекс.Метрика Исполнитель настраивает цели в Яндекс.Метрика. Цели сообщают в статистике о том, с какой конкретно формы была отправлена заявка.
Цели сообщают в статистике о том, с какой конкретно формы была отправлена заявка.

Вывод H1 и МЕТА-описаний страниц согласно ключевому запросу веб-страницы Каждая страница веб-сайта должна иметь заголовок и МЕТА-описание в соответствии с содержимым страницы. Кроссбраузерная оптимизация сайта Сайт должен корректно открываться в последних актуальных версиях существующих браузеров.

Настройка файлов sitemap.xml Исполнитель выводит карту сайта в отдельный раздел sitemap.xml с указанием существующих страниц для индексации. Добавление «хлебных крошек» Исполнитель выводит в каждый раздел навигационную цепочку («хлебные крошки», англ. Breadcrumbs) с адресом страницы формата: Главная → Раздел → Подраздел → Текущая страница.

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

Настройка ЧПУ адресов страниц в формате domen.ru/arenda-sklada Адрес каждой страницы должен содержать корректное описание для поисковых систем и посетителей на латинице.

Настройка 404 и 303 страниц Настройка корректной выдачи ошибки 404, настройка 303 переадресации на страницы, которые изменили свой адрес. Оптимизация программного кода HTML/CSS/PHP и скриптов Исполнитель выполняет оптимизацию программного кода страниц сайта для повышения скорости загрузки страниц и веб-сайта в целом. При необходимости Исполнитель переносит загрузку .js скриптов в «подвал» сайта, настраивает кеширование страниц и сжатие CSS / HTML.

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

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

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

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

Если контент (фото и видео) не очень, то и сайт будет таким же.

Отдельно стоит уделить внимание качеству фото и видео.

Мы всегда рекомендуем заказать фото и видео съёмку клиентам, если нет презентабельного фото и видео контента для сайта. Что относится к оформлению: оформление кнопок и элементов взаимодействия — ссылки, кликабельные стрелки слайдера, формы заявок и так далее.

Продумайте цветовую гамму и пропишите гарнитуры шрифтов.

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

Кстати, многие клиенты путают понятие оформления и дизайна. Дизайн — это структура страниц от слова design (проектировать).

Дизайн страниц должен содержать ключевые блоки и элементы, которые они содержат.

Дизайн — это логика построения страниц. Итак, что должно содержать в себе хорошее техническое задание, которое обезопасит вас от недопонимания с исполнителем. Вот перечень:

  1. Требования к хостингу.
  2. Требования к дизайну и контенту.
  3. Прототипы страниц.
  4. Структура сайта и страниц.
  5. Требования к вёрстке и работоспособности.
  6. Функциональная часть.
  7. Общая концепция.

Вы можете сами продолжить этот список, ведь каждый проект индивидуальный.

Сайт компании всегда зависит от особенностей самого бизнеса и должен передавать его суть через контент и функциональные элементы. Узнайте также, , который способен повысить прибыль компании и узнаваемость бренда?

Если вам нужен новый сайт, то вы можете создание сайта или технического задания в нашей веб-студии.

Техническое задание на сайт: образец от digital-агентства

Решили заказать сайт (он же лендинг)? Как показывает практика, это не так просто.

Сотни заказчиков, увидев свой готовый сайт, обнаруживают, что он им не подходит: дизайн не тот, расположение хромает, тексты мимо, прикрутили кучу ненужных функций. А дальше – начинаются долгие разборки с разработчиками, по мере которых сроки изготовления, бюджет проекта и градус нервного напряжения растёт до неопределённых масштабов.

Чтобы таких последствий избежать, Вам необходимо техническое задание на разработку сайта.Неважно, кто будет исполнителем сайта – Вы сами, Ваш родственник, фрилансеры за скромную оплату, специализированная компания за огромную сумму денег… Техническое задание на сайт должно быть. Оно станет Вашим щитом, в этот документ Вы, в случае чего, сможете ткнуть пальцем недобросовестному разработчику и потребовать привести Ваш сайт в соответствие с ним.Техническое задание (коротко “ТЗ”) – это документ, который максимально подробно и однозначно отражает требования к Вашему будущему сайту. Сайт создают именно на основе ТЗ.

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

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

На этот вопрос есть только два варианта ответа: заказчик или исполнитель.

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

  • Понять, какой именно сайт Вам нужен;
  • Контролировать разработчика (сроки, объём работ, функционал, переделки и т.д.).
  • Зафиксировать бюджет (иначе Вам потом выставят счёт, мама не горюй);

Цель разработчика:

  • Понять и с первой попытки удовлетворить заявленные Вами пожелания;
  • Избежать бесплатных доработок и корректировок.

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

Поэтому не торопитесь, ведь если у Вас появятся новые идеи по функционалу и дизайну, после подписания техзадания на разработку сайта, то разработчик вправе попросить за них дополнительную плату.Нужен готовый Landing page?Закажите разработкув нашем агентствеСделайте самина конструктореПлюс в том, что добросовестные разработчики сайтов тоже не заинтересованы в появлении разногласий с клиентом, поэтому, скорее всего, сами предложат Вам утвердить и подписать техническое задание для сайта.

И даже сами его составят. В этом нет ничего плохого.

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

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

Если эта графа отсутствует, просто допишите их в конце брифа. Главное не оставлять недосказанности.Ещё не определились, кому доверить создание Вашего сайта? Можно написать техническое задание самому, разослать его нескольким потенциальным исполнителям и сравнить их ценовые предложения.Имейте ввиду, что у Вас получится только основа, набросок технического задания.

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

Если же Вам нужен сразу шаблон для отправки, то просто скачайте его .Пункт технического заданияЧто писать?Пример заполненияБИЗНЕС-ТРЕБОВАНИЯИнформация о компанииНазвание, товары, услуги, род деятельности, дата создания, знаки отличия и достижения, основные конкурентыКомпания “Брандмейстер”. Поставка пожарного оборудования.

Основана в 2018 году. Лауреат премии “Партнёр года”. Конкуренты “ПожСервис”, “ПожАвтоматика”Целевая аудиторияМаксимально подробно опишите людей, которых Вы хотите видеть в роли посетителей Вашего сайта – социально-демографические признаки, привычки, увлечения, географию проживания – всё, что знаете.

И не забудьте продумать, зачем они будут приходить на Ваш сайт(найти полезную информацию, пообщаться, узнать новости и т.д.). Какую их проблемуон сможет решить.Если целевая аудитория большая, её нужно сегментировать и рассказывать о каждом сегменте.Лица, занимающие должность ответственного по пожарной безопасности на крупных предприятиях.Мужчины от 35 до 55 лет.С высшим техническим (преимущественно пожарным) образованием.Проживающие и работающие на юге России.Со средним доходом 35 000 — 50 000 тысяч рублей в месяц.Имеют собственное жильё и личный автомобиль.Семейные, есть дети.Работают по графику Пн-Пт 9:00-18:00.Проблема целевой аудитории: плохое знание нормативных документов по необходимому оснащению предприятий пожарным оборудованием.Решение: благодаря статьям из блога пользователи, не углубляясь в чтение законов и нормативов, поймут, какое оборудование и в каких количествах должно быть на их предприятии.Цели сайтаКакого целевого действия Вы хотите добиться от посетителей сайта – сделать онлайн-заказ, подписаться на рассылку, позвонить к Вам в офис или что-то другое. Если целей несколько – пишите их все.Это очень важный, буквально ключевой пункт, потому что именно целям сайта должен быть подчинен и функционал, и дизайн, и любой контент – всё на сайте.1.

Подписаться на рассылку по нашим акциям и предложениям.2. Запрашивать наш прайс или цены на отдельные позиции при закупке товара.Анализ существующего сайтаСсылка на него и что в нём хорошо, а что плохоСсылка.ruОтсутствие возможности редактирования и обновления информации.Скучный дизайн.Нет форм обратной связи.НЕФУНКЦИОНАЛЬНЫЕ ТРЕБОВАНИЯПредварительная структура сайтаКакие разделы обязательно должны бытьГлавная (о компании, география работы, текущие акции); Каталог; Блог; Новости; Акции; КонтактыПримерная структура страниц Какие элементы должны присутствовать на страницах, как размещатьсяСтрока поиска по сайту; Телефон горячей линии; Диалоговое окно с менеджером; Текущие акции; В боковом меню: список разделов каталога; Форма подписки на рассылкуТребования к дизайну и оформлению Шрифты, цвета, стилистика, наличие/отсутствие незаполненного пространстваСайт в строгом деловом стиле.Корпоративные цвета красный и серый. Красный используется в качестве принта.

Оттенки светло-серого как основной фоновый.Фотографии – насыщенные цветные, иллюстрирующие процесс использования оборудования в деле.Предпочтительные шрифты: Bravo; Yanone Kaffeesatz; Intro Condensed или похожие.Имеющиеся материалы Ссылки на понравившиеся сайты, а также буклеты, журналы, фотографии – что угодно, а может быть у Вас есть готовый бренд-бук.Прилагается отдельным архивом.Минимальное разрешение и устройства отображения В этом пункте укажите, с каких устройств предполагается просматривать сайт – ПК, ноутбуков, смартфонов…Мониторы ПК от 19 до 27 дюймов; Ноутбуки от 15,6 до 17,3 дюйма; Смартфоны от 3,5 до 6 дюймов; Планшеты от 7 до 12 дюймовНужна ли мобильная версия? Да ФУНКЦИОНАЛЬНЫЕ ТРЕБОВАНИЯ Примерный набор модулей (для пользователей) В этом разделе нужно перечислить все функциональные возможности, которые Вы хотите видеть на сайте.

Это может быть корзина, фильтры каталога по разным параметрам, возможность сделать онлайн-заказ, оставить заявку на обратный звонок, подписаться на рассылку и любые другие опции Фильтры каталога по цене, по алфавиту, по производителю.Личный кабинет с историей заказов и просмотров.Автоматическое формирование счёта.Онлайн консультация.Подписка на рассылку.Возможность заказать обратный звонок.Калькулятор стоимости.Возможности администрирования Здесь нужно описать, какие текущие изменения Вы (или Ваш сотрудник) планируете самостоятельно вносить в работу будущего сайта, не прибегая к помощи разработчика.После завершения работы, попросите научить Вас производить эти изменения. Возможность создания/удаления/редактирования карточки товара, акций, новостей.Возможность редактирования контактов, добавления/удаления дополнительных офисов.Подключение платёжных систем и служб доставок Желательно указать, каких именно.Нужна рекомендация разработчикаИнтеграция с CRM, 1С и другими программами Интеграция с Мегапланом и 1С.ОБЗОР ИНТЕРНЕТ-РЕСУРСОВ Обзор Лучше всего делать в формате: ссылка – что именно по этой ссылке нравится/категорически не нравитсяadme.ru— Развертывание менюtobiafran.com — Анимация загрузкиanotherstate.co — ШрифтыДОПОЛНИТЕЛЬНО Вопросы к разработчику Если у Вас есть, о чём спросить предполагаемого исполнителя Вашего сайта, лучше задать их письменно и получить ответ в той же форме.Дополнительные пожелания В этот пункт можно включить, если осталось что-то, не вошедшее ни в один предыдущий раздел ТЗ.Этот пункт является неотъемлемой частью технического задания на создание сайта, хотя фактически он к нему не относится.

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

А так как этот процесс занимает не один день, то логично, что компании, которые делают проектирование до договора, просто показывают Вам шаблон в формате “как у всех”.И да, сам прототип можно сделать с помощью обычных листов бумаги и цветных фломастеров. Каждый лист – отдельная страница сайта (или экран одностраничника).

Либо можно воспользоваться простыми офисными программами вроде Microsoft World или Microsoft Excel.Лично мы при используем специальные программные продукты.С их помощью можно быстро и легко составлять проекты даже сложных сайтов – это, например, Balsamiq. Впрочем, как мы делаем весь прототип уже рассказывали в статье.По теме: .

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

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

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

Или обратиться в Google за помощью. Для этого открывайте кртинки по запросу “цветовые подборки” или вводите название цвета, который хотите взять за основу, а далее выбирайте понравившиеся и прикрепляйте к Вашему тз для дизайнера.Не следует забывать, что шрифт играет не последнюю роль в восприятии текста. Пишите конкретные названия предпочтительных шрифтов.Только не смотрите коллекцию шрифт Microsoft World, их уже на сто рядов все используют.

Лучше воспользуйтесь библиотеками шрифтов в интернете, например, .Мы с Вами уже разобрались как правильно составить тз для разработки сайта, но даже глядя на удачный пример можно совершить много ошибок.Поэтому выделяю самые основные из списка, те, что у Вас с вероятностью в 80% будут, если это Ваша первая разработка тз.1.

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

Дедлайн проекта можно включить в техническое задание отдельным пунктом или включить прямо в шапку бланка.Особо педантичные заказчики выставляют сроки разработки по каждому разделу сайта.2. Утрата данных доступаКак правило, на разработчика прицепом ложится регистрация доменного имени и хостинга для сайта. А дальше в 9 из 10 случаев эти данные просто теряются: разработчику они больше не нужны, а заказчик про них благополучно забывает.И в один прекрасный день сайт просто перестаёт работать, потому что вовремя не продлили хостинг или доменное имя.

Адреса сайта так и вовсе можно лишиться.Поэтому запомните, что данные доступа к хостингу и доменному имени – это Ваши личные данные.Распечатайте их и бережно храните вместе с важными документами. А лучше после разработки поменяйте все доступы, ведь всякое бывает, в той компании тоже существует человеческий фактор.3.

Отсутствие наглядностиПринцип “лучше 1 раз увидеть, чем 100 раз услышать” работает здесь на полную. В одни и те же слова заказчик и исполнитель могут вкладывать разный смысл.И наверное эта ошибка вообще должна стоять на первом месте нашего хит-парада, так как такая картина происходит постоянно: “Хочу абстракцию”, – пишет заказчик, подразумевая нечто подобное (пример на картинке ниже) “Ок, держите”, – говорит разработчик.

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

Каждый прав, никто не виноват.За чей счёт переделывать – непонятно.

А приложи заказчик к техническому заданию картинку с образцом, ничего такого бы не случилось.4. Качественные прилагательныеВспоминаем разряды прилагательных из школьной программы… Шучу � Если слово обозначает качество, которое может проявляться сильнее или слабее, то оно смертельно опасно для технического задания.Например, красивый (кто-то может быть ещё красивее или страшнее), умный, современный и т.п. Это слова-табу. Их нельзя однозначно понять.

У каждого субъективное представление о красоте и современности.Только конкретика.

Например, “На два тона светлее”, “Смещаем на 5 сантиметров” или “Острые углы у кнопки”.5. “На усмотрение разработчика”Об этот коварный пункт спотыкаются многие. Заполняя бриф или составляя тз на дизайн сайта, не оставляйте в нём пробелов.

Вы должны понимать, что “На усмотрение разработчика” означает “что хочу, то и ворочу” или же “Всё, что не оговорено, выполняется на усмотрение исполнителя”. И поверьте, это не просто лазейка, а целое окно в Европу для разработчика.И конечно, так происходит не всегда. Если Вам попался грамотный специалист, то можно не волноваться за результат.Но тут возникает другая проблема, он может сделать реально как надо, а Вам не понравится чисто субъективно.

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

И увы, это нормально, ведь это Вам не кораблик из папье-маше сделать.Но при этом, даже составив и утвердив максимально подробное техническое задание, Вы не полностью застрахованы от разницы между ожиданием и полученным результатом.Поэтому не забывайте о промежуточном контроле. Не стесняйтесь по ходу работы лишний раз попросить отправить Вам на согласование готовые элементы, чтобы убедиться, что всё выполняется в соответствии с ТЗ. Лайфхак. Если Вы решили делать лендинг самостоятельно, то я рекомендую – , , , .

6 советов как составить ТЗ для дизайнера

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

Для оформления сайта или создания логотипа необходимо придерживаться четких правил, назначенных заказчиком (техническое задание). Сегодня мы поговорим о том, как правильно подойти к разработке технического задания для дизайнера. 1. Начинать с формы. Для начала необходимо конкретизировать над чем именно будет идти работа: лендинг, баннер, логотип или сайт.

Стоит рассказать о всех задачах работы– так дизайнер более четко будет понимать в каком ключе ему стоит мыслить, а его труд принесет ощутимый результат. 2. Расскажите исполнителю о вашем бизнесе/ компании. Проинформируйте дизайнера о том, что вы делаете, каких цели ваш проект преследует.

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

В качестве примера возьмем разработку рекламного баннера нового семейного ресторана. Заказчику стоит добавить информацию: • Особенности ресторана; • Атмосфера заведения; • Меню ресторана; • Преимущества бизнеса среди конкурентов.

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

В нашем случае это семейные пары с детьми или без, возрастом от 30 до 50 лет. Широкий охват аудитории. 4. Покажите уже существующие примеры.

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

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

5. Договоритесь о сроках выполнения работы. У каждого работника разные возможности и способности.

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

6. Соблюдайте субординацию и придерживайтесь взаимоуважения.

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

Желательно имейте несколько способов связаться с дизайнером. Оставьте в ТЗ вашу страницу в социальной сети/ напишите адрес электронной почты.

Последние новости по теме статьи

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

Поэтому, для вас работают бесплатные эксперты-консультанты!

Расскажите о вашей проблеме, и мы поможем ее решить! Задайте вопрос прямо сейчас!

  • Анонимно
  • Профессионально

Задайте вопрос нашему юристу!

Расскажите о вашей проблеме и мы поможем ее решить!

+