Не так давно в рамках потрясающей Smashing Conference во Фрайбурге, я выступил с речью, написанной буквально за несколько часов до мероприятия. Я решил не использовать в своей презентации слайды и вместо этого более подробно заострил внимание на трех очень важных пунктах:

1. Адаптивный дизайн — проблема не только дизайна и веб-разработки.
2. Клиент недостаточно вовлечен в процесс работы над проектом.
3. Как сказать в лицо своему клиенту, что он идиот.

Роман Павленко
Digital Creative Director Leo Burnett Group Russia

Ну если вы на это решитесь, то первым делом подойдите к зеркалу и скажите это себе. С клиентами — это как с правительством, мы имеем таких, каких заслуживаем.

Вот ряд тех заметок, которые я набросал для себя перед выступлением.

Адаптивный дизайн — проблема, не только дизайна и веб-разработки

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

Традиционная схема работы

Так максимально упрощенно выглядит процесс работы:

• Планирование.
• Дизайн.
• Разработка.
• Запуск.

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

Сам процесс дизайна подразумевает под собой бесконечную творческую деятельность, включающую в себя графический, информационный дизайн и многое другое. Так, статичные дизайн-макеты стали традиционной валютой веб-дизайнеров. Это то, что дизайнеры используют для экспериментов с креативными идеями, которые затем передаются для согласования клиентам, и далее переходят front-end разработчикам в качестве требований к созданию сайта.

Татьяна Назарова
Ведущий дизайнер AGIMA

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

Роман Павленко
Digital Creative Director Leo Burnett Group Russia

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

Разработку осуществляют, как правило, front-end разработчики. Они очень часто работают отдельно от дизайнеров, и могут быть сильно ограничены во взаимодействии с ними.

Татьяна Назарова
Ведущий дизайнер AGIMA

Жизненный факт разобщенности работы дизайнера и программиста, несет за собой, как правило, печальные последствия. Командная работа очень важна, а на этапе верстки и программирования — особенно.

Что касается этапа запуска, то для меня это какая-то черная магия, я ничего в этом не понимаю.

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

А теперь сравните это с тем, что я привык называть «адаптивный рабочий процесс»:

• Планирование.
• Комбинированный и итеративный процесс дизайна и разработки.
• Запуск.

В этом итеративном процессе в стиле agile вся команда работает сплоченно по ходу создания дизайна, разработки, тестирования, внесения правок и улучшений.

Тестирование дизайна и тестирование девайсов

Я нахожу тестирование моего дизайна на реальных смартфонах и планшетах по ходу работы удивительно полезным. Таким образом, у меня одновременно есть доступ сразу к нескольким девайсам. Но ведь не каждый может себе позволить все необходимые устройства. В этом году Стефани Ригер разместила пост, в котором она перечислила целый ряд девайсов, необходимых для функциональной работы. В этот список она включила iPhone, iPad, Kindle Fire и три различные версии Android’a. Но я лично считаю, что это слишком.

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

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

При создании адаптивного веб-дизайна необходимо применять адаптивное мышление

Компании и клиенты, желающие перейти на новый адаптивный уровень, должны провести реорганизацию многих аспектов своего бизнеса. Наши клиенты теперь должны переструктурировать процесс заказов. Например, в моем агентстве Stuff and Nonsense я до сих пор сталкиваюсь с потенциальными клиентами, заказывающими лишь статичные дизайн-макеты. Они убеждены, что мы до сих пор работаем в Photoshop или Fireworks потому, что это именно то, что дизайнеры предлагали им на протяжении более чем десяти лет.

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

Команда дизайнеров и разработчиков тоже должна быть реструктурирована. То, что дизайнерам, имеющим опыт работы исключительно с Photoshop и Fireworks, нужно очень многому научиться — это факт. Статичные дизайн-макеты сайта, о которых я говорил, уже не предоставляют нам того, что нам нужно в контексте адаптивности. Это как прийти на перестрелку с ножом. Подробнее об этом я расскажу чуть позже.

Участие клиента в процессе работы не налажено

Я знаю, что большинство людей знают обо мне благодаря моим статьям и выступлениям на тему CSS, однако некоторые даже не догадываются, что я зарабатываю на жизнь тем, что создаю дизайн для клиентов. В последнее время я работал над проектами с STV, где я являюсь внештатным руководящим дизайнером; с Hillsborough Independent Panel, для которой я создавал сайт, посвященный трагической смерти 96 Ливерпульских фанатов в 1989; а также с ISO (Международной Организацией по Стандартизации).

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

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

• Отображать Web fonts (нестандартные шрифты) и стандартные браузерные шрифты;
• Предоставлять доступ к полному спектру возможностей CSS;
• (Свободно) отображать шаблоны, размеры которых заданы в процентах;
• (Свободно) демонстрировать анимацию, transitions и псевдо-классы из CSS3.

Говоря «Свободно» я имею в виду, что, конечно же, не без часов утомительной отладки, которые мы могли бы потратить на креатив.

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

Татьяна Назарова
Ведущий дизайнер AGIMA

Важный момент в совместной работе над проектом с заказчиком — это необходимость обучения заказчика, разъяснения особенностей работы адаптивного сайта. Так же как и на заре интернета, когда сайты были роскошью, новая эстетика и законы взаимодействия вызывали кучу комментариев и непонимания. Так и с появлением адаптивных сайтов их особенности нуждаются в «расшифровке», а также дополнительной работе над структурированием контента.

Дизайнерская атмосфера

Что я подразумеваю под «атмосферой»?

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

Именно по этой причине нам требуется новый термин для определения того, что останется, когда мы уберем расположение элементов из дизайна. То, что останется, я называю «атмосферой», потому что это часто подразумевает под собой нечто, что вы чувствуете, но не можете объяснить. Так, например, атмосфера в кабинете после того, как кто-то в нем поругался. Или атмосфера на футбольном матче.

Роман Павленко
Digital Creative Director Leo Burnett Group Russia

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

Татьяна Назарова
Ведущий дизайнер AGIMA

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

Ремарка: почему большинство веб-сайтов имеют фикс в 960 пикселей? Может потому, что дизайнер изначально демонстрирует своему клиенту статичный макет в 960 пикселях и предлагает ему остановиться на этом предложении? И с этим впоследствии работают девелоперы. Вот почему в прошлом у нас уходило слишком много времени на верстку скругленных углов в HTML, CSS и JavaScript, чтобы они правильно отображались в старых версиях Internet Explorer. Мы продавали скругленные углы нашим клиентам через эти статичные макеты. Эта была наша большая ошибка. Только наша.

Работайте в Photoshop и Fireworks в любом случае (я лично работаю). Делайте статичные макеты настолько яркими и детализированными, насколько пожелаете. Только ни в коем случае не формируйте неправильное понимание у клиента, показывая их в качестве примера того, как будет выглядеть сайт в разных браузерах и на различных устройствах. И тем более не подписывайте эти макеты в качестве окончательных вариантов. Создавайте верные ожидания, демонстрируя интерактивные дизайны, созданные при помощи HTML, CSS и JavaScript.

Татьяна Назарова
Ведущий дизайнер AGIMA

Практически каждый дизайнер уже давно приучился для презентации заказчику подставлять макет дизайна сайта в браузере (для этого даже есть специальные сервисы, такие как www.browsercover.me).

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

Как сказать в лицо своему клиенту, что он идиот, при этом вместо увольнения получить в ответ слова благодарности

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

Не высылайте своим клиентам по почте макеты сайта с просьбой «прокомментировать». Вы же не сумасшедшие!? В таком случае, не нужно просто загружать дизайн-макеты в Basecamp и ожидать конструктивных правок, не сопроводив их подробными объяснениями, как их понимать.

Татьяна Назарова
Ведущий дизайнер AGIMA

Как известно, идеальный вариант — презентовать лично. Но часто это невозможно. Мне не раз приходилось сталкиваться с интересной закономерностью: количество правок по макету обратно пропорционально количеству сопроводительного текста.

Не нужно оттягивать «до последнего» тот момент, когда вы, наконец, будете готовы показать финальный вариант клиенту. Так вы ничего не добьетесь, кроме раздражения и недовольства. Нужно действовать с точностью наоборот: держать своих клиентов в курсе дел на всех этапах работы, а не только на тех, на которых требуется подпись клиента. Именно поэтому на протяжении последних нескольких лет, я стараюсь как можно чаще физически встречаться с клиентами. Когда нет такой возможности, я выкладываю все новые изменения в общий Dropbox, чтобы клиент мог следить за моим прогрессом. У нас даже постоянно открыто окно в Skype на тот случай, если нужно оперативно что-то обсудить.

Создайте благоприятные условия для получения структурированных правок, и фильтруйте все неконструктивные комментарии, полученные по телефону или почте. Идеально настоять на том, чтобы все ваши обсуждения с клиентом велись «с глазу на глаз», где бы вы могли ограничить его внимание вопросами дизайна. Например, требуйте ответов на конкретные вопросы, связанные с выбором шрифта и оформления.

Татьяна Назарова
Ведущий дизайнер AGIMA

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

В моей веб-студии я легко организовал процесс общения с клиентами путем создания секции обсуждения дизайна. А теперь подробнее об этом.

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

Помните об этом во время обсуждения процесса работы с вашим клиентом, дайте ему понять, что установленные вами условия максимально положительно скажутся на качестве выполненной работы.

Правило № 1

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

Правило № 2

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

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

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

Правило № 3

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

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

Татьяна Назарова
Ведущий дизайнер AGIMA

Но важно помнить, что помимо того, что мы являемся профессионалами своего дела, клиент в свою очередь — профессионал своего дела. Он не пациент у доктора на приеме, а заказчик у портного. И если клиент говорит: «Что-то под мышками жмет», то стоит проверить выкройку ещё раз, прежде чем распрощаться с заказом, назвав заказчика идиотом ;)

Оригинал: http://www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/

Александр Першин
Генеральный директор в HTML Academy

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

Дизайнеры должны научиться верстать. Отлично верстать.

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

К предметной области дизайнера относятся веб-технологии (HTML, CSS, JavaScript). В них дизайнер должен разбираться очень хорошо. Веб-технологии — это точно такие же инструменты веб-дизайнера, как и графические редакторы.

Лет 5 назад дизайнер мог позволить себе «творить» в Фотошопе, абсолютно не понимая, как макет можно сверстать. Потом с этим макетом мучался несчастный верстальщик. А дизайнер, от которого требовалось лишь рисовать красивые картинки шириной в 1000 пикселей, был весь в шоколаде.

Пришла адаптивность. Теперь показать клиенту одну картинку в качестве демонстрации дизайна недостаточно. Необходимо показывать живую страничку, которая обладает и «дизайнерской атмосферой», и адаптивным поведением.

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