[blackgeneral]

Составление эффективного ТЗ на дизайн сайта

«Ну. Это тримурти: дизайнер, программер и верстальщик.
Один разрушитель, второй созидатель, третий... эммм...
танцор диско. Из всего этого дер%^^@ выплясывает».
(Найдено на баше).

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

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

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



Для дизайнера такое техническое задание звучит примерно как «пойди туда – не знаю куда, принеси то – не знаю что». Вообще видение дизайнера и заказчика не совпадает очень часто.

И бьются один с другим, как Пересвет с Челубеем. Такое противостояние порождает цитаты на баше и головную боль у бойцов. Хорошего же сайта, как правило, не порождает:






Итак, проблема
Дизайнер и заказчик не понимают друг друга.


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


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

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


Второй тип трудностей: внучек, я тебе презерватив связала

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

Они рисуют очень красивый макет, заказчик доволен.

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



Проблема
Дизайнер создает макет, не отвечающий техническим требованиям.


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

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


Третий тип трудностей: птица гордая, не пнешь – не полетит

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




Проблема
Дизайнер работает спустя рукава

Решение
Лучше найдите другого дизайнера, серьезно.
Ну можно еще премировать и штрафовать, а также постоянно контролировать.

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

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

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

Правда, встречал я дизайнеров, которые никак не желали работать вообще. Один такой отлично рисовал в фотошопе, но в остальном был полный ноль. После недели битвы с ним и внесения корректировок в структурный макет сайта на уровне масштаба я возмутился и задал законный вопрос: когда дизайнер будет работать. На что получит ответ, от которого я «заморозился» минут на 5… Ответ был таков: я дизайнер, и моя работа – это хорошо расставить картинки на основном фоне. А ваша задача – предоставить мне все эти картинки, схематично расположить их на листе … Конечно, больше я с этим дизайнером не встречался, но это не был уникум, как я вначале подумал. Таких горе-дизайнеров я встречал не раз при работе с сайтом заказчика. Совет тут только один: бегите. Ну, или пусть он бежит, это смотря какой у вас темперамент.


Четвертый тип трудностей: возьмите и меня в балет



Ну и самый дешевый вариант – неопытный дизайнер.

Он будет стараться, но будет, скорее всего, и косячить. Не обольщайтесь ни насчет сроков, ни насчет креатива. На всякий случай не обольщайтесь и насчет качества.







И вот еще что. Когда этот дизайнер всему научится, он поднимет цену за свою работу. Будьте готовы в будущем либо платить, либо расстаться с ним.


Проблема
Дизайнер не умеет работать.


Решение
Очень подробное ТЗ и систематические беседы по нему.

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

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



Признаки хорошего ТЗ для дизайнера

1. Однозначность
Не должно быть никакой возможности истолковать что-либо двусмысленно.

2.Предельная доступность для исполнителя
Заранее снимите все неясные моменты. Убедитесь, что дизайнер понимает все части задания.

3.Согласованность с заказчиком
Это обязательно. А если что-то собираетесь изменить в процессе работы – заказчик должен об этом узнать раньше, чем произведены изменения.

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

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

6.Структурированность
Это нужно для того, чтобы ничего не упустить ни вам, ни исполнителю.

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

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

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

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

Код:

Общие моменты: все элементы делать в слоях. Все слои с возможностью внесения изменений. Все тексты выполнять как текст, а не как рисунок. Тоже в слоях. Шрифт без засечек (Arial, Verdana, Helvetica), размер от 14 пикселей и выше. Все шрифты, которые не являются стандартными, необходимо приложить к работе.
Все рисунки представить как в jpg так и в PSD (фотошоп), причем фотошоп – в слоях каждый элемент. 

Должны быть:
1. Элегантность и простота 
2. Округлые формы.
3. Тени вокруг блоков контента и основного блока сайта.
4. Цвета контейнеров внутри сайта, элементов стиля и кнопок – оранжевые. Но они должны не совпадать, а скорее сочетаться по аналогии.

1.Основные кнопки сайта сделать большими и круглыми. Примерно так http://demo.opencart.ru/index.php  (оранжевая кнопка внизу). Кнопка должна быть немного затененной  и подсвечиваться более ярким при наведении. Внутри кнопки должно быть изображение того элемента меню, к которому относится кнопка (решетка оконная, дверь железная, авто навес, козырёк над входной дверью, забор, ворота, лестница (кованая), фурнитура (например, замок, дверная ручка, личина замка), камера наблюдения и кодовая панель домофона, калькулятор, статьи). При наведении на кнопку (активная кнопка) она должна светиться более ярко и при этом посередине ее должна возникать надпись, относящаяся к вызываемому кнопкой меню (решетка, забор и т.д.). Активную кнопку отрисовать в отдельном слое. Для кнопки «видеонаблюдение и домофон» надпись придумать короткую. У меня пока только есть вариант «еще». Может у Вас что-то в голове родится? Надпись выходит за округлые формы кнопки. И надпись, и кнопка имеет тени и «стеклянный» эффект. Кнопка не прозрачная, а надпись, возможно, лучше сделать полупрозрачной.

2. Нарисовать кнопки калькуляторов на сайт. Пример удачных рисунков калькуляторов http://www.dvernik.ru/index.php?page=kalkulyator-reshetki-na-okno Сделать что-то вроде этих, но чтобы они гармонично вписывались в общий дизайн сайта. Это не большие круглые кнопки в меню. Это кнопки (картинки), которые появляются на  центральном «поле» сайта при нажатии на круглую кнопку - «калькулятор» в главном меню. Использовать тени и «стеклянный» стиль.

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

4. Картинки решеток для разделов. Сделать примерно так: http://new-vek.net/rechetki.html , но с большим количеством решеток. Узор решеток брать отсюда: http://rubeg-plus.ru/category/svarnye-reshetki/ При этом фон кирпича у стены сделать более выразительным. Например можно взять оттенки отсюда: http://stroyplo.ru/wp-content/uploads/2012/10/228252_150558741677253_130347850365009_310761_4943946_n2.jpg Или что-то еще более подходящее.

5. Отрисовка шапки сайта
В шапку дать изображение частного дома. Хорошо видна дверь, решетки на окнах и элементы сварных решеток входной группы. Сбоку гараж, видны гаражные ворота и автонавес. На доме хорошо видна камера видеонаблюдения, вызывная панель домофона на входной двери. Кругом солнечная летняя природа, яркая трава,  все вместе создает хорошее настроение. Дом должен обязательно быть похож на такой, как тут: http://metallkons.ru/index-home.html , но не дублировать его.

Слева логотип и название компании (логотип компании прикреплен отдельным файлом). Справа телефоны и кнопка поиска (оставьте текст с номерами телефонов нулями, мы потом сами поменяем).


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

6.1.Баннер «дисконтная карта»
Изображение дисконтной карты (см. прикрепленный макет). С обеих сторон. Сделать красивый фон с градиентом и зеркальное отражение в нем. Вот пример: http://freelance.ru/img/portfolio/pics/00/12/FB/1244020.jpg .  (Примечание: оставьте это баннер на потом. Ждем получения самих карт, там будет штрих-код и номер. Пока непонятно, куда его нанесут, а на баннере должно быть видно хотя бы кусочек ). Текст: дисконтная карта в подарок (два варианта слова ПОДАРОК: крупнее и ярче остального текста и как и весь текст). Этот же рисунок для страницы приземления, но большего размера.

6.2. Баннер «вызов замерщика»
Приятного вида замерщик с рулеткой. Надпись: выезд замерщика бесплатно. Замерщик стоит в коридоре.
Такой же замерщик для страницы приземления, большой рисунок. Вертикальный. Надписей не надо.

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

6.4. Баннер «гарантия»
В кресле сидит расслабленный довольный мужчина, вытянув ноги и закинув руки за голову. Он в помещении, над дверью (дверь хорошо прорисована) висит вместо часов такое изображение: http://shop.mamium.ru/pages/img/warranty.jpg Можно нарисовать подобное, важна идея, а не детали. Вместо разводного ключа – молоток.
Текст: гарантия 8 лет.
Такой же рисунок для страницы приземления, но вертикальный. Большой рисунок. Надписей не надо.

6.5. Баннер «гибкая система скидок»
Девушка-йог или эквилибрист изгибается, может, даже стоит на одной руке, а в одной руке удерживает распродажную сумку с нарисованным знаком процента. Текст: гибкая система скидок.
Такой же рисунок для страницы приземления, но вертикальный. Большой рисунок. Надписей не надо.

6.6. Баннер «собственное производство»
 Изображение небольшого здания-цеха, вокруг аккуратная яркая травка. Надпись: собственное производство в Московской области.
Такой же рисунок для страницы приземления, но вертикальный. Большой рисунок. Надписей не надо.

6.7. Баннер  «строгий контроль качества»
Идея взята отсюда: http://www.veka.ru/website/vekaru/upload/custom/images/quality2.jpg
Человек примерно такого вида: http://www.kwatro.ru/products_pictures/100001201.jpg прикладывает уровень к лежащей на столе двери или решетке и глядит туда. На этом же столе «на очереди» находятся микроскоп и штангенциркуль. Наверху светильник, как в операционной, примерно вот такой:   http://medbuy.ru/Data/Sites/1/med/ProductsModule/FullSizeImages/hirurgicheskij-svetilnik.jpg . На мониторчике светильника та же дверь или решетка с линиями, обозначающими размеры (как делают на чертежах). Эти линии какого-нибудь «лазерного» цвета, светящиеся, например, красные, или синие, или желтые. Или разрезы двери, с какими-то обозначениями. Это должно выглядеть так, как будто бы на монитор вынесен электронный анализ каких-то загадочных параметров. Что-то суперсовременное и загадочное. Текст: строгий контроль качества.
Возможно, окажется слишком много деталей, тогда нужно будет что-то придумывать по ходу.
Такой же рисунок для страницы приземления, но вертикальный. Большой рисунок. Надписей не надо.

6.8. Баннер «качественный сервис»
Из  кувшина вылетает тройной джин: мастер-установщик, девушка-менеджер и директор. Все улыбаются приятными улыбками и делают руками услужливые жесты, один конспектирует. Напротив сидит довольный покупатель и тычет мобильником в кувшин. Другой рукой делает объясняющий жест: дает указания. Текст: качественный сервис.
Такой же рисунок для страницы приземления, но вертикальный. Большой рисунок. Надписей не надо.

7.Отрисовка малых «акционных» баннеров на главную. 
Размеры этих баннеров невелики. Поэтому много там не нарисуешь. Возможно, сделать рисунки фоном для надписи, чтобы лучше воспринималось? 
К каждому баннеру нужен большой рисунок для его страницы приземления.

7.1. Баннер « праздничная скидка»
Текст:
Акция!
Праздничная скидка 10%!
Возьми свою скидку!(этот текст оформлен как крупная кнопка)
Рисунок: несколько русских крупных купюр выглядывают из портмоне.  Вариант: надпись на фоне из набросанных купюр или кучи золотых монет.
Рисунок с портмоне для страницы приземления. Большой рисунок. Надписей не надо.

7.2. Баннер «замок в подарок»
Текст:
Акция!
Купи открывающуюся решетку и получи замок в подарок!
Рисунок: коробка-подарок с тенью и блестящим бантиком.
Такой же рисунок для страницы приземления. Большой рисунок. Надписей не надо.

7.3. Баннер «пенсионерам скидка»
Текст: 
Пенсионерам скидка 10% на все товары и услуги!
Пожалуйста, заберите свою скидку!
Рисунок: современное пенсионное удостоверение РФ.
Вариант: моложавый пенсионер или пенсионерка улыбается. Рисунок с пенсионером для страницы приземления. Большой рисунок. Надписей не надо.

8. Баннер «плавающая скидка»
Текст:
Акция!
Кто успел, тот и съел!
Успеешь?
Рисунок: пирожок.
Вариант: пирожок убегает, вытянув вперед свои ручки. Его лицо хитрое и веселое.
Такой же рисунок для страницы приземления. Большой рисунок. Надписей не надо.

9. Отрисовка общего макета сайта согласно ТЗ. 10. Отрисовка кнопок бокового меню. 
Стиль кнопок «бокового меню» (стандартного меню сайта с левой стороны) выбрать в соответствии с общей стилистикой самого сайта.  Размер кнопок и выпадающего меню как тут: http://www.skype.com/ru/ . Кнопки прозрачные, а при наведении становятся оранжевыми или контрастного цвета. Надо посмотреть, как будет лучше.

11. Отрисовка кнопки «вход».
Кнопка «вход или регистрация» располагается в левой части сайта и гармонирует  с общим стилем сайта.  Например, сделать контрастного цвета в таком стиле: http://www.skype.com/ru/  (зеленая кнопка «регистрация»)

12. Кнопка «поиск».
Прозрачная. Видна только надпись и окошко для ввода поискового запроса.

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

14. Отрисовка фона сайта.
Фон сайта должен быть серым, возможно, ближе к темно-серому.


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

16. Отрисовка контейнеров внутри сайта.
Контейнер для основного блока  прямоугольный и оранжевый. Уголки загибать не надо. Мягкий плавный градиент от очень светлого вверху до темного внизу. Такой же по виду контейнер для боковых окон, но со скругленными углами. Вокруг блоков контента, основного блока сайта и других элементов сделать мягкие широкие тени (обязательно).

17. Отрисовка  элементов стиля. 
Элементами стиля являются элементы наименования разделов на странице сайта (например, каталог, хит продаж и т.д.). Эти названия отрисовать    Использовать эффект «стеклянных» элементов – лакированно-блестящих и одновременно полупрозрачных. Цвет оранжевый.

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

19. Отрисовка решеток на элемент «калькулятор решеток». 

Необходимо несколько рисунков решеток:
- стационарная;
- распашная;
- стационарная объемная;
- распашная объемная.

Размеры решеток не слишком большие на белом фоне.

По ходу работы были внесены некоторые коррективы. И вот что мы имеем на выходе:



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





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

Так что спасение утопающих – дело рук самих … ну, вы меня понимаете.

[ejjma]

Какие-то очень слабые дизайны.

[blackgeneral]

Какие-то очень слабые дизайны.

Вы дизайнер? Покажите Ваши, которые лучше. Только не за 500 баксов одна страница.