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

7 советов по составлению ТЗ для дизайнера

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

Кто-то делает это лучше, кто-то — хуже. Но конечный результат всегда зависит от чёткости постановки задач. Не зря ведь говорят «Без внятного ТЗ — результат ХЗ».

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

1. Опишите свой бизнес в деталях

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

2. Аргументируйте

Когда я вижу странное цветовое сочетание или нагромождение информации в ТЗ, то каждый раз спрашиваю: «Зачем?». Ответ часто такой: «Ну вот хочется. Сделай просто и все». 

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

3. Набросайте примеров

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

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

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

4. Начинайте с формата

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

5. Подберите цветовое решение

Подбор цвета злит обычно обе стороны. У меня в голове зеленый цвет — это салатовый ближе к желтому. Многие, представляя себе зеленый, видят скорее изумрудный цвет. У всех разные цвета в голове — это факт. А что видите вы, когда думаете про зеленый цвет?

Если хотите конструктивно обсудить цвета с дизайнером,  подберите гамму в интернете. Например здесь — http://color.romanuke.com/

Все вопросы на тему «размыто-зеленых» и «задумчиво-лиловых» решаются этим же способом.

6. Определитесь со шрифтами

Есть несколько тысяч разных шрифтов, но их типов гораздо меньше. Клиент не обязан знать чем антиква отличается от гротеска, но есть выход: https://www.google.com/fonts/. 

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

7. Учитываем реальные сроки

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

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

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

Как понять, что все идет как надо и первоначальное задание было составлено хорошо?

Очень просто: нет большого количества правок. Это до 5 итераций, которые по времени не занимают больше 2-3 часов каждая (хотя, конечно, на больших проектах это время может быть и значительно больше). Когда на почту прилетает тридцатый по счету вариант правок, то становится ясно, что либо где-то неправильно составили ТЗ, либо людей, влияющих на принятие решения о дизайне, многовато.

Об авторе: 

Ника Александрова, 

дизайнер

Источник: http://mediabitch.ru/7-designer-tz/

Техническое задание для дизайнера (бриф) и рекомендации при передаче материала дизайнеру | Типография П-ЦЕНТР

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

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

Правильно составленное техзадание — половина работы над проектом

Типовой бриф для дизайнера на разработку рекламной продукции

• Заказчик:
• Ответственный за проект (Фамилия, имя, e-mail):
• Начало проекта (дата и время):
• Окончание проекта (дата и время):
• Формат продукции — рекламная листовка, брошюра, каталог, и т.д.
• Официальное название компании-Заказчика (на русском, а также английском или иных языках).
• Если в компании существует разработанный фирменный стиль — описание его, с приложением имеющихся образцов. Если стиль нуждается в доработке (изменении) — описание пожеланий Заказчика, связанных с доработкой фирменного стиля.
• Полный список реквизитов компании-Заказчика, необходимых для указания в информационном блоке (адреса, телефоны, веб-страница и e-mail).
• Подробные сведения о проекте, с указанием количественных и качественных характеристик, типов, размеров, качества и плотности бумаги и т.д.
• Какова целевая аудитория компании-Заказчика (пол, возраст, семейное положение, образ жизни, образование, уровень доходов, регион и пр.)
• Тон рекламного сообщения. К инженерам и студентам нужно обращаться по-разному, — равно как и для домохозяек и бизнес-леди существуют различные типы обращений.
• Основная мысль рекламного сообщения — что целевая аудитория должна понять из него, какие выводы сделать. Расставить ориентиры и акценты для дизайнера.
• Заказываемый полиграфический продукт есть продолжение существующей рекламной политики или часть новой концепции? Указать.
• Требуемый стиль полиграфической продукции (классика, модерн, авангард и пр.)
• Требования к цветовому решению дизайна (контрастные сочетания или мягкие, пастельные тона). Необходимость использования в дизайне фирменных цветов логотипа компании.
• Понятное содержание и структура текста (последовательность размещения), текст, проверенный и откорректированый (в формате doc, txt, rtf). Таблицы и диаграммы в формате Word или Excel (в тексте документа или отдельно, с указанием, где необходимо разместить.)
• Наличие фото и иллюстраций для проекта пригодных для полиграфии. Нужна ли покупка изображений в фотобанках.
• При необходимости — имеющиеся разработанные ранее варианты дизайна (в электронном виде), образцы понравившегося дизайна или дизайна продукции конкурентов для сравнения.
• Другие пожелания заказчика, перечень образов или идей.

Скачать бриф в формате MS Word

Рекомендации для заказчика при передаче материала дизайнеру

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

Сроки

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

Текст

Внимание! Текст дизайнером не редактируется и не исправляется, пожалуйста учтите следующие рекомендации:

• продумайте, что за чем должно идти (структуру документа)
• составьте при необходимости содержание
• включите проверку орфографии и проверьте текст на ошибки
• согласуйте текст с руководством и всеми заинтересоваными лицами перед отправкой на верстку. Учтите, что даже незначительные, казалось бы, исправления могут привести к полной переделке работы и привести к увеличению Ваших расходов и срыву сроков.
• не делайте сложного форматирования текста и не используйте нестандартные символы, если необходимо использование нестандартных символов, предупредите дизайнера
• текст присылайте в формате doc, rtf, txt, таблицы в doc, xls.
• помещенные в текст изображения (фотографии, иллюстрации, схемы) надо прилагать в отдельной папке.

Фотографии и иллюстрации

• постарайтесь учесть рекомендации дизайнера, иначе результат печати может Вас разочаровать.
• форматы файлов: psd, tif, tiff, jpg, jpeg, png, ai, cdr, eps, cmx, pdf (pdf высокого разрешения для печати)
• логотип Вашего предприятия должен быть хорошего качества, лучше в векторном формате — ai, cdr, eps, cmx, pdf или в растровом высокого разрешения
• фотографии, взятые из интернета с Вашего сайта или из сети в большинстве своем для полиграфии не подходят из-за маленького размера.

Размеры файлов для печати в пикселях (при разрешении 300 dpi) 120×120 pixels — 10 мм х 10 мм 480×480 pixels — 40 мм x 40 мм 800×800 pixels — 68 мм x 68 мм 1732×1732 pixels — 147мм x 147мм 2236×2236 pixels — 189 мм x 189 мм 2828×2828 pixels — 239 мм x 239 мм 5556×5556 pixels — 470 мм x 470 мм

Размер изображения можно посмотреть в проводнике Windows при выделении файла в разделе “Подробно” панели задач.

Вы можете самостоятельно подобрать изображения в фотобанке (например www.lori.ru), сообщите ссылку на фото и посоветуйтесь с дизайнером о возможности его использования.

Внесение правок

• допускается ограниченное количество правок со стороны заказчика, ошибки дизайнера исправляются без ограничений.
• учтите, что даже незначительные, казалось бы, исправления могут привести к полной переделке работы и привести к увеличению Ваших расходов и срыву сроков.
• присылайте правки по почте, с указанием страниц и абзацев
• не присылайте сканы документов с надписями от руки, с ними трудно работать.
• если в абзаце или разделе правок много, лучше прислать исправленный абзац или раздел.
• самый оптимальный вариант — использование файлов формата PDF и бесплатной программы Acrobat Reader. Эта программа позволяет вносить комментарии и делать рецензии прямо на присланых дизайнером образцах. Чтобы начать комментирование, надо выбрать в меню Acrobat Reader пункт Tools — Comment & Markup. Вы сможете подсвечивать текст, прикреплять наклейки обводить рамками и многое другое. Если панель Comment & Markup не появилась, значит файл закрыт для комментариев, сообщите дизайнеру, чтобы он разрешил комментарии в файле.

Количество вариантов дизайна

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

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

Каждый последующий вариант увеличивает стоимость работы на 20-30%, возможно первый вариант Вас полностью устроит.

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

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

Формат изделия

Заранее определитесь с форматом изделия. Изменение формата после может привести к полной переделке макета увеличит бюджет на разработку

• тип (визитка, буклет, брошюра, листовка и т.д.)
• точный размер страницы в миллиметрах или стандартный размер

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

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

Цветность

• черно-белая или полноцветная печать
• печать с использованием цветов PANTONE (для офсета)

Источник: http://www.pcentre.ru/uslugi/dizain-i-verstka/tekhnicheskoe-zadanie-dlya-dizainera-i-rekomendatsii

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Описание

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

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

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

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

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

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

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

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

…

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

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

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

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

…

Тип:

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

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

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

…

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

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

Цели и задачи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И т.д. и т.п.

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

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

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

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

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

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

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

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

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

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

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

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

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

о компании

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

контакты

отзывы

новости

продукция

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

релизы

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

сервис

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

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

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

потребителю

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

пользование

о сервисе

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

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

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

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

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

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

партнерам

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

E-mail: contact@webformyself.com

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

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

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

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

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

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

Что нужно писать в ТЗ на разработку дизайна сайта — создание технического задания для дизайнера

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

Можно сказать, что уникальный дизайн с нуля — одно из отличий проекта действительно «для людей» от трафосборника.

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

Что мы должны получить на выходе от дизайнера?

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

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

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

В наше время также необходимо заказывать версии для разных разрешений экрана, чтобы сделать дизайн адаптивным. Google, например, предупреждает в панели Вебмастера, если сайт не оптимизирован для просмотра на мобильных устройствах. Поэтому придется делать по 3 мобильных версии главной, поста и рубрики — примерно от 320 до 414px, от 414 до 768px и от 768 до 1024px.

Бриф

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

• В качестве общего напутствия можно написать вначале стандартное золотое правило: при разработке руководствуемся принципом «Хороший дизайн — это дизайн, которого не видно». Если у сайта уже есть дизайн, напишите, чем он вас не устраивает (если такие пункты есть).
• Похожие сайты. Напишите небольшой список ваших конкурентов.
• Задача, которую должен решать сайт. Здесь можно описать свои цели, которых хотим добиться с помощью этого проекта.
• Тип сайта. Сайт-визитка, корпоративный, интернет-магазин, блог и так далее.
• Цветовая гамма сайта. Если есть предпочтения по цвету — пишите, если нет — оставьте на усмотрение дизайнера.
• Предусматривать ли место под баннерную рекламу.
• Предусматривать ли место для счетчиков посещений.
• Какой сайт нравится. Лучше указать 4-5 ресурсов.
• Как сайт не должен выглядеть. Тоже 4-5 адресов.
• Распишите, что должно находиться на главной странице сайта; если нужно — приведите примеры (скетчи).
• Какие страницы необходимы помимо главной.
• Дополнительная информация.

Требования

А теперь давайте рассмотрим технические требования. Для информационных сайтов это обычно следующее:

1. Навигация. Сайдбар справа. Пользователь читает слева направо, поэтому лучше, чтобы его взгляд сразу падал на контент, а не на меню. Ширина сайдбара — не меньше 260 пикселей. Сайдбар не должен быть слишком широким, чтобы не отбирать место у контента. В версии для планшета можно оставить сайдбар (в отличии от версии для мобильных — там меню сайдбара выносится вниз), его можно сузить до 240рх, еще более узким делать не надо. При обычном разрешении планшетов в 768рх с учетом отступов на контент остается примерно 510 пикселей. Помним, что главная выполняет навигационную роль, как и рубрика. При этом под основными элементами (меню, посты) на главной и в рубрике должно быть пространство с подложкой для размещения текста (на всякий случай).
2. Шапка. Должна содержать в себе основные навигационные элементы, выражать индивидуальность сайта по отношению к другим, при этом занимать минимум места. Пример шапки и верхнего меню, на которые следует ориентироваться — http://simptomer.ru/. У Симптомера шапка одновременно и выполняет все основные функции, и не мешает представлению контента. Шапка должна быть размером не более 200-300 пикселей.
3. Меню — не выпадающее. Выпадающее меню по возможности делать не надо (лучше сделать логичную структуру, а скрытые в выпадающем меню ссылки сразу не видны пользователю, что не есть хорошо и в будущем отношение к нему поисковиков может измениться не в лучшую сторону), поэтому следует указать дизайнеру, чтобы не тратил на это силы.
4. Фон — светлый. Не надо нагружать глаза пользователя. Можно указать, чтобы не был белый.
5. Шрифты — Tahoma, Verdana, Arial. Размер их будет 12-16px. Цвет — черный (в крайнем случае серый (#444). Это практически общепризнанные стандарты наиболее читабельного текста.
6. Заголовок — главный заголовок (h1) должен выделяться на фоне текста и других заголовков, возможно за счет подложки, шрифта или цвета. Пример оформления: http://stroy-bloks.ru/chto-soboj-predstavlyaet-nalivnaya-vanna/. По умолчанию дизайнер может и не подумать о такой важной вещи, как выразительные заголовки и подзаголовки.
7. Подзаголовки. Подзаголовки h2 и более мелкие должны выделяться за счет подложки, шрифта, цвета или т.д. Можно указать, что, мол, размер подзаголовков будет от 18px и больше.
8. поста. Все знают блоки « статьи» у Википедии, так вот на контентных сайтах надо делать дизайн такого блока, что дизайнеры по умолчанию также зачастую не делают. В дизайне поста нужно сделать дизайн содержания поста с отдельной подложкой и чтобы цвет ссылок отличался от обычных (например, чтобы они были подчеркнуты пунктиром).
9. Списки — в дизайне поста нужно изобразить, как будут выглядеть маркированный и нумерованный списки. Лучше, чтобы это были не тупо цифры в случае с нумерованным списком, а красивые цифры, а в качестве маркеров другого вида списков можно сделать какие-нибудь тематичные иконки.
10. Таблицы должны выглядеть в общем стиле сайта.
11. Цитаты. То же самое.
12. Рамки картинок/галереи.
13. Рамки видео/видео галереи.
14. Облако тегов под текстом в посте + облако тегов в сайдбаре.
15. Подвал сайта присутствует, в нем повторяется навигация из главного меню, плюс размещен копирайт и есть место для другого текста на всякий случай. Строгих ограничений по размеру нет, но надо сохранять трезвую голову.
16. Справа должна быть аккуратная кнопка «наверх».
17. Внутренние контекстные ссылки — подчеркнуты. Цвет ссылок — такой, чтобы хотелось кликнуть (использующийся в выдаче Яндекса сойдет). В рубриках ссылкой должен быть только заголовок, никаких «Подробнее» или «Читать далее». Ссылки «Предыдущая запись» и «следующая запись» в дизайне поста также вообще не нужны. Даты новостей — то же самое. В начале поста (желательно сбоку) должно быть изображение поста — такое же, какое отображается в рубрике.

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

Источник: http://znet.ru/raskrutka/chto-nuzhno-pisat-v-tz-na-razrabotku-dizayna-sayta/

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

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

Дизайн меняется таким образом, чтобы все изменения можно было внести глобально, без редактирования каждой страницы по отдельности:– добавлен серый фон контентного блока;– добавлен белый 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/