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


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

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

Просмотров: 11,109


  • antoshaxor

    Спасибо за инструкцию по пунктам!

  • http://www.facebook.com/biobank Alexander Abramov

    Вот правила, которым редко следуют…
    Но… повторенье – мать ученья… даже картинки, что в этой статье я уже видел несколько лет назад…
    И лучше заказывать не “дизайн сайта”, а разработку сайта… :)
    потому что под словом “дизайн” большинство понимают картинку главной страницы…

  • Сергей

    Спасибо за статью. Ещё бы небольшое количество примеров web-студий, и пример ТЗ какого нибудь сайта-визитки в word и ретвитов было бы гараздо больше.

  • http://optimizatorsha.ru/ Kamskaya

    Марина, я стараюсь с такими клиентами не связываться. Помогать лучше клиентам, которые четко знают, чего хотят. Иначе и клиент никакой помощи не почувствует, и Вы просто потратите время зря.

  • http://optimizatorsha.ru/ Kamskaya

    “Дизайнер рисует дизайн” – на самом деле проблема, с которой я тоже постоянно сталкиваюсь. Что посоветуете в таких случаях?

  • Pingback: Аноним()

  • Paladin

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

  • http://twitter.com/EstaVenta EstaVenta.ru

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

    Делал визитки на удаленке. Говорю код воткни +7(495) и тд. Москва решает.
    Мне (812) втыкали – все равно ведь образец… После этого понял, что дизайнер дрессировке не поддается, мое время дороже и обучать базовым общекультурным вещам не готов. .

  • http://www.facebook.com/walter.salliwan Walter Salliwan

    Статья то что надо! Вот только бывает, определишь ЦА заказчика, подробно обо всем узнаешь, начинаешь предлагать ему свои варианты, а он “Да нет же, я сказал, что нужно сделать так” Я: “Так у вас же аудитория совсем другая?” “Ну и что? Сделайте как я говорю”:))

  • http://stepintheweb.ru/ Алексей

    Вот смотрю я на картинку статьи, на минуту завис. Вроде все ничего, человечки монтируют домен… Но… Где техника безопасности.. Двое чуваков лежат под .com и чинят провода…Чувак справа ковыряет отверткой.. слева – забивает гвоздь.. Очень магнитит своей нелогичностью. За статью спасибо :) Очень полезно!

  • Olga Shatalova

    Отличная статья. Большущее спасибо. Как начинающему web-разработчику она мне очень помогла.

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

    Еще раз большое спасибо за простую, пошаговую и развернутую инструкцию. То о чем смутно догадывалось, наконец встало на место.

  • http://optimizatorsha.ru/ Kamskaya

    Ольга, спасибо за отзыв!