Ugman
Модератор
Как не наступить на грабли, заказывая дизайн сайта?
В данной статье я поделюсь своим опытом выбора 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-студию, которая бы идеально соответствовала его требованиям. Бывает, что студию приходится менять уже в процессе разработки дизайна. Это непросто и неприятно, но успеха добиваешься только тогда, когда выходишь за рамки обыденного.
В данной статье я поделюсь своим опытом выбора 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-студию, которая бы идеально соответствовала его требованиям. Бывает, что студию приходится менять уже в процессе разработки дизайна. Это непросто и неприятно, но успеха добиваешься только тогда, когда выходишь за рамки обыденного.