Техническое задание на изготовление сайта пример

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

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

Что должно содержать техническое задание на разработку сайта?

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

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

3. Тип сайта. То есть указать, это будет сайт-визитка, промосайт, интернет-магазин, портал, каталог, блог, форум, инфосайт, корпоративный сайт или landing page (читать, чем отличаются эти типы сайтов) .

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

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

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

6. Дизайн. Этот пункт во многом перекликается со структурой, точнее ее визуализацией. Здесь требуется указать «декоративные» элементы, которые должны присутствовать на сайте: слайдер, карусель, всплывающие окна, баннеры, как ведет себя меню при навигации и пр. Цветовая гамма дизайна во многом определяется логотипом сайта, но можно вносить корректировки как тоновые, так и дополнять дизайн другими цветами.

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

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

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

Именно в этой пункте описывается основная работа программистов.

9. Описание внутренних страниц сайта. Если в пункте «структура сайта» требовалось только перечислить все требуемые типы страниц, то здесь необходимо дать им полное описание как по дизайну, так и по функциональности.

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

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

12. Размещение сайта на хостинге. Большинство фирм при разработке сайта размещают его файлы и базы данных сначала на тестовом хостинге и только после согласования всех доработок и завершения проекта, сайт переносится на приобретенное доменное имя и хостинг. Хостинг выбирается заказчиком, поэтому он должен удовлетворять требованиям, которые озвучивает разработчик, исходя из использованных при разработке инструментов а также предположительной нагрузки на сайт. Однако никто не застрахован от возможных сбоев, поэтому в данном пункте технического задания на разработку сайта стоит оговорить возможность техподдержки сайта в работе. Если поддержка требуется постоянная, то необходимо описать перечень работ, которые в нее будут входить. В зависимости от этого определяется сумма на поддержку, будет ли это ежемесячная абонентская плата или разовые платежи.

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

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

+375 (17) 2-220-220
+375 (17) 2-220-120
+375 (29) 3-073-545
+375 (29) 8-073-375

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

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

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

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

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

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

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

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

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

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

Техническое задание на сайт содержит ряд типовых разделов:

• Общее описание проекта;
• Цели и задачи;
• Функции;
• Глоссарий терминов;
• Данные и списки;
• Описание страниц;
• Технические требования;
• Наполнение сайта;
• Сдача проекта.

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

Цели и задачи. Основная цель коммерческих сайтов – получение прибыли. Эту цель нужно конкретизировать. Как именно будет достигаться получение прибыли? Для интернет-магазина – это онлайн-продажи, для лендинга – сбор заявок, для доски объявление – посредничество между клиентом и исполнителем.

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

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

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

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

В интернет-магазинах используются и другие списки. Например, «Новинки». И здесь тоже возникают вопросы: на основе какого признака выбираются товары в данный список? По дате добавления на сайт? По дате производства? Добавляются вручную? Ответы на вопросы нужно прописывать в задании.

Описания страниц. Этот раздел содержит краткие описания страниц: главная страница содержит рекламный слайдер, список товаров «Новинки», текст о компании и т.д. Дополнит этот раздел можно макетами страниц.

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

Наполнение сайта. На этапе составления ТЗ нужно определить, кто будет заполнять сайт контентом. Это может сделать исполнитель или заказчик. Если заполнением сайта занимается исполнитель – нужно прописать: кто именно готовит контент, объем работы.

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

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

Техническое задание на разработку сайта: пример, образец и требования

Техническое задание на разработку сайта: пример, образец и требования

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

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

Для чего нужно техническое задание

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

Кстати, мы занимаемся разработкой сайтов!

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

1. Абсолютно неинформативны.
2. Могут трактоваться по-разному.

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

Подробное ТЗ с объяснением каждой детали не оставит места для субъективной оценки.

