Тз на дизайн сайта: подробная инструкция — Разработка на vc.ru

  • Главная   /  Разное   /  
  • Тз на дизайн сайта: подробная инструкция — Разработка на vc.ru

Тз на дизайн сайта: подробная инструкция — Разработка на vc.ru

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

Главная / Курсы веб-дизайна / ТЗ на дизайн сайта


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

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

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

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

А теперь подробнее по пунктам

  • Во-первых, важно понять, какой именно сайт заказчику нужен. Тут задача клиента не просто взять дизайнера и сказать «нарисуй мне что-нибудь», а сформулировать свои мысли в какую-то понятную себе и окружающим формулировку именно на бумаге, написать. Образец ТЗ на дизайн сайта легко найти в сети, и я рекомендую это сделать.
  • Во-вторых, что важно сказать про оговоренный в ТЗ на дизайн сайта объем работ. Здесь также есть интерес дизайнера, чтобы на вас не нагрузили лишнего. Чтобы вы сами понимали, что нужно сделать, понимали время, оценивали сколько это стоит и т.д. То есть ТЗ для веб дизайнера тоже очень нужная вещь.
  • И дальше, когда клиент будет нагружать вас какими-то дополнительными правками, вы можете спокойно показать ему  задание на дизайн сайта, где четко указано, на что вы договоривались. Все правки в этом случае можно вносить за дополнительную плату.
  • В-третьих, контролировать сроки. Это то, чем грешат и клиенты, и дизайнеры. Сроки — это общая ответственность. Клиент должен выслать какие-то задачи, посмотреть ваши макеты и дать какие-то правки. Это его ответственность за сроки. Также ваша ответственность за сроки, например, если вы срываете сроки,необходимо заранее об этом предупредить и минимизировать срыв всеми возможными способами.
  • В-четвертых, составить представления о функциях и будущем оформлении проекта на основании разработанных в техническом задании прототипов.  Ниже расскажу, как описать дизайн сайта и подробно зафиксировать все его функции.

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

Из чего состоит техническое задание на дизайн сайта?

Шаблон тз на дизайн сайта обычно содержит следующие блоки:

  1. Рассказ о деятельности клиента. Эти сведения необходимы для лучшего понимания целей и задач проекта. Частая ошибка дизайнеров в том, что они не спрашивают, чем вообще клиент занимается. Для дизайнера важно понимать общее представление о бизнесе, нужна его вовлеченность и понимание того, над чем он работает. Когда вы погружены в бизнес клиента, вы совершенно по-другому начинаете думать. Поэтому важно описать дизайн сайта именно с учетом текущего бизнеса клиента.
  2. Задача сайта. Это может быть организация интернет-торговли, просто размещение информации об услугах компании или организация обратной связи с партнерами и постоянными клиентами. Иногда сайт может выполнять сразу несколько задач, каждую из которых необходимо обозначить именно на этапе проектирования сайта. Какой конечный результат мы хотим получить в итоге? Вот это и нужно прописать в техническом задании на дизайн сайта.
  3. Структура сайта. Определяется количество основных разделов и подразделов. В тз для веб дизайнера это особенно важно, так как ему придется нарисовать шаблоны будущих страниц, как раз на основании такой структуры.
  4. Дизайн сайта. В данном разделе описываются пожелания Заказчика к цветовому решению фона и шрифтов, необходимость соответствия фирменному стилю и т.п. Дизайнеру полезно прийти к клиенту и показать ему варианты. Клиент может быть скуден на идеи, может просто не знать, как описать дизайн сайта, поэтому важно показать клиенту кучу картинок и узнать, что ему нравится, а что нет. И понять, в каком направлении нужно двигаться.
  5. Функциональности сайта. В ТЗ на создание сайта описываются необходимые для эффективной работы сервисы для посетителей сайта. Под сервисом я понимаю какие-то функции ( кнопочки, калькуляторы), которые на сайте будут реализованы.
  6. Система управления сайтом и требования к ней. Это задача между заказчиком и программистом, дизайнер не имеет к ней отношения. Это относится к настройке CMS. То есть помимо того, что вы нарисуете сайт, вы потом будете делать его в Muse или Webflow. Это и есть CMS — система управления контентом сайта. И дизайнер тоже должен это учитывать: например, если сайт на WordPress, то там есть определенная стуктура, каркас, блоки, которые выглядят определенным образом и по-другому его реализовать будет невозможно. Поэтому на систему управления сайтом тоже важно обращать внимание изначально.
  7. Контент сайта.
    Оговаривается количество заполняемых страниц, формат предоставляемой информации и сроки её предоставления. Тут опять же про сроки. Во-вторых, дизайнер работает с информацией, поэтому важно обсудить контент, расставить акценты, иерархию, последовательность и т.д.
  8. Сроки создания сайта. Определить сроки разработки большого проекта достаточно непросто, но если поделить работу на этапы и задать срок выполнения каждого из них, то это выполнимая работа. Есть такой подход, как метод интерации, когда вы берете не весь большой сайт, а говорите так: Главную сделаем за неделю, а за следующую неделю пять внутренних страниц и т.д. То есть делите на фрагменты. Оплату, кстати, тоже иногда привязывают к небольшим фрагментам (предоплата 50%, постоплата 50%).
  9. Прототипы основных разделов сайта. Блоки, которые необходимо показать клиенту, чтобы он их утвердил.

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

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

 

надо ли и как писать. Критика примера / Хабр

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


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

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

Разработке подлежит дизайн сайта компании АА (имя сайта АА-company.ru)

Исходные материалы: логотип, визитка, буклет, примеры продукции компании, фотографии работ, текстовое наполнение (15 стр в doc).

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

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

— выход на рынок сувернирной продукции.

Конкуренты
Основные:

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

— Конкурент 2
Достоинства: обширное портфолио.
Недостатки: дизайн сайта крайне примитивен, как и навигация.

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

Дополнительно рассмотрены:

— Конкурент 4
Достоинства: достаточно интересный классический дизайн

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

— Конкурент 5
Достоинства: нет.
Недостатки: скучный дизайн, примитивное оформление страниц

— Конкурент 6
Достоинства: удачный дизайн с применением флеш-элементов. Персонажики повсюду. Применены разумно. Много различного контента.
Недостатки: сайт не растягивается, что портит неплохой дизайн (половина экрана белая), внутри проблемы со структурой страниц.

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

— Конкурент 8
Достоинства: яркий и простой дизайн с применением флеш-анимации. Простая и понятная навигация.
Недостатки: шрифты страниц неконтрастны, плохо читаемы.
Хороший дизайн и концепцию испортили наполнением.

— Конкурент 9
Достоинства: проработанный дизайн, множество иллюстраций
Недостатки: внутри сайта нет фотографий, тексты смотрятся слепыми

— Конкурент 10
Достоинства: яркий дизайн, качественное наполнение, удачная флеш-анимация.
Недостатки: нет

— Конкурент 11
Достоинства: любовно и старательно наполнен
Недостатки: некоторые странные решения по дизайну и огрехи по наполнению
В целом очень достойно

— Конкурент 12
Достоинства: яркие страницы, простой и хорошо структурированный каталог.
Недостатки: глаза устают.
Сайт абсолютно классический, на твердую 4.

— Конкурент 13
Достоинства: флешка красивая.
Недостатки: крайне неприятная цветовая гамма, наполнение сделано странно.

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

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

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

Слоган для использования на сайте:
главная ценность нашей компании — наши клиенты

Сайты, на стиль исполнения которых следует обратить внимание, т.к. они нравятся заказчику:
www.alfa-suvenir.ru
www.elenara.ru
www.tipograf.info
www.vremenagoda.biz
www.viveska.info
www.emotiondesign.ru
www.driada-pr.ru — не открылся
www.corporative.ru
www.credo-positive.ru

Образцами можно считать:
alfa-suvenir.ru — да
www.viveska.info — да, построение шапки, стиль оформления текстов и меню
www.vremenagoda.biz — да, структура страницы. можно использовать как образец при наличии исходных материалов для создания коллажей. создание иллюстраций не включается в разработку сайта

Пункты меню главной страницы:
О компании
Новости
Услуг
Портфолио
Контакты
Полезно знать (статьи о рекламе)
Заказать

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

На всех страницах — шапка, меню, логотип.

Первое предлагаемое решение по созданию дизайна сайта.
Сайт создается как растягивающийся на любую ширину страницы.
1. Стартовая и внутренние страницы имеют разную структуру. общие цвета: белый/кремовый, оранжевый, гамма синего, буквы черные.
2. Стартовая страница:
— содержит крупный логотип (до 25% высоты сайта) и в качестве шапки цветовую полосу (может быть неправильной формы) с блоками, иллюстрирующими направления деятельности (или конкретные работы) компании
— имеет структуру, собранную из информационных блоков: о компании, наши преимущества, что умеем, полезно знать, последние работы, наши услуги, новости, баннер перехода на форму, возможно еще что-то (скомпоновано по принципу www.ra-alterego.ru/?id=manufacture). Каждый блок построен по принипу вынесения главного или самого современного. Все блоки одного размера. В будущем возможно расширение и обновление сайта путем замены одного блока на другие.
2. Основные страницы (портфолио, клиенты, новости, услуги):
— логотип и шапка имеют меньшую высоту (10-15%), шапка содержит коллаж из работ или иллюстрацию (при наличии)
— имеют трехколоночное построение (лого, шапка, вертикальное меню, поле дополнительной иформации). В поле дополнительной информации выводятся небольшие блоки информации, которая может быть интересна при просмотре раздела (в новоястях-портфолио, в клиентах-услуги и т.п.) или блоки, аналогичные блокам на главной.
3. Внутренние и текстовые страницы имеют двухколоночное представление: шапка+меню+текст страницы.
4. Наобходимо придумать визуальное решение, позволяющее подчеркнуть широкий спектр оказываемый услуг и собственную производственную базу.

Второе предлагаемое решение по созданию дизайна сайта.
Идея решения заключается в использовании в дизайне в качестве рамки символов печати (штампа), сувенирной продукции, других примеров продукции компании. Сайт будет иметь фиксированную ширину. По периметру располагаются графические элементы, созданные на основе графики продукции компании (печати, буклеты, сувенирка).
По высоте сайт растягивается либо путем добавления белого пространства слева и справа по периметру, либо повторяющегося рисунка.
1. Стартовая и внутренние страницы имеют разную структуру. общие цвета: белый фон, графика фона с приглушенными серо-сине-желтыми тонами, заголовки в гамме синего, буквы черные.
2. Стартовая страница:
— содержит крупный логотип (до 25% высоты сайта) и левое текстовое меню с графическими маркерами (стиль как на www.viveska.info)
— имеет структуру, собранную из вертикально следующих информационных блоков: о компании, наши преимущества, что умеем, полезно знать, последние работы, наши услуги, новости. Каждый блок построен по принципу вынесения главного или самого современного. Все блоки одного размера. В будущем возможно расширение и обновление сайта путем замены одного блока на другие.
Под меню можно разместить ленту работ.
2. Основные страницы (портфолио, клиенты, новости, услуги):
— логотип имеет меньшую высоту (10-15%), левая колонка содержит коллаж из работ или иллюстрацию (при наличии)
— имеют двухколоночное построение (лого вертикальное меню).
3. Внутренние и текстовые страницы имеют двухколоночное представление: шапка+меню+текст страницы.

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

Portfolio — TK Web Designs

PORTFOLIO​

SELECTED PROJECTS

LEGENDS DRIP