Вы здесь

Как интерактивный дизайн вытеснял PSD-макеты

Андрей Левашов
Руководитель проектов, разработчик
27.06.2017г.
Если вы не хотите читать всю статью, для вас мы выделили тезисы

Что не так с этапом дизайна в большинстве веб-студий?

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

Проблемы на этапе дизайна

На этапе дизайна есть свои проблемы:

1) Дизайнеры работают медленно

2) У дизайнера свое, личное видение прекрасного

3) Удаленные дизайнеры часто не имеют достаточных компетенций

Но «проблемы на этапе дизайна» — это слишком общая формулировка, за которой скрывается целый ворох проблем, на первый взгляд, не связанных между собой:

  • Дизайнеры работают медленно. С точки зрения руководителя проектов, дизайнеры работают сильно медленнее разработчиков, верстальщиков, копирайтеров. А если дедлайн близко, дизайнеры начинают работать со скоростью черепахи. Разрази их гром!
  • Дизайнеры в штате вырабатывают свой «почерк», свое видение прекрасного. Может быть, в идеальном мире это и хорошо, но в реальности дизайнер раз за разом рисует то, что считает нужным, а не то, что хочет видеть арт-директор. В итоге гипс снимают, клиент уезжает.
  • Если студия рискует и делает ставку на дизайнеров-удаленщиков, к вышеописанным проблемам добавляется риск, который хорошо иллюстрируется старой поговоркой «В поле каждый суслик — агроном». Действительно, среди великих тысяч фрилансеров, гордо именующих себя графическими дизайнерами, едва ли можно найти пару сотен специалистов, которые знают, что на самом деле обозначают слова «типографика», верстка», «композиция», о чем писал Эдвард Тафти и чем отличается UX от UI. А если при этом внутри студии компетенции арт-директора возложены на руководителя проектов, у которого и без дрессировки дизайнеров полна тикетница забот, на выходе может случиться конфуз. Руководитель понадеется на дизайнера, дизайнер понадеется на авось, а клиент получит то, чему место в разделе «сатира и юмор», а не на главной странице сайта.

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

Спонсор следующего раздела статьи: НИИ перечисления проблем в столбик имени Гермеса Конрада.

Проблемы, возникающие при работе с PSD-макетами

Проблемы PSD-макетов

1) Не отражено поведение элементов управления

2) Макет-картинка не дает клиенту понимания конечного результата

3) Сложность в проработке адаптивных версий

4) Верстальщику приходится тратить время на замеры и определения

5) Работа со слоями

6) Графические элементы не оптимизированы под веб и названы некорректно

7) Потеря времени или качества при конвертировании макета в верстку

  • Поведение элементов управления. Реакция элементов управления сайта на различные события (наведение мышки на пункты меню, кнопки, ссылки, чекбоксы, картинки и т.д.) — часть современного веб-дизайна. Хорошо, если дизайнер добросовестно отнёсся к своей работе и описал эти состояния в макете. Но, как правило, дизайнер упускает этот момент, верстальщик получает макет со статичными элементами, динамика остаётся на его усмотрение.
  • Клиент не представляет себе, как будет выглядеть сайт с утверждённым макетом. Мало согласовать макет, клиенту должен понравиться дизайн, который он увидит на сайте. Страница сайта после конвертации из PSD-макета в верстку часто выглядит иначе. Заказчику нужно мысленно поместить представленную картинку (макет) в окно браузера и масштабировать его до нужных размеров с учетом пропорций и размеров всех возможных экранов. И… ожидания часто расходятся с реальностью. Даже если клиенту понравился дизайн на картинке, его может огорчить то, что он увидит на сайте.
  • Отражение адаптивности макета. Всё чаще клиенты ищут информацию с телефонов и планшетов, там же совершают покупки. Привычка оценивать дизайн с десктопных устройств сменилась необходимостью создавать макеты под мобильные. Если верстальщик поймал удачу и получил макет, учитывающий версии под мобильные устройства, его ждут максимум пять ширин. Остальные – продукт творчества верстальщика.
  • Замеры и определения. На этапе верстки значительное время верстальщика тратится на определение шрифтов, цветов, размеров и отступов. Если дизайнер определял целостность композиции «на глаз», то же самое приходится делать и верстальщику: замерять пипеткой нужный цвет, линейкой – каждый миллиметр. Выравнивание шрифтов, ссылок и иллюстраций вручную – бессмысленная трата времени и душевного здоровья всех участников процесса.
  • Слои… Предмет взаимной ненависти и тысячелетней войны между дизайнерами и верстальщиками — конечно же, слои в макете.  Макет, в котором соблюдён порядок слоёв — редкое чудо. Но даже в этом случае верстальщику придётся потратить время на расшифровку названий каждого слоя.
  • Материалы макета не оптимизированы под веб-стандарты.  Ещё реже в макете можно найти архив, в котором собраны, правильно названы и оптимизированы под веб все графические элементы. Если такого архива нет, его создаёт (затратив ещё энное количество времени) верстальщик.
  • Неизбежное изменение дизайна при переносе из PSD-макета в верстку. Что делает верстальщик, когда видит ошибку в макете (даже если это не ошибка)? Вариант 1. Правильно, обращается к автору макета и задаёт вопросы. Тратит время – и своё, и дизайнера. Идёт вносить изменения в вёрстку. Снова натыкается на непонятные моменты, снова обращается к дизайнеру (ровно столько раз, сколько вопросов возникло в процессе переноса макета в вёрстку). Умножаем количество вопросов на среднюю продолжительность диалога специалистов. Получаем несколько часов упущенного времени.  Вариант 2. Верстальщик справляется самостоятельно, в процессе возникает ещё больше ошибок, они требуют ещё больше времени на исправление. Какой бы вариант ни выбрал верстальщик, потери (времени или качества) неизбежны.

Как мы после всего этого нашли в себе силы не впадать в отчаяние?

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

Вы готовы проделать такой же путь? Может быть, вас переубедит мой вывод, к которому я пришёл на финише. Вот он: дизайнеры вступают в тайный профсоюз (что-то вроде масонской ложи вольных дизайнеров). Там их учат игнорировать инструкции и успешно противостоять натиску менеджмента на уютный мирок чистого творчества.

Эксперимент

Мы решили провести эксперимент по изменению формата разработки дизайна

В какой-то момент мы в десятый раз перечитывали книги про Scrum, Agile и Практики шаманизма Предбайкалья, чтобы применить экспертные знания в организации отдела дизайна, как мой коллега сказал: «А что, если это будет парное программирование, только не программирование?»

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

Первый подход

В первой итерации новый формат опробовали арт-директор и фронтэндер

В команду «парных дизайнеров» мы отрядили опытного фронтэндера и арт-директора, работавшего над этим проектом. Арт-директор должен был:

  • подготовить отдельные элементы дизайна;
  • держать в голове всю концепцию;
  • руководить техническим специалистом (фронтэндером) аки аватаром своим.

Круг задач фронтендера выглядел так: расслабиться, довериться арт-директору и делать всё, что тот говорит. Но очень быстро. Верстать как бабочка, кодить как пчела.

Честно говоря, мы не рассчитывали на большой успех. Но мы проделали слишком длинный путь, чтобы останавливаться. Только закрыв гештальт проверкой этой гипотезы, мы могли вернуться в раздел «Безнадёжный менеджмент» нашей библиотеки.

Первый успех

Всего 6 часов подтвердили очевидное преимущество нового подхода! 

В 9:02 по Москве мы запустили секундомеры. В 10:15 поняли: происходит нечто удивительное. Затаив дыхание, мы следили, как из строчек в SubLime, блок за блоком, появляется готовый дизайн. Интерактивный дизайн. На ссылки можно нажимать, на кнопки можно наводить. Дизайнер, как опытный авиадиспетчер, отдавал короткие указания: «Дай воздуха. Прибери тень. Хорошо. Дальше». Фронтэндер, как летчик-снайпер, переключался между свойствами CSS. В 15:00 единогласно признали эксперимент удачным: к этому времени большая часть дизайна главной страницы была готова, и это было хорошо, тысяча чертей!

Согласование!

Первый же проект был согласован без единой правки

На следующий день мы презентовали готовый интерактивный дизайн клиенту. И он его принял. Он его принял! Я твой сайт Error Fatal, он принял его без единой правки!

Но мы понимали, что это могло быть случайностью. У клиента могло быть хорошее настроение, возможно, он был готов принять что угодно, только бы сдвинуться с мертвой точки. Мы не могли поверить, что «парный дизайн» — то, что нам нужно.
И мы повторили этот эксперимент. Потом повторили его еще раз. И еще раз. И еще. Только после десятого раза мы смогли сказать самим себе: «Эта штука реально работает».

Позже мы поняли, почему происходит именно так. Интерактивный дизайн – это сверстанная HTML-страница (или несколько страниц, например, главная, внутренняя и карточка товара интернет-магазина), которую клиент смотрит в браузере на своем устройстве. Он может скролить, использовать элементы управления, нажимать на кнопки, видеть все эффекты как на готовом сайте. У клиента просто не остается вопросов!

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

10 из 10!

Из 10 проектов только один был принят с дополнительным набором правок

Знаете, какой результат был после десяти попыток? Десять из десяти! В десяти случаях из десяти клиент принимал дизайн сразу, либо с одним набором правок. С одним набором правок, Карл! Среднее время разработки дизайн-концепции сократилось с 14 до 2 рабочих дней. Теперь мы настолько уверены в результатах, что уже предлагаем интерактивный дизайн в качестве отдельной услуги. И я уверен, что эта услуга будет востребована не только конечными клиентами, но и веб-продакшенами, которые до сих пор мучаются с дизайнерами и дизайнами.

Никаких PSD!

Каждый последующий дизайн создается интерактивным

После случившегося мы вспоминаем работу с PSD-макетами как страшный сон. А день эксперимента напоминает мне сцену из кинофильма “Форрест Гамп”: день, когда с ног маленького Форреста слетают металлические штуки, и он начинает бежать. Бежать быстрее ветра, бежать, чтобы войти в историю.

Run, Clipsite, run!