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

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

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

В отличие от ТЗ на АСУ или на программу, нет ГОСТов предъявляющих требования к структуре и содержанию технического задания на изготовление сайтов. Однако, исходя из лучших практик, требования ГОСТов (34.602 и 19.201) очень часто учитывают при оформлении ТЗ. В частности требования ГОСТ 34.602 учитывают при создании ТЗ на портал, интернет-магазин, а ГОСТ 19.201 при разработке ТЗ на сайт-визитку.

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

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

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

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

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

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

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

Заказать ТЗ на сайт

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

ТЗ на разработку сайта образец

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

Скачать образцы технического задания на разработку сайта:

Польза ТЗ

Техзадание — полезная вещь для обоих сторон. Клиент, имея ТЗ, сможет:

• понять, на что будут потрачены финансы и что он получит взамен: какой сайт. Этот пункт помогает заказчику познакомиться со структурой и понять работу ресурса. Если есть моменты, которые не устраивают, то до начала разработки их можно изменить;
• познакомиться с компетентностью исполнителя. Четкое ТЗ — это доверие к тому, кто будет заниматься разработкой, а хаос может быть сигналом о том, что похожее может быть на сайте;
• застраховаться от недобросовестности разработчика. Имея техническое задание, готовый сайт можно легко проверить по нему. Если имеются несоответствия, то разработчик должен их устранить;
• упростить передачу разработки ресурса другим исполнителям. Это актуально в тех случаях, когда разработчик и клиент повздорили между собой. Имея на руках техническую документацию, можно ресурс передать другим профессионалам. Они втянутся в работу быстрее, чем без ТЗ;
• узнать цену на создание сложного сайта. Стоимость разработки и точные сроки сдачи сложного сайта сразу назвать нельзя. Необходимо понять, какие функции будут на ресурсе и как он будет работать.

Исполнитель, имея техническое задание, сможет:

• правильно оценить, что нужно к клиенту. Заказчику задается множество вопросов, предлагаются решения, показываются разные примеры. Далее вся информация оказывается в едином документе. Если заказчик согласен с внесенными данными, то будущий разработчик сайта правильно все понял (в случае, если документ делает разработчик);
• застраховаться от неожиданных пожеланий заказчика. Бывают ситуации, когда клиент хочет все изменить. Его не смущает, что сайт уже наполовину сделан. ТЗ — это страховка от таких хотелок;
• доказать свою компетентность. Техническое задание, если оно хорошо сделано исполнителем, вызовет у клиентов уважение и даст понять, что перед ними профессионалы. Многие клиенты соглашаются работать с разработчиками после того, как увидят эту документацию;
• ускорить и облегчить разработку ресурса. Как правило в техзадании можно найти требования к структуре сайта, функции и элементы, расположенные на каждой странице. Имея это перед глазами, остается сделать малое: оформить визуал и написать код;
• создать возможность для заработка. Составить правильно ТЗ — дело непростое и очень хлопотное, особенно для человека, который в этом плохо разбирается. Поэтому разработчики предлагают услугу по составлению технической документации.

3 блока информации, которые должны быть в хорошем ТЗ

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

Вопросы, которые можно встретить в техзадании

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

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

Информация о будущем сайте общего характера:

• задачи и цели проекта. Тут необходимо вкратце расписать требования и пожелания того, что хочется получить от сайта. Лучше это сделать в цифрах. Например, достичь трафика 10000/мес, добиться увеличения продаж на 30% и т.д.;
• концепция будущего сайта. Здесь необходимо озвучить проблему, которую должен решать продукт, предложить порядок ее устранения и рассказать о целевой аудитории;
• расшифровка терминов, которые используются в документе. Часто заказчик под определенным термином понимает одно, а исполнитель другое. Чтобы не было путаницы при выполнении работ, рекомендуется составить словарь, используемой терминологии;
• перечень документации, на основании которой будет создан сайт. Тут можно указать ссылки на приглянувшийся дизайн, внешние документы и т.д.;
• карта страниц будущего проекта или разделов. Требований тут немного: нужно нарисовать структуру в формате дерево. Благодаря этому рисунку будет понятен объем работ, с которым придется столкнуться разработчику.

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

Дизайн и прототип:

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

• информационная архитектура. В этом разделе необходимо описать структуру сущностей сайта: объекты системы, сущности базы данных, основные функции ядра и т.д.;
• функциональная спецификация. Здесь указываются какими алгоритмами вызываются определенные действия системы;
• описательная часть для бек-офиса. Необходимо указать функционал для контент-менеджера, администратора и т.д. Главный вопрос здесь: описать порядок наполнения контентом и администрирование;
• интеграция с внутренними и внешними системами. В этой части необходимо написать информацию о данных: куда и откуда они передаются, в каком виде;
• информация о тестировании. Необходимо указать требования о том, какие системы будут тестировать продукт: прописать устройства, системы, браузеры;
• описание требований к безопасности ресурса. Заказчиком должны быть озвучены требования к безопасности, причем как общие, так и частные;
• информация о серверах и нагрузке. Указываются требования на каких серверах должен быть размещен проект и какую нагрузку выдерживает.

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

Можно ли составить техническое задание самостоятельно правильно?

Конечно, можно попробовать сделать этот документ без помощи специалистов, но нужно быть готовыми к следующим нюансам:

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

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

1. Оцените объем работ, который предстоит сделать. Изучите вопросы. Если, что-то непонятно, то можно обратиться за консультацией к будущему разработчику. Чем лучше заказчиком будут изучены вопросы, тем качественнее будет внесенная информация в документах.
2. Помните, автоматизации при создании хорошего сайта нет, поэтому не стоит надеется на шаблон ТЗ из интернета. У каждого ресурса свои нюансы и особенности;
3. Поясняйте умные слова, ведь не всегда их смысл одинаково воспринимается клиентом и исполнителем.
4. Не забываем про скорость загрузки, защиту от хакерских атак, на каких типах устройств должен открываться и т.д.
5. Опишите дизайн. Можно словами о том, какие цвета и элементы должны быть на сайте, а можно дать ссылки на понравившиеся проекты.
6. Не ленитесь качественно нарисовать структуру сайта. Плохая структура – кривой проект.
7. Определите, кто отвечает за контент на сайте. Содержание контента очень важно, причем как текстового, так и визуального. Если он будет плохим, то показатели отказов тоже будут немаленьким. Кроме этого содержание текстовых данных должно быть уникальным.
8. Не забывайте про сроки. Сдать проект вовремя – это важно, поэтому их лучше указать.

ТЗ от «Studio B»

Если нет желания рисковать и давать в работу самостоятельно написанную техническую документацию на разработку сайта, то рекомендуем обратиться к профессионалам «Studio B». Каждый клиент при сотрудничестве с нами может рассчитывать на:

• индивидуальный подход. Каждый клиент – это отдельная история. Невозможно сделать ТЗ одно для всех. При его разработке учитывается история компании, специфика бизнеса и т.д.;
• точность и доскональность. Документация для разработки сайта должна максимально четко и подробно описывать будущий проект;
• выгодную цену: от 30 000 рублей. Стоимость на разработку будет зависеть от сложности будущего сайта. «Studio B» гарантирует, что ТЗ будет выполнено качественно и не потребует изменений в дальнейшем;
• прототипирование (для крупных ресурсов). К созданию демонстрационной версии будущего сайта дополнительно привлекаются аналитики и специалисты, реализующие прототип.

Почему стоит заказать техническое задание в «Studio B»

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

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

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

Чтобы заказать ТЗ на разработку необходимо связаться с нами одним из способов:

• позвонить нам;
• обратиться через форму «Написать письмо»;
• написать нам в месседжеры: Telegram или WhatApp.

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

Чтобы заказать разработку сайта необходимо заполнить бриф.

Пример ТЗ на разработку сайта: универсальные пункты и образец составления

852

• Что такое тз для сайта и зачем оно нужно
  • Кто составляет задание на создание сайта
  • Как написать хорошее ТЗ
  • Десктопная версия
  • Мобильная вёрстка

  Как думаете, легко ли развивать сайт, который сделан по объявлению вроде: «Сайт за 500 грн.», «Сайт за 1000 руб.»?

  

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

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

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

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

  Что такое тз для сайта и зачем оно нужно

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

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

  

  Конкретные его пункты мы рассмотрим ниже.

  От брифа ТЗ отличается тем, что оно гораздо более детализировано, благодаря чему можно:

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

  Кто составляет задание на создание сайта?

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

  Например, заказчику ТЗ позволяет:

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

  Для исполнителя же техзадание полезно тем, что:

  • Можно понять желания и виденье заказчика, чтобы сразу удовлетворить его.
  • Облегчить процесс разработки.
  • Застраховаться от внезапных хотелок клиента.

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

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

  Как написать хорошее ТЗ?

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

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

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

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

  Конкретным и однозначным. Уточняйте моменты, которые субъективны или их можно трактовать по-разному, иначе непонятно, какой результат вы ожидаете увидеть, и какой объём работ предстоит сделать исполнителю:

  Неправильно	Правильно
  Сайт должен быть быстрым.	Сайт должен загружаться в среднем за n-секунд на десктопах. Или сайт должен набирать минимум n-баллов по PageSpeed.
  Форма заявки на услугу должна быть простой и удобной.	В форме заявки должно быть два поля: «Номер телефона» и «Ваше имя», а также кнопка «Заказать услугу». При этом номер телефона должен подгружаться автоматически у зарегистрированных пользователей.
  CMS должна быть оптимизирована для интернет-магазина.	CMS должна иметь возможность создавать и удалять страницы, добавить товар в любой каталог сайта и другие требования.

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

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

  Для разработки общей концепции сайта выясняются:

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

  Например, ООО «Принтфоревери», компания основана в 2007 году, изготавливаем рекламную (брендированную) и фанатскую продукцию не только на продажу, но и под заказ. Есть все виды печати на тканях, канцелярия, керамика и типография. Есть доставка по стране. Регулярно спонсируем фестиваль «Летний». Конкуренты: «Принтпризер», «Яркокрасочка».

  1. Назначение (очень важный пункт). Опишите целевую аудиторию и задачи сайта, ответив на вопрос: кого вы хотите привлечь и для чего?

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

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

  Аудитория компании по производству печатной продукции может делиться на несколько сегментов:

  • Лица, ответственные за брендированную продукцию компании. Обычно заходят с ПК, с 9:00 до 18:00, возраст до 35 лет, локация — центр крупных городов, чаще — наш город. Заказывают канцелярию и кружки большой партией.
  • Фанаты фильмов и сериалов. Молодые люди до 20 лет, пользуются преимущественно смартфонами, в любое время суток, локация — вся страна, заказ поштучный готового и индивидуального дизайна.
  • Дизайнеры. От 25 до 45 лет, пользуются ноутбуками, в любое время суток, локация — центр города, заказывают печать своего дизайна малыми партиями.
  1. Дополнительные пожелания клиента. Владелец описывает, что нравится или не нравится (особенно актуально, если у вас есть старый сайт).

  Например, хочется домен .ru и адаптивный шаблон.

  Следующие пункты уже непосредственно входят в типовой шаблон ТЗ:

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

  Например, что у страниц пагинации Title должен создаваться по шаблону «название раздела» + «номер страницы», а в урлах категорий не должны формироваться лишние уровни вложенности. Подробнее о требованиях ПС вы можете прочитать в статье «Чек-лист по внутренней и технической оптимизации сайта».

  

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

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

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

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

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

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

  

  Как выглядит техзадание

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

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

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

  Ширина сайта – 1140 px.

  Шапка и футер растягиваются по ширине экрана и одинаковы для всех страниц.

  Семейство шрифтов: 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 способа быстро адаптировать сайт под мобильные устройства.
  • Мобильная адаптация сайта — ответы на вопросы.
  • Как продвигаться в нишах, где преобладает мобильный трафик.

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

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

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

  Основные требования:

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

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

  

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

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

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

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

  

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

  

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

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

  

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

  Где найти образцы хороших сайтов

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

  • Похожих сайтов в ТОПе по интересующим вас запросам.
  • Успешных сайтов из разных тематик и регионов — их можно найти в онлайн-рейтингах вроде AWWWards или Similarweb, а также в MasterfulMobileWeb (от Google). Рекомендуем смотреть именно высококонкурентные рынки, ведь у них борьба за ТОП сложнее, а значит и приёмы выбираются самые эффективные.

  Заключение и шаблон

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

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

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

  • Жизненный цикл проекта в SEO.
  • SEO продвижение нового сайта в Яндекс и Google.
  • SEO чек-лист: что проверять перед запуском сайта?

  Если у Вас возникли проблемы с продвижением нового сайта, обращайтесь к нам!

  Подписаться на рассылку

  • Как начать работу с локальным сервером Open Server В этом выпуске вы найдёте обзор и подробные инструкции по установке и настройке сервисной платформы Open Server. Благодаря этой платформе веб-разработчик может в условиях имитации реального сервера отладить код и плагин, а также.
  • Зеркала сайта и объединение доменов Что такое зеркало сайта Зачем нужны зеркала Как определить зеркала сайта Как указать главное зеркало Как расклеить домены Мини-кейсы от Siteclinic 1. Как быстро восстановить.
  • Да будет SEO: 4 плагина для оптимизации сайта на WordPress Рассмотрим SEO-плагины для CMS WordPress, которые позволяют провести внутреннюю оптимизацию сайта. О некоторых плагинах я уже писала ранее. У плагинов, о которых расскажу в этой.
  • 9 ошибок при разработке сайта, которые мешают продвижению Чтобы в дальнейшем при продвижении не возникло проблем, в ТЗ на разработку сайта нужно учесть и прописать моменты, важные с точки зрения SEO. С какими ошибками.
  • Как оптимизировать страницы пагинации на сайте Настройка SEO пагинации Рекомендации поисковиков Актуальные способы настройки пагинации Настройка каноникала на первую страницу Настройка каноникала каждой из страниц на себя Оптимизация каждой страницы пагинации.

  

  Пришла с небольшими знаниями в настройке, установке и принципах работы нескольких CMS. С тех пор «обросла» знаниями и опытом в разработке сайтов на следующих CMS, PHP и JS/CSS-фреймворках: WordPress, Joomla, Bitrix, MODx, Drupal, Codeigniter, Laravel, Bootstrap.

  Разрабатывает, дорабатывает, перерабатывает и адаптирует сайты.

  Девиз: если очень захотеть, можно в космос полететь

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

  

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

  Зачем составлять ТЗ для сайта?

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

  Зачем ТЗ заказчику?

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

  Зачем ТЗ разработчику?

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

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

  Нужно проработать ТЗ?

  Соберём, разработаем, формализуем требования к вашему проекту.

  Как составить ТЗ для сайта?

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

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

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

  Хорошее техническое задание от плохого отличает набор вполне конкретных действий, пунктов и требований.

  1. ТЗ пишет профессионал — технический автор/писатель

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

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

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

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

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

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

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

  Все перечисленные характеристики субъективны. То, что разработчик посчитает стильным и удобным, может совсем не понравиться заказчику и наоборот. Критерии контента также нужно расписывать детально, чтобы максимально попасть в потребности ЦА.

  Текст ТЗ должен быть максимально «оцифрованным», то есть описывать цели и пожелания цифрами, так: не быстрая загрузка страниц, а загрузка за 2 секунды, не несколько фотографий акционного товара на главном экране, а слайдер из 5 изображений.

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

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

  1. ТЗ фиксирует требования к инструментам разработки

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

  1. ТЗ содержит подробную структуру сайта

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

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

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

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

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

  1. ТЗ демонстрирует сценарии взаимодействия

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

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

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

  1. ТЗ определяет ответственного за контент

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

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

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

  С размещением ситуация аналогична: либо команда разработчиков делает это сама и за деньги, либо передает полномочия заказчику.

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

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

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

  Вывод

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

  Нужно проработать ТЗ?

  Соберём, разработаем, формализуем требования к вашему проекту.

  Похожие публикации:

  1. Какая зона обязательно выделяется на территории города
  2. Кто контролирует работу управляющих компаний
  3. Чем отличается госслужащий от бюджетника
  4. Что будет если не оплатить штраф