• Экономит время и бюджет. Этот пункт вытекает из предыдущего — постоянные правки отнимают драгоценное время, а иногда требуют доплаты, если задача описана в общих чертах и может трактоваться по-разному.
• Даёт эффективный результат. Работа над техническим заданием позволяет увидеть задачу со стороны и лучше понять её. Это понимание, в свою очередь, позволяет чётче определить необходимую функциональность.
• Гарантирует результат. Если согласованное ТЗ конкретно и объективно описывает задачу, исполнитель обязан следовать ему и любые несоответствия корректировать бесплатно.

Как видите, этот этап подготовки имеет колоссальное значение, поэтому им не стоит пренебрегать.

Кто составляет техническое задание

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

Если задание путанное, наполнено туманными объяснениями с минимальной конкретикой, это повод задуматься о профессионализме выбранной компании. Это спасёт вас от бесперспективного сотрудничества.

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

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

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

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

Формат и структура ТЗ на разработку сайта могут варьироваться, но есть несколько общих правил оформления. Им стоит следовать — это упрощает и написание, и трактование, и, в последующем, разработку сайта.

Формат технического задания

Документ может создаваться в любом текстовом редакторе. Наиболее популярными являются Microsoft Word и Google Docs. Особенно удобно работать во втором сервисе — доступ к просмотру и редактированию осуществляется по ссылке, поэтому можно в любой момент создать примечание или внести правку.

Из общих правил оформления можно выделить:

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

В любом случае главное — удобство для обеих сторон.

Структура и объём технического задания

Чёткого регламента на объем технического задания на разработку сайта нет: это показатель зависит от типа проекта, его сложности и масштабов. А вот структура примерно одинакова во всех случаях.

1. Введение. В вводной разделе содержится основная информация о сайте и его назначении: заказчик знакомиться исполнителя с проектом.
2. Назначение. Здесь стоит описать задачи, которые должен выполнять сайт: корпоративный — рассказывать о компании, лендинг — увеличивать конверсии, интернет-магазин — продавать. На первый взгляд кажется, что этот пункт очевиден и не требует отдельного раздела, но это не так.
3. Структура. Здесь указывается количество разделов и название каждого из них, дополнительно — короткое описание.
4. Содержание разделов и страниц. Большая часть ТЗ отводится под подробное описание каждой страницы будущего сайта.
5. Технические требования. В этой части нужно рассказать, как должна работать готовая площадка: будет ли у неё версия под мобильные устройства, под какие браузеры она создаётся и так далее.
6. Сценарии использования — кто, как и зачем будет заходить на сайт.
7. Контент. Этот пункт носит опциональный характер: можно уточнить, кто и когда будет заниматься наполнением страниц, но это не обязательно.
8. Условия. Это завершающий раздел, в котором указываются сроки подготовки и сдачи проекта, в том числе время, выделенное на каждый этап.

Есть ли специальные требования для написания ТЗ

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

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

— Нет: “Сайт работает быстро”.

— Да: “Страница загружается за n-секунд при стабильном подключении к сети”.

Второй совет. Отдавайте предпочтение развёрнутым описаниям.

— Нет: “Поиск должен быть удобным”.

— Да: “Поиск по сайту должен содержать n-фильтров и сортировку выдачи по n-критериям”.

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

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

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

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

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

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

Пример: Техническое задание на разработку сайта интернет-магазина косметики.

В документе содержится техническое задание для разработки сайта интернет-магазина магазина косметики N. Бренд занимает нишу 12 лет и специализируется на офлайн-продажах. Продукция ориентирована на молодых людей 16-25 лет, компания предлагает линейки для аллергиков и веганов.

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

3. СТРУКТУРА И ОПИСАНИЕ

На сайте будет 9 разделов:

• Главная страница;
• О магазине;
• Каталог (подразделы: тональная основа, пудра, тушь для ресниц, тени для век, помады, румяна, кисти);
• Карточка товара;
• Корзина;
• Оформление заказа;
• Доставка и оплата;
• Блог.
• Карточка блога.

3.1. Главная страница:

• Шапка сайта с названием компании и логотипом бренда;
• Контентный блок для описания акций;
• Карта сайта;
• Корзина;
• Блоки разделов (Распродажа, Новая коллекция, Для веганов, Гипоаллергенно);
• Партнёры;
• Социальные сети;
• Копирайт, контактные данные.

3.2 Общее оформление разделов:

• Шапка;
• Корзина;
• Поиск по сайту, фильтры и сортировка;
• Копирайт, контактные данные.

4. РАЗДЕЛЫ И СТРАНИЦЫ

4.1 Главная страница:

Шапка главной страницы — обложка с продукцией бренда, название и логотип. Карта сайта расположена под шапкой в одну строку. Ниже:

• Строка поиска;
• Корзина;
• Фильтры поиска и сортировка;
• Блок с акциями, текст на фоне изображения;
• Блок с новыми коллекциями, текст на фоне изображения;
• Блок этичной косметики с кнопкой “перейти” для перехода в раздел;
• Блок с гипоаллергенной косметикой с кнопкой “перейти” для перехода в раздел;
• Графические блоки с логотипами партнёров;
• Логотипы с ссылками на социальные сети;
• Нижняя панель с копирайтом (слева) и контактными данными (справа).

Страница оформляется по типовому шаблону: шапка и текстовый блок с описанием компании.

• Строка поиска;
• Корзина;
• Фильтры поиска и сортировка;
• Блок этичной косметики с кнопкой “перейти” для перехода в раздел;
• Блок с гипоаллергенной косметикой с кнопкой “перейти” для перехода в раздел;
• Блоки для каждого подраздела;
• Логотипы с ссылками на социальные сети;
• Нижняя панель с копирайтом (слева) и контактными данными (справа).

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

• Строка поиска;
• Корзина;
• Фильтры поиска и сортировка;
• Позиции;
• Список страниц с возможностью вернуться на первую и перейти на последнюю;
• Логотипы с ссылками на социальные сети;
• Нижняя панель с копирайтом (слева) и контактными данными (справа).

4.6 Карточка товара:

• Строка поиска;
• Корзина;
• Фильтры поиска и сортировка;
• Изображение товара слева;
• Краткое описание справа;
• Выбор модели;
• Характеристики;
• Логотипы с ссылками на социальные сети;
• Нижняя панель с копирайтом (слева) и контактными данными (справа).

5. ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ

Перечень технических требований:

1. Корректное отображение в Google Chrome, Safari;
2. Оптимизированная мобильная версия;
3. Мета-теги для продвижения в Google и Yandex;
4. Базовое разрешение десктопной версии 1024×768.

Сайт будет использоваться:

1. Для продаж;
2. Для изучения ассортимента и составления списка желаний;
3. Для получения информации о продукции бренда.

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

Общий срок создания интернет-магазина составляет 60 дней. Из них:

1. 20 — создание макетов и шаблонов;
2. 30 — программирование и вёрстка;
3. 10 — создание контента.

8.1 Этапы создания сайта:

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

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

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

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

О чём вы думаете, когда видите по городу или на сайтах (в рекламных блоках) баннеры с заголовками: «Сайт за 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,
а все усилия по его продвижению не дают нужного эффекта?

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

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

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

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

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

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

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

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

Главная страница

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

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

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

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

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

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

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

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

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

Дата публикации: 2010-11-30

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

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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

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

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

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

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

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

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

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

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

Описание

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

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

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

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

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

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

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

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

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

Тип:

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

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

Цели и задачи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Верхняя часть (header) остается неизменной на каждой странице. Новостная лента видна только на главной странице. На второстепенных страницах слева показываем подпункты меню того пункта, в котором в данный момент находимся (например если мы на странице «служба сервиса», то показываем ссылки на «гарантийное обслуживание», «послегарантийное обслуживание»). Соответственно и переходы по этим ссылкам ведут на соответствующие страницы. Здесь же, под подпунктами слева отображаем данные для связи с он-лайн консультантами (Skype, ICQ). Блок акции и релизы остаются на каждой странице. Подвал (футер) отображается один и тот же на каждой странице.

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Читайте далее: