+7(499)-938-42-58 Москва
8(800)-333-37-98 Горячая линия

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

Содержание

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

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

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

  • Контактам. Номера телефонов должны быть кликабельными – при нажатии должна открываться панель ввода номера с уже набранным номером и кнопкой вызова.
  • Меню. Опишите, как оно должно открываться: выезжать сбоку, сверху и т. д.
  • Не должно быть горизонтальной прокрутки на страницах сайта (это само собой разумеется, но я всё же решила напомнить).

Ниже представлены макеты страниц для отображения сайта на мобильных устройствах (адаптивная вёрстка).

Введение

Внимание Основные требования:– меню-бургер – раскрывается вниз при касании значка меню: – сайдбар опускаем под основной контент: – все элементы в футере находятся друг под другом: страница Все элементы выводятся друг под другом:

  • краткое описание;
  • форма поиска;
  • подробное описание;
  • списки магазинов, разделённые по категориям.

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

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

P.S.

Тз на создание образовательного сайта

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

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

Техническое задание на создание официального сайта

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

Десктопная версия Общая информация Ширина сайта – 1140 px (пример –vizaua.com).Шапка и футер растягиваются по ширине экрана и одинаковы для всех страниц.

Семейство шрифтов: Cambria (предпочтительно), Century, Georgia. Можно указать и другие популярные шрифты с засечками.Размеры шрифтов (для Cambria):Текст под логотипом в шапке – 15pxСсылки в шапке – 14pxТекст в футере – 16px страница – home.

png Текст над строкой поиска – 25px Текст под строкой поиска – 14px Описание элементов: 1, 2 – цифры с реальным числом магазинов и отзывов.

Как составить грамотное техзадание на разработку сайта

Обратная связь Данные для формы ФИО Как правило ФИО студента Группа Номер группы (не обязательное поле) Телефон Не обязательно поле Электронная почта Студент указывает адрес для связи Текст сообщения Свободная формулировка сообщения Кнопка «Отправить» Данные формы приходят на административный адрес электронной почты 2.2.

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


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

Техническое задание (тз) на разработку сайта

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

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

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

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

Как написать тз на разработку сайта?

Поиск в Интернете v Виртуальный тур по ***** v Партнеры ***** Ø Региональные Ø Российские Ø Международные v Студентам и о студентах Ø Ассоциации студентов § Группы выпуска 2004 года · Специальность «Документоведение» · …… § Группы выпуска 2003 года Ø Справочная служба для студентов «Вопрос-ответ» Ø Объединенный студенческий совет (сайт ведут студенты) § Персональные страницы студентов § Студенческий профком Базы данных v Электронный каталог библиотеки ***** v Виртуальная библиотека Ø Периодические издания Ø Научные издания Ø Научно-популярные издания Ø Учебные издания Ø Справочные издания Ø Издания для досуга Ø Литературно-художественные издания , , , ОСОБЕННОСТИ ПРОЕКТИРОВАНИЯ И СОЗДАНИЯ WEB-САЙТОВ УЧЕБНЫХ ЗАВЕДЕНИЙ Воронежский региональный центр ФИО, Воронеж / Всероссийская научно-практическая конференция Российская школа и Интернет’2002 Опыт использования Интернет в образовании.

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

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

Если говорить о дизайне CRM, то главная его задача – не мешать пользователю. На мой взгляд, здесь не нужно придумывать велосипед – можно взять готовый шаблон и использовать его.

  1. Проработка узких моментов.
    Если в вашем проекте есть сложные механизмы, то лучше проработать их на этапе ТЗ. Это снижает риски проекта. В случае если не найдется приемлемого решения, то лучше изменить что-то на этапе ТЗ, а не на этапе разработки системы. Почему? Это дешевле. Чем раньше обнаружена ошибка, тем дешевле ее исправить. Самые дорогие ошибки – на этапе эксплуатации. Пример: автоматическая генерация пароля. Вы сделали в начале так, что пароль генерируется слишком простой.

Служебная страница – page.png Размер шрифта – 15pxРекламные блоки не выводим.В меню справа выводим только поиск и ссылки на категории. Отзывы не выводим. 404 ошибка – 404.

png 404 – шрифт 80pxТекст под ним – 20pxНаклонный текст – 15px Ссылки навигации:– на главную – 16px– на служебные страницы– 14px Активные элементы:Все ссылки подчёркнутые, убираем подчёркивание при наведении, цвет ссылки на несколько оттенков темнее (на усмотрение исполнителя).Цвет кнопки #ddd, при наведении появляется курсор в виде руки.

Рекомендую делать отдельные макеты и описывать поведение всех ссылок, кнопок, выпадающих меню, всплывающих окон. Мобильная вёрстка Сейчас лучше ставить мобильную вёрстку главной и от неё «плясать».

Не зря же вся справка и блогМы говорим вам об этом с 2014 года (статьи «3 способа быстро адаптировать сайт под мобильные устройства» и «Мобильная адаптация сайта — ответы на вопросы» ).В этом случае необходимо определить область действия ТЗ при создании торговой площадки.

Делайте ТЗ только на какую-то конкретную часть системы, например, на блок «База клиентов» или процесс «Обработка заказа от клиента». При этом желательно иметь план внедрения модулей системы. Например, в этом году мы внедрим одни модули, а в следующем – такие-то модули.

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

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

Организация информации Стандартные функции Системы Управления содержимым информационного ресурса позволяют в полном объеме редактировать текстовое и графическое содержимое информационного блока.

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

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

Это обусловлено тем, что данный блок обеспечивает работоспособность сайта и образует основу его дизайна. Поэтому вмешательство пользователя, не имеющего специальных знаний в области интернет-программирования в редактирование этого блока недопустимо. 1.9 Карта сайта 1. 2. Каталог курсов 2.1 ????? 2.2 ????? 3.

Источник: http://pbcns.ru/kak-napisat-tehnicheskogo-zadaniya-na-razrabotku-sajta-obrazovatelnoj-organizatsii/

Техническое задание (тз) на разработку сайта

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

От автора: Как написать техническое задание (тз) на разработку сайта? Тема достаточно обширная, и в рамках одной заметки ее сложно разобрать на все 100% (если вообще это возможно). Но общие положения, о том что нужно учесть и на что следует обратить сое внимание при составлении тз веб-сайта, я постараюсь изложить достаточно подробно.

Итак, техническое задание на разработку сайта

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

Давайте проанализируем такой пример:

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

Что мы имеем. Исполнитель пункт тз выполнил, а вы хотели совсем иное. Вроде все в соответствии, никто не виноват, до конфликта не дошло, но самое главное потеряны время и деньги.

Это пример всего-то банального календаря.

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

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

Из каких пунктов обычно состоит техническое задание?

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

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

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

Поехали по пунктам.

Описание

Здесь можно в пару предложений написать о предприятии, чем занимается. Что – то типа вступление сделать.

Далее тут указываем:

для кого — целевую аудиторию:

потенциальные покупатели

продавцы продукции (магазины, интернет-магазины)

сервисные центры

партнеры (фирмы)

потребители продукции (тот, кто уже купил)

Для чего нужен сайт:

Для повышения имиджа компании

Для увеличения продаж

Для удобства клиентов

Тип:

Корпоративный

Сайт – визитка

Интернет магазин

Языковые версии:

Сайт должен решать какие-то задачи. Соответственно далее двигаемся по целям и задачам.

Цели и задачи

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

Потенциальные покупатели продукции

Цель: привлечь больше покупателей и убедить сделать первую покупку, помочь сделать выбор.

Необходимо решить задачи:

Дать качественную, исчерпывающую информацию о продукции, дополнительных услугах, гарантии, сервисе, методах выбора.

Дать информацию о салонах-магазинах

Дать информацию о розничной торговой сети

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

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

Теперь перечисляем модули.

Функционал сайта

Для того чтобы перечислить функционал, нужно решить что ему необходимо:

Нужны ли новости

Нужен ли рекламный блок

Нужна ли регистрация

Нужен ли закрытый раздел (только для зарегистрированных пользователей)

Нужна ли форма обратной связи

Нужен ли скрипт рассылки

И т.д. и т.п.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

После того, как все это описали, мы подбираемся к самому главному и интересному. Конечно, вся проделанная выше работа очень важна, но теперь становиться еще «жарче».

Описание функционала

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

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

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

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

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

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

Далее может идти вкладка «новости». Подпункты могут быть «события», «акции», «новое».

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

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

о компании

история компании

контакты

отзывы

новости

продукция

каталог продукции

релизы

отзывы о продукции

сервис

служба сервиса

гарантийное обслуживание

послегарантийное обслуживание

потребителю

покупка и доставка

пользование

о сервисе

магазинам и интернет магазинам

фотографии продукции

Часто задаваемые вопросы

сервисным центрам

Как стать сервисным центром

Часто задаваемые вопросы

партнерам

приглашение к сотрудничеству

Часто задаваемые вопросы

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

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

Главное теперь описать логику работы.

Логика работы

Я описывать буду исходя из рисунка выше.

Верхняя часть (header) остается неизменной на каждой странице. Новостная лента видна только на главной странице.

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

Здесь же, под подпунктами слева отображаем данные для связи с он-лайн консультантами (Skype, ICQ). Блок акции и релизы остаются на каждой странице. Подвал (футер) отображается один и тот же на каждой странице.

Примерно так описывается общая логика работы.

Теперь в нашем тз на разработку сайта, подробно описываем каждый обозначенный блок сайта. Например «Новостная лента».

«Новостная лента» из 10-ти последних новостей. Каждая новость должна состоять из заголовка новости, даты публикации, краткого начала новости (4-5 строк) и ссылки «читать полностью». При нажатии на ссылку «читать полностью» попадаем на страницу новостей. Новость, на которую попали, отображается на месте основного содержимого.

Включает также заголовок новости, дату публикации. Слева так же отображается новостная лента. Новости за прошлые месяцы и года попадают в архив. То есть под новостями за текущий месяц отображаем «архив за (такой-то месяц или год)».

При нажатии на ссылку «архив за (такой-то месяц или год)» вниз выпадает список новостей за соответствующий месяц/год.

Примерно так описываем работу каждого блока. Не забываем про случай с календарем. И самое главное нужно расписать работу каталога товара. Здесь я даю вам задание: попробуйте продумать и описать, как будет работать каталог. Свои варианты присылайте на e-mail. Лучший мы опубликуем.

Что еще должно быть? Неплохо было бы указать совместимость.

Совместимость

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

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

Заключение

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

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

И не забывайте про задание!

Бернацкий Андрей

E-mail: contact@webformyself.com

“Киберсант-вебмастер” — самый полный курс по сайтостроению в рунете!

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Источник: https://webformyself.com/kak-napisat-tz-na-razrabotku-sajta/

Тз на создание сайта: как сформулировать задачу исполнителю?

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

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

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

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

При этом заказчику необходимо убедиться, что все его “хотелки” зафиксированы в тех задании.

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

Из чего состоит ТЗ?

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

Общие сведения (описание)

Здесь указываются:

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

Этапы и сроки реализации проекта. Очень важный момент, как правило, календарный план по всем этапам работ составляют в самом конце. Эта часть даёт понимание, что и когда будет делаться. Например (с указанием дат):

  • Подготовительный этап;
  • Проработка концепции сайта;
  • Проектирование;
  • Создание дизайн-макета;
  • Разработка дизайна страниц;
  • Вёрстка;
  • Программирование;
  • Наполнение контентом;
  • SEO-оптимизация;
  • Тестирование;
  • Запуск.

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

Назначение и цели

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

Назначение сайта. Каких целей созданием сайта необходимо достичь? Для чего он нужен, какие задачи решает?

  • Реклама и привлечение новых клиентов;
  • Поддержка заказчиков и партнёров;
  • Демонстрация выполненных работ;
  • Ознакомление со списком услуг;
  • Создание и поддержание имиджа компании.

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

Целевая аудитория. Кто будет пользоваться сайтом, для кого он создаётся?

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

Требования

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

Тип. К какой категории принадлежит веб-ресурс?

  • Посадочная страница;
  • Сайт-визитка;
  • Корпоративный сайт;
  • Информационный портал;
  • Интернет-магазин.

Требования к оформлению. Они могут быть следующего вида:

  • Сайт должен быть минималистичным и при этом отражать род деятельности компании.
  • Основные цвета: зелёный и белый, по брендбуку или на усмотрение дизайнера.
  • В оформлении нельзя использовать анимацию, всплывающие окна, Flash-элементы, дизайнерские излишества.
  • Нельзя использовать шрифты с засечками (можно применять стандартные: Verdana, Arial, Tahoma и т. д.). Кегль должен обеспечивать максимальное удобство чтения (12-16 пт.).

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

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

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

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

  • Русский;
  • Английский;
  • Эсперанто.

Требования к совместимости.

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

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

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

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

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

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

в дальнейшем это поставит в зависимость от исполнителя.

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

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

  • Копирайтинг
  • Рерайтинг
  • SEO-коперайтинг
  • Корректура
  • Транскрибация
  • Контент-менеджмент
  • Контент-маркетинг

Сделайте и краткое описание каждой страницы, дайте определения.

Например, что подразумевается под страницей «Контакты»? Она должна содержать адрес, телефон и электронную почту в текстовом виде? Или там должна присутствовать форма обратной связи? А может, нужно встроить код Яндекс Карт? Или же на странице контактов должно размещаться всё перечисленное, да ещё и ссылки на представительства в социальных сетях?

Желательно контент или хотя бы его наброски приготовить еще до начала работ с подрядчиком. Это будет способствовать более эффективной коммуникации.

Дополнительные требования. Всё, что не вошло в другие пункты раздела.

Описание разделов сайта

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

страница. Формулировка задачи может быть в следующем виде.

Основная часть главной страницы должна быть выполнена в виде Landing Page. На ней сверху вниз должны располагаться следующие элементы:

  • Шапка — логотип, название фирмы;
  • Меню навигации;
  • Информация об акциях и скидках;
  • Кнопка заказа;
  • Рекламный текст;
  • Блок с пятью лучшими работами и ссылкой на раздел портфолио;
  • Отзывы клиентов;
  • Штат студии;
  • Блок партнёров компании;
  • Информация о тарифах;
  • Дублирующий блок скидок и кнопка заказа;
  • Карта ссылок;
  • Кнопки социальных сетей.

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

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

Сюда же можно поместить схемы (или схему) страниц.

Кстати, эти прототипы сделаны с помощью программы Balsamiq Mockups, который довольно прост в освоении.

Описание функциональной части

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

Источник: https://www.seostop.ru/blog/sozdanie-saita/tz.html

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

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

О чём вы думаете, когда видите по городу или на сайтах (в рекламных блоках) баннеры с заголовками: «Сайт за 500 грн.», «Сайт за 1000 руб.»?

Я, как разработчик, долго думала — развод! Но количество подобных объявлений наводит на мысли:

  • А возможно ли такое вообще?
  • Какое качество будет у сайта в таком случае?
  • Можно ли будет его потом продвигать?
  • Займёт ли он достойные позиции?
  • Будет ли он удобным и будет ли возможность его редактировать?

Конечно, порой приемлем и простой набор HTML-файлов: если страниц немного, их редко меняют из-за тематики и владелец сайта (или контент-менеджер) знает HTML.

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

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

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

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

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

Итак, образец технического задания на разработку небольшого сайта отзовика.

Тз по разработке сайта

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

Не стесняйтесь и не ленитесь приводить примеры сайтов, на которых вам нравится тот или иной функционал или элементы дизайна, вёрстка, эффекты. Но! не просто давайте ссылки, а прикрепляйте скриншоты.

Вы можете составить ТЗ, а владелец сайта (который вы приведёте в пример) к тому моменту, когда ТЗ перейдёт к исполнителю, поменяет вёрстку.

Тогда вам снова придётся искать пример и объяснять, что вы имели в виду.

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

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

Десктопная версия

Общая информация

Ширина сайта – 1140 px (пример –vizaua.com).Шапка и футер растягиваются по ширине экрана и одинаковы для всех страниц.Семейство шрифтов: Cambria (предпочтительно), Century, Georgia. Можно указать и другие популярные шрифты с засечками.Размеры шрифтов (для Cambria):Текст под логотипом в шапке – 15pxСсылки в шапке – 14px

Текст в футере – 16px

страница – home.png

Текст над строкой поиска – 25px

Текст под строкой поиска – 14px

Описание элементов:

1, 2 – цифры с реальным числом магазинов и отзывов. Можно пересчитывать один раз в 24 часа.3 – категории. Располагаем вручную в таком порядке, как на макете.4 – ссылки на магазины. Рядом с названием магазина выводим число отзывов. Если отзывов ещё нет, ничего не выводим.

Под каждой категорией выводим 6 самых популярных по количеству отзывов магазинов. Если в категории есть ещё магазины, на неё ведёт ссылка «Ещё N», где N – число магазинов. Если больше магазинов нет, на категорию ведёт ссылка «Показать всё».

5 – список низкопопулярных категорий.

Выводим их тут.

Страница с описанием магазина и отзывами – shop-page.png

Заголовок H1 – 30px
Заголовок H2 – 22px

Описание элементов:1, 2, 3 – место под рекламные блоки. Нужно отметить это место при вёрстке и закрыть к индексации.4 – контент страницы.

Дизайн меняется таким образом, чтобы все изменения можно было внести глобально, без редактирования каждой страницы по отдельности:– добавлен серый фон контентного блока;– добавлен белый border у таблиц (по умолчанию, вроде, нигде не прописывался);— добавлено место под рекламный блок над отзывами.

5 – заголовок формы. Нужно проставить «».

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

Страница категории – category-archieve.png

Ссылки на магазины – 18 px, цвет # 336699
Текст в анонсах – 14px

Описание элементов:1,2 – место под рекламные блоки.3 – контентная часть. Нужно удалить все описания категорий (тексты сохранить в отдельном .doc-файле и загрузить этот файл на сервер).

4 – ссылка на отзывы. Во всех шаблонах ТЗ слово «комментарии» меняем на «отзывы».

Служебная страница – page.png

Размер шрифта – 15pxРекламные блоки не выводим.

В меню справа выводим только поиск и ссылки на категории. Отзывы не выводим.

404 ошибка – 404.png

404 – шрифт 80pxТекст под ним – 20px

Наклонный текст – 15px

Ссылки навигации:– на главную – 16px

– на служебные страницы– 14px

Активные элементы:Все ссылки подчёркнутые, убираем подчёркивание при наведении, цвет ссылки на несколько оттенков темнее (на усмотрение исполнителя).

Цвет кнопки #ddd, при наведении появляется курсор в виде руки.

Рекомендую делать отдельные макеты и описывать поведение всех ссылок, кнопок, выпадающих меню, всплывающих окон.

Мобильная вёрстка

Сейчас лучше ставить мобильную вёрстку главной и от неё «плясать». Не зря же вся справка и блог Google пестрят «Mobile first» (сначала мобильные или мобильность). Мы говорим вам об этом с 2014 года (статьи «3 способа быстро адаптировать сайт под мобильные устройства» и «Мобильная адаптация сайта — ответы на вопросы» ).

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

  • Контактам. Номера телефонов должны быть кликабельными – при нажатии должна открываться панель ввода номера с уже набранным номером и кнопкой вызова.
  • Меню. Опишите, как оно должно открываться: выезжать сбоку, сверху и т. д.
  • Не должно быть горизонтальной прокрутки на страницах сайта (это само собой разумеется, но я всё же решила напомнить).

Ниже представлены макеты страниц для отображения сайта на мобильных устройствах (адаптивная вёрстка).

Основные требования:
– меню-бургер – раскрывается вниз при касании значка меню:

– сайдбар опускаем под основной контент:

– все элементы в футере находятся друг под другом:

страница

Все элементы выводятся друг под другом:

  • краткое описание;
  • форма поиска;
  • подробное описание;
  • списки магазинов, разделённые по категориям.

На этом примере, кстати, действительно всё предельно ясно, можно обойтись без описания.

Страница категории

Страница магазина

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

Информационная страница

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

P.S.

Эта статья была Вам полезной?

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

Источник: https://siteclinic.ru/blog/technical-aspects/tz-na-razrabotku-sajta-primer/

Поделиться:
Нет комментариев

    Добавить комментарий

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.