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

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

2. Как определить цветовую гамму?


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

Или обратиться в Google за помощью.

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

1. Обоснование необходимости ТЗ

А зачем вообще нужно ТЗ на сайт? Заказчик говорит:

«Нужен следующий сайт: каталог товаров, корзина, форма заказа, доставка, мы на карте, о нас, обратная связь»

.

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

А именно так: И тут выясняется, что первоначальная оценка объема работ (и соответственно, сроков выполнения и стоимости проекта), которую сделал разработчик на основании своих умозаключений и озвучил заказчику, отличается от того, что, собственно, хочет заказчик.

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

Но в любом случае, будут пострадавшие.

Так вот, задача технического задания — это свести к минимуму разницу между представлениями двух строн: заказчика и исполнителя.

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

Поясню почему. И diff и ТЗ имеют свою стоимость, причем стоимость нужно понимать более широко, чем просто деньги.

Это деньги, время, потраченные нервы, испорченные отношения и т.д. Стоимость diff — это стоимость изначально неоговоренных доработок, стоимость ТЗ — это, собственно, стоимость ТЗ.

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

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

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

до строк кода, переменных и стилей css. В этом случае diff равен нулю, а стоимость ТЗ равна стоимости проекта (т.к.

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

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

Отсюда важный вывод: ТЗ должно хорошо описывать проект, но не более того.

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

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

Здесь указываются: Сведения о компании. Общая информация о студии, чем она занимается.

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

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

Эта часть даёт понимание, что и когда будет делаться. Например (с указанием дат):

  1. Проработка концепции сайта;
  2. Подготовительный этап;
  3. Разработка дизайна страниц;
  4. Наполнение контентом;
  5. Программирование;
  6. Запуск.
  7. Создание дизайн-макета;
  8. Вёрстка;
  9. Тестирование;
  10. Проектирование;
  11. SEO-оптимизация;

Каких-то этапов, например, может и не быть.

Зависит от целей и задач заказчика и компетенций исполнителя.

Чего не должно быть в ТЗ, а что там быть обязано

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

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

Вы сами знаете в каком стиле и что должно быть нарисовано. Перед вами стоит задача: улучшить узнаваемость бренда или мотивировать на отдых в таком-то месте.

Как вы будете реализовывать эту задачу – ваши проблемы.

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

«Все, что не оговорено выполняется на усмотрение исполнителя»

. И не обязательно делать эту строчку маленьким шрифтом.

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

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

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

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

Вообще, я очень рекомендую вам уделять внимание мелочам.

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

Достает из сумки сложенную в сто раз мятую писульку из 18 листов, пытается разгладить ее близлежащими предметами.

Красное лицо и невнятное:

«Вот, я тут короче написала-сделала, вот так ваш сайт будет выглядеть, подписывайте»

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

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

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

Дело не в том, что вы умеете, а как вы действуете и какое впечатление создаете.

Требования к дизайну сайта

При разработке сайта должны быть использованы преимущественно светлые стили.

Основные разделы сайта должны быть доступны с первой страницы.

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

Рекомендации и советы

Главная рекомендация, это делать.

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

Вот так надо Мои первые зачатки по написанию ТЗ начали появляться несколько лет назад.

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

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

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

А как же Agile?


Я скажу одной фразой из : “Working software over comprehensive documentation”.

Поэтому в Agile документации отводится совсем мало места.

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

Информация

Отказ от ответственности Политика конфиденциальности Согласие с рассылкой Правообладатели Публичная оферта Наши проекты Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения Читая этот сайт вы даете свое согласие на использование файлов Cookie.

В противном случае покиньте этот сайт.Соглашаюсь

Шаг 6. Всё остальное

Нарисуем оставшуюся часть совы.

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

И вот результат наших трудов: , и . Буду рад отзывам и вопросам, «темным» местам, которые я мог пропустить. Постараюсь ответит на все возникшие вопросы.

Теги: Добавить метки Укажите причину минуса, чтобы автор поработал над ошибками Отправить анонимно Пометьте публикацию своими метками Метки лучше разделять запятой. Например: программирование, алгоритмы Сохранить AI vs Human

  1. 6,5k
  2. Мегатест
  3. 11,6k
  4. 30,4k
  5. 12,6k
  6. 13,2k
  7. 18,9k
  1. 981
  2. +56
  3. 176k

Выберите рекомендации для отправки автору: Указан только блог Орфографические ошибки Пунктуационные ошибки Отступы Текст-простыня Короткие предложения Смайлики Много форматирования Картинки Ссылки Оформление кода Рекламный характер Отправить Нарушение Опишите суть нарушения Отправить Пользователь Поделиться публикацией

  1. 28 апреля 2016 в 20:06 +6 11k 74
  2. 25 июля 2019 в 15:30 +19 15,5k 165
  3. 28 февраля 2012 в 17:23 +206 624k 2389

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

ТЗ на дизайн: надо ли и как писать.

Критика примера

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

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

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

Интересует мнение руководителей проектов, арт-директоров и дизайнеров. Разработке подлежит дизайн сайта компании АА (имя сайта АА-company.ru) Исходные материалы: логотип, визитка, буклет, примеры продукции компании, фотографии работ, текстовое наполнение (15 стр в doc). Компания специализизируется на производстве рекламных, сувенирных и полиграфических материалов, штемпельной продукции.

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

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

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

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

масса странных ссылок и страшных фотографий — Конкурент 5 Достоинства: нет.

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

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

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

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

Хороший дизайн и концепцию испортили наполнением. — Конкурент 9 Достоинства: проработанный дизайн, множество иллюстраций Недостатки: внутри сайта нет фотографий, тексты смотрятся слепыми — Конкурент 10 Достоинства: яркий дизайн, качественное наполнение, удачная флеш-анимация. Недостатки: нет — Конкурент 11 Достоинства: любовно и старательно наполнен Недостатки: некоторые странные решения по дизайну и огрехи по наполнению В целом очень достойно — Конкурент 12 Достоинства: яркие страницы, простой и хорошо структурированный каталог.

Недостатки: глаза устают. Сайт абсолютно классический, на твердую 4.

— Конкурент 13 Достоинства: флешка красивая.

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

Молодые социально активные люди среднего достатка. Пожелания к визуальному образу: 1. соответствие фирменной символике и стилистике 2.

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

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

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

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

1. Стартовая и внутренние страницы имеют разную структуру.

общие цвета: белый/кремовый, оранжевый, гамма синего, буквы черные. 2. Стартовая страница: — содержит крупный логотип (до 25% высоты сайта) и в качестве шапки цветовую полосу (может быть неправильной формы) с блоками, иллюстрирующими направления деятельности (или конкретные работы) компании — имеет структуру, собранную из информационных блоков: о компании, наши преимущества, что умеем, полезно знать, последние работы, наши услуги, новости, баннер перехода на форму, возможно еще что-то (скомпоновано по принципу ). Каждый блок построен по принипу вынесения главного или самого современного.

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

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

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

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

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

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

2. Основные страницы (портфолио, клиенты, новости, услуги): — логотип имеет меньшую высоту (10-15%), левая колонка содержит коллаж из работ или иллюстрацию (при наличии) — имеют двухколоночное построение (лого вертикальное меню). 3. Внутренние и текстовые страницы имеют двухколоночное представление: шапка+меню+текст страницы.

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

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

Пример описания прототипа одной из страниц сайта

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

Приведенный ниже пример — всего лишь пример (2013 год).