Как не наступить на грабли, заказывая дизайн сайта

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

Хочу предупредить сразу, что речь пойдет о дизайне для серьезного проекта (корпоративного сайта, интернет-магазина, портала), а не очередного МФА или сателлита. И речь именно о дизайне, а не о разработке сайта под ключ.

Несерьезный подход

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

Заказчик обращается в web-студию или к дизайнеру-фрилансеру, рассказывает, что какой сайт ему нужен. Описание обычно сводится к общим фразам: “чтоб всем нравилось”, “чтоб позавидовали конкуренты”, или “чтоб было не хуже, чем у Пети“ и т.д. Дизайнер задает несколько уточняющих вопросов про цветовую гамму, цвет колонок и размер шрифтов, получает предоплату и приступает к работе. При этом считается, что он по умолчанию обладает неким телепатическим даром: ТЗ для него – простая формальность, а юзабилити у него в крови.

По своему опыту таких ситуаций могу сказать, что заказчику повезет, если в итоге макет будет хотя бы на 50% соответствовать его ожиданиям. Что дальше? В процессе сложных длительных уточнений и разъяснений макет несколько раз меняется, правится, “совершенствуется”, и в итоге все-таки с натяжкой утверждается. Дизайн натягивается на движок, сайт выходит в открытый доступ. А через 3-4 месяца заказчик осознает, что при разработке дизайна забыли учесть еще одну “деталь” – юзабилити. В итоге весь процесс до боли напоминает широко известную картинку:

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

Профессиональный подход

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

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

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

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

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

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

6. Разработка и утверждение прототипов. На основании ТЗ строится прототип каждой страницы. Прототип – это схематический макет без дизайна, который определяет размер и положение элемента в макете. Утвержденные заказчиком прототипы передаются дизайнеру, начинается последний этап работ.

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

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

Что делать, если нет денег на профессиональную студию, но не хочется быть лузером?

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

Что должно содержать ТЗ на разработку дизайна сайта

Ваша задача – не просто как можно детальнее описать требования к дизайну, но сделать документ четким, структурированным и понятным. Очень важно использовать маркировку пунктов, чтоб при дальнейшем обсуждении ТЗ любая из сторон могла просто ссылаться, например, на пункт “4 B”, а не объяснять, что речь идет о моменте, описанном на 3-й странице во втором абзаце снизу.
Итак, базовое ТЗ на разработку дизайна сайта должно содержать:

1. Общее описание сайта
Каковы цели сайта, кто является его целевой аудиторией? Какие ощущения он должен вызывать у посетителей – доверие, радость, солидность, оригинальность и т.д. С чем должен ассоциироваться? Должен ли запоминаться? Иными словами, в этом пункте нужно сосредоточить внимание на эмоциональных характеристиках будущего дизайна. Не советую сводить этот пункт до описания типа «Красивый дизайн, который должен вызывать позитивные эмоции». Поверьте, понятие красоты и позитива у вас и у дизайнера может очень сильно отличаться.

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

3. Общие пожелания по дизайну:
- варианты предпочтений по цветовой гамме, желательно с примерами, которые можно генерировать с помощью сервиса Colorscheme.ru;

– размер сайта (резиновый, фиксированный, мультиразмерный) и разрешение, под которое его нужно будет адаптировать;

– базовая структура страницы: количество колонок, наличие шапки и футера и других сквозных элементов;

- другие пожелания, которые касаются конкретных моментов внешнего вида сайта.

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

Шапка: каково ее целевое назначение? Должна привлекать к себе внимание, или наоборот – не бросаться в глаза? Какие инфоблоки должны там размещаться? и т.д. Футер – аналогично шапке. Назначение, содержание, акценты.

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

5. Описание каждой страницы, для которой требуется макет

Описание каждого макета должно включать:

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

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

– целевое действие, которое должен совершить пользователь на данной странице (зарегистрироваться, выбрать товар, оставить отзыв, оплатить и т.д.);

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

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

Что делать, если вам нужно составить ТЗ на дизайн сайта, но вы даже не представляете, с какой стороны подойти к этому вопросу? Найдите компанию, которая поможет определиться с концепцией и структурой сайта и на основании вашего видения проблем целевой аудитории составит внятное ТЗ. Кстати, (у нас тоже есть такая услуга).

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

С ув., Елена Камская.

• Комментарии