На старте проекта у заказчиков всегда много вопросов: как пойдет работа, что включают этапы, каким будет результат, сколько это стоит? И это — нормально, потому что чем больше кристально прозрачных ответов (а наши — именно такие), тем проще и предсказуемее потом пойдет разработка чего бы то ни было.

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

Многим заказчикам кажется, что этап дизайна сайта — самый понятный. На аналитике обычно ждут какие-то исследования рынка, карты путей пользователя, огромные «деревья» со структурой всего сайта и черно-белые прототипы. Скука. На разработке — миллионы строк кода, хитровыдуманные интеграции и прочие сложности. А вот дизайн — это ж картинки, тут все понятно! 

Да, но нет. Чтобы прийти к «картинкам», сначала заказчику вместе с нами предстоит проделать долгий путь из нескольких этапов:

• Агрегация требований. Большой этап на старте каждого проекта, который выясняет проблемы и боли потенциальной аудитории, ситуацию на рынке и фиксирует бизнес-требования и пожелания всех стейкхолдеров — заинтересованных лиц. Этап помогает определиться с важным функционалом и структурой всего проекта.   
• Прототипы. Создаются на основе агрегации требований и отвечают за путь пользователя на каждой странице сайта: все нужные блоки, разделы и кнопки мы отрисуем именно на этапе прототипирования. Черно-белые прототипы станут своеобразным «скелетом» для будущего дизайна.
• Мудборд (он же — визуальный бриф). Включает в себя сайты-референсы в разных стилях от заказчика, а также от студии, варианты шрифтов и графического контента (примеры фотографий/ изображений/ 3D-моделей), иногда — элементы интерфейсов и форм. Этап помогает определиться со стилистикой проекта и ожиданиями заказчика от визуала.

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

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

Необходимость именно «Вау!» сильно зависит от типа проекта. Для B2B-сервисов и е-кома вау-эффекты скорее вредны, потому что отвлекают от целевого действия. Для имиджевых и корпоративных сайтов — да, иногда это на руку. Но уже на старте важно понять, что именно заказчик понимает под этим «Вау!».

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

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

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

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

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

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

Будем сразу честны — один. Но прежде чем задавать вопрос «А если мне не понравится???», давайте вспомним, что перед появлением дизайн-макетов мы вместе с заказчиками проходим длинный путь от аналитики и прототипов до визуального брифа.

Это помогает нам учесть все выявленные ограничения и пожелания, при этом попав в ожидания с первого раза — поэтому и одной версии дизайна зачастую бывает вполне достаточно. Но (сюрприз) иногда кроме основной версии дизайна мы создаем дополнительную.

Если же на старте проекта заказчик понимает, что ему железно нужно 2 или 3 версии дизайна — не вопрос. Но тогда бюджет на этап дизайна также придется умножить на 2 или на 3 соответственно, поскольку для каждой из таких версий нам придется задействовать дополнительного дизайнера и его время.

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

В 99,9% случаев — нет: адаптивная верстка на десктопе закрывает все потребности пользователя, поэтому отрисовывать макеты отдельно для мобильных устройств не требуется, потому что это:

• дорого — по факту придется выполнять двойную работу, а это двойные затраты по времени и бюджету;
• неудобно — эту двойственную историю позже придется как-то поддерживать в актуальном состоянии. Где-то на десктопе поменяли иконку или блок, где-то на мобилке забыли — и через полгода визуально это могут быть уже два разных проекта. Вам оно надо?

А как же мобайл-фёрст, скажете вы?! Давайте сначала нарисуем макеты для мобильных устройств, а потом на их основе сделаем десктопные — так ведь правильно! Увы, времена, когда подход «мобайл-фёрст» был на коне, безвозвратно прошли, не слишком-то и успев похозяйничать. Ну серьезно, кому нужно тратить деньги на отрисовку 100 500 макетов для мобилки, если можно их не тратить и использовать для этого адаптивную верстку десктопа? Ведь упростить десктопную верстку для мобильных устройств в разы проще, чем пытаться «натянуть» макеты для мобильных устройств на десктоп. 

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

Если совсем коротко — четко и поэтапно. Если нужны подробности — их мы собрали в отдельной статье.