Как интерактивный дизайн вытеснял PSD-макеты
Как эксперимент по изменению формата разработки макетов помог сократить сроки сдачи дизайн-концепции с 14 до 2 рабочих дней Дата публикации: 16.08.2017 Что не так с этапом дизайна в большинстве веб-студий? Почему я считаю, что с этапом дизайна что-то не так? Просто до недавнего времени серьезные проблемы на этом этапе возникали и в нашей студии. Мне важно было понять, это наша локальная проблема или проблема общая, поэтому я достаточно много и предметно общался с коллегами по цеху на эту тему. Выяснилось, что в той или иной мере проблемы с дизайном возникают у всех. Но «проблемы на этапе дизайна» — это слишком общая формулировка, за которой скрывается целый ворох проблем, на первый взгляд, не связанных между собой: Дизайнеры работают медленно. С точки зрения руководителя проектов, дизайнеры работают сильно медленнее разработчиков, верстальщиков, копирайтеров. А если дедлайн близко, дизайнеры начинают работать со скоростью черепахи. Разрази их гром! Дизайнеры в штате вырабатывают свой «почерк», свое видение прекрасного. Может быть, в идеальном мире это и хорошо, но в реальности дизайнер раз за разом рисует то, что считает нужным, а не то, что хочет видеть арт-директор. В итоге гипс снимают, клиент уезжает. Если студия рискует и делает ставку на дизайнеров-удаленщиков, к вышеописанным проблемам добавляется риск, который хорошо иллюстрируется старой поговоркой «В поле каждый суслик — агроном». Действительно, среди великих тысяч фрилансеров, гордо именующих себя графическими дизайнерами, едва ли можно найти пару сотен специалистов, которые знают, что на самом деле обозначают слова «типографика», верстка», «композиция», о чем писал Эдвард Тафти и чем отличается UX от UI. А если при этом внутри студии компетенции арт-директора возложены на руководителя проектов, у которого и без дрессировки дизайнеров полна тикетница забот, на выходе может случиться конфуз. Руководитель понадеется на дизайнера, дизайнер понадеется на авось, а клиент получит то, чему место в разделе «сатира и юмор», а не на главной странице сайта. Ну хорошо, проскочили мы между Сциллой дизайнерского эго и Харибдой пролюбленных дедлайнов, получили на руки готовый PSD-макет, выдохнули… и поняли, что проблемы только начались. Спонсор следующего раздела статьи: НИИ перечисления проблем в столбик имени Гермеса Конрада. Необходим сайт, мобильное приложение, услуги по SEO или контекстной рекламе? Тендерная площадка WORKSPACE поможет выбрать оптимального исполнителя. База проекта насчитывает более 10 500 агентств. Сервис работает БЕСПЛАТНО как для заказчиков, так и для исполнителей. Проблемы, возникающие при работе с PSD-макетами Поведение элементов управления. Реакция элементов управления сайта на различные события (наведение мышки на пункты меню, кнопки, ссылки, чекбоксы, картинки и т.д.) — часть современного веб-дизайна. Хорошо, если дизайнер добросовестно отнёсся к своей работе и описал эти состояния в макете. Но, как правило, дизайнер упускает этот момент, верстальщик получает макет со статичными элементами, динамика остаётся на его усмотрение. Клиент не представляет себе, как будет выглядеть сайт с утверждённым макетом. Мало согласовать макет, клиенту должен понравиться дизайн, который он увидит на сайте. Страница сайта после конвертации из PSD-макета в верстку часто выглядит иначе. Заказчику нужно мысленно поместить представленную картинку (макет) в окно браузера и масштабировать его до нужных размеров с учетом пропорций и размеров всех возможных экранов. И… ожидания часто расходятся с реальностью. Даже если клиенту понравился дизайн на картинке, его может огорчить то, что он увидит на сайте. Отражение адаптивности макета. Всё чаще клиенты ищут информацию с телефонов и планшетов, там же совершают покупки. Привычка оценивать дизайн с десктопных устройств сменилась необходимостью создавать макеты под мобильные. Если верстальщик поймал удачу и получил макет, учитывающий версии под мобильные устройства, его ждут максимум пять ширин. Остальные — продукт творчества верстальщика. Замеры и определения. На этапе верстки значительное время верстальщика тратится на определение шрифтов, цветов, размеров и отступов. Если дизайнер определял целостность композиции «на глаз», то же самое приходится делать и верстальщику: замерять пипеткой нужный цвет, линейкой — каждый миллиметр. Выравнивание шрифтов, ссылок и иллюстраций вручную — бессмысленная трата времени и душевного здоровья всех участников процесса. Слои… Предмет взаимной ненависти и тысячелетней войны между дизайнерами и верстальщиками — конечно же, слои в макете. Макет, в котором соблюдён порядок слоёв — редкое чудо. Но даже в этом случае верстальщику придётся потратить время на расшифровку названий каждого слоя. Материалы макета не оптимизированы под веб-стандарты. Ещё реже в макете можно найти архив, в котором собраны, правильно названы и оптимизированы под веб все графические элементы. Если такого архива нет, его создаёт (затратив ещё энное количество времени) верстальщик. Неизбежное изменение дизайна при переносе из PSD-макета в верстку. Что делает верстальщик, когда видит ошибку в макете (даже если это не ошибка)? Вариант 1. Правильно, обращается к автору макета и задаёт вопросы. Тратит время — и своё, и дизайнера. Идёт вносить изменения в вёрстку. Снова натыкается на непонятные моменты, снова обращается к дизайнеру (ровно столько раз, сколько вопросов возникло в процессе переноса макета в вёрстку). Умножаем количество вопросов на среднюю продолжительность диалога специалистов. Получаем несколько часов упущенного времени. Вариант 2. Верстальщик справляется самостоятельно, в процессе возникает ещё больше ошибок, они требуют ещё больше времени на исправление. Какой бы вариант ни выбрал верстальщик, потери (времени или качества) неизбежны. Как мы после всего этого нашли в себе силы не впадать в отчаяние? Мы боролись с описанными проблемами «в лоб», как говорят в спорте — на морально волевых. Несколько лет мы ругали дизайнеров, хвалили дизайнеров, выгоняли дизайнеров, нанимали дизайнеров, писали инструкции «как правильно делать дизайн», потом инструкции «как правильно читать инструкции». Толку — чуть. Вы готовы проделать такой же путь? Может быть, вас переубедит мой вывод, к которому я пришёл на финише. Вот он: дизайнеры вступают в тайный профсоюз (что-то вроде масонской ложи вольных дизайнеров). Там их учат игнорировать инструкции и успешно противостоять натиску менеджмента на уютный мирок чистого творчества. В какой-то момент мы в десятый раз перечитывали книги про Scrum, Agile и Практики шаманизма Предбайкалья, чтобы применить экспертные знания в организации отдела дизайна, как мой коллега сказал: «А что, если это будет парное программирование, только не программирование?» На следующий день все было готово для эксперимента. В качестве подопытного кролика мы взяли проект одного интернет-магазинатм. Рождение дизайна сопровождалось муками уже не первую неделю. В целях анестезии руководитель проекта пел заказчику песни под гитару, рифмуя конверсии с долей рынка. Но клиент не хотел песен, клиент хотел дизайн, и хотел его уже вчера. Мы решили идти ва-банк. В команду «парных дизайнеров» мы отрядили опытного фронтэндера и арт-директора, работавшего над этим проектом. Арт-директор должен был: подготовить отдельные элементы дизайна; держать в голове всю концепцию; руководить техническим специалистом (фронтэндером) аки аватаром своим. Круг задач фронтендера выглядел так: расслабиться, довериться арт-директору и делать всё, что тот говорит. Но очень быстро. Верстать как бабочка, кодить как пчела. Честно говоря, мы не рассчитывали на большой успех. Но мы проделали слишком длинный путь, чтобы останавливаться. Только закрыв гештальт проверкой этой гипотезы, мы могли вернуться в раздел «Безнадёжный менеджмент» нашей библиотеки. В 9:02 по Москве мы запустили секундомеры. В 10:15 поняли: происходит нечто удивительное. Затаив дыхание, мы следили, как из строчек в SubLime, блок за блоком, появляется готовый дизайн. Интерактивный дизайн. На ссылки можно нажимать, на кнопки можно наводить. Дизайнер, как опытный авиадиспетчер, отдавал короткие указания: «Дай воздуха. Прибери тень. Хорошо. Дальше». Фронтэндер, как летчик-снайпер, переключался между свойствами CSS. В 15:00 единогласно признали эксперимент удачным: к этому времени большая часть дизайна главной страницы была готова, и это было хорошо, тысяча чертей! На следующий день мы презентовали готовый интерактивный дизайн клиенту. И он его принял. Он его принял! Я твой сайт Error Fatal, он принял его без единой правки! Но мы понимали, что это могло быть случайностью. У клиента могло быть хорошее настроение, возможно, он был готов принять что угодно, только бы сдвинуться с мертвой точки. Мы не могли поверить, что «парный дизайн» — то, что нам нужно. И мы повторили этот эксперимент. Потом повторили его еще раз. И еще раз. И еще. Только после десятого раза мы смогли сказать самим себе: «Эта штука реально работает». Позже мы поняли, почему происходит именно так. Интерактивный дизайн — это сверстанная HTML-страница (или несколько страниц, например, главная, внутренняя и карточка товара интернет-магазина), которую клиент смотрит в браузере на своем устройстве. Он может скролить, использовать элементы управления, нажимать на кнопки, видеть все эффекты как на готовом сайте. У клиента просто не остается вопросов! После десяти итераций интерактивного дизайна мы написали свод правил спринта на этапе дизайна. Выяснилось, что вместо арт-директора на небольших проектах можно использовать дизайнера, результат от этого не ухудшается. Естественно, если дизайнер хороший. А плохих мы и не держим. Знаете, какой результат был после десяти попыток? Десять из десяти! В десяти случаях из десяти клиент принимал дизайн сразу, либо с одним набором правок. С одним набором правок, Карл! Среднее время разработки дизайн-концепции сократилось с 14 до 2 рабочих дней. Теперь мы настолько уверены в результатах, что уже предлагаем интерактивный дизайн в качестве отдельной услуги. И я уверен, что эта услуга будет востребована не только конечными клиентами, но и веб-продакшенами, которые до сих пор мучаются с дизайнерами и дизайнами. После случившегося мы вспоминаем работу с PSD-макетами как страшный сон. А день эксперимента напоминает мне сцену из кинофильма «Форрест Гамп»: день, когда с ног маленького Форреста слетают металлические штуки, и он начинает бежать. Бежать быстрее ветра, бежать, чтобы войти в историю. Run, Clipsite, run! Комментарий: Илья Леонов, маркетолог веб-платформы Webasyst Полностью поддерживаю автора статьи. И с медленной работой дизайнеров, и с бесконечным выяснением деталей макета приходилось сталкиваться в личной практике не раз. В Webasyst мы не занимаемся реализацией частных проектов клиентов. Поэтому особо остро проблема с разработкой дизайна никогда не стояла. Но когда мы работаем над интерфейсами собственных продуктов, верстальщик или разработчик очень часто работает в паре с дизайнером. Безусловно, совместная работа редко начинается с нуля — ей предшествует определённый этап подготовки макетов. Но участие дизайнера в дальнейшем процессе вёрстки явно оптимизирует процесс, сокращая время работы и позволяя добиться лучшего результата. Комментарий: Константин Нефедов, управляющий партнер digital-агентства «ДАЛЕЕ» Очень заманчивый подход, но мне кажется, что это будет работать только на каком-то очень ограниченном срезе клиентов, когда сайт рассматривается как набор лендингов для продажи или является необходимым атрибутом для поисковой оптимизации/контекстной рекламы. Такие решения будут очень ограниченными по дизайну. Мне кажется, с большим успехом и эффективностью эту пару можно посадить за wix.com. То есть в этом методе нет никакого прорыва. Наоборот, это шаг на два десятилетия назад, когда дизайн сайта делался сразу верстальщиком. Если посмотреть ретроспективно, то создание дизайн-макетов сайтов в Photoshop было витком эволюции, которое позволяло не переверстывать сайт по комментариям клиента. Следующим этапом стало понимание, что клиент не разделяет контент сайта, его приоритеты и сам дизайн. Так появился следующий виток — прототипирование. Этот этап заведомо был бесцветным с упрощёнными элементами дизайна, чтобы заказчик мог сосредоточиться на содержимом сайта. Это дает возможность уменьшить количество итераций уже при создании дизайн-макетов. Мы собственно придерживаемся этого workflow. Могут меняться инструменты, но каждый этап мотивирован текущими технологиями и коммуникационным циклом с клиентом, поэтому устранение какого-либо из этапов будет сказываться на качестве. Комментарий: Мы не видим смысла в оптимизации важнейшего этапа — дизайна. Дизайн — это готовый торт. Он состоит из множества ингредиентов и этапов. Запороть любой из них — запороть дизайн. 1 шаг — анализ потребностей клиента: Анализ поведения текущих пользователей системы, подготовка аналитического отчета; Создание креативной концепции дизайна сайта главной страницы в 3 вариантах; Художественное задание: анализ целевой аудитории и конкурентов, лучшие мировые практики; информационная архитектура; сценарии использования; функциональное описание; концептуальная архитектура (схема интеграции); HTML-макеты, демонстрирующие дизайн-концепцию и основные сценарии использования (главная страница и до трёх внутренних), не менее трех вариантов последовательно. Вот минимум, который должен быть. Комментарий: Инга Таирова, заместитель директора по развитию интернет-агентства Bquadro Соглашусь, что зачастую при передаче psd-макетов у верстальщика возникает много вопросов, на решение которых приходится тратить его время и время дизайнера. Это общая проблема, но возникает она из-за неправильной организации работы. Грамотно подготовить макет (расставить по порядку слои, сгруппировать и назвать их, выделить цветом, собрать шрифты, иконки и т.п.) — это отдельная задача перед передачей макета в вёрстку. Это своего рода правила хорошего тона, которые нужно начинать вырабатывать как можно раньше. От того, как выстроен этот процесс в студии, зависит качество результата. За много лет мы наладили и регламентировали этапы работы над проектом, в том числе в аспекте дизайна и вёрстки. Да, интерактивные макеты гораздо нагляднее презентуют будущий сайт. Без программной части они показывают то, как сайт будет выглядеть. Однако здесь есть некоторые разногласия с автором. Во-первых, интерактивным дизайном автор называет собственно вёрстку. При этом в описанном эксперименте над проектом помимо верстальщика работает ещё и (sic!) арт-директор! Помимо того, что работать, когда у тебя над душой кто-то стоит, не очень приятно, так это ещё и экономически неэффективно: тратится время двух специалистов на выполнение одной задачи. Ещё один важный момент — разная сложность проекта. Если речь идёт о корпоративном сайте с индивидуальным дизайном, то вёрстка главной страницы занимает явно больше 6 часов, заявленных автором статьи. Необходимо разделить презентационный и производственный процессы. Для презентации можно использовать различные сервисы, которые помогают быстро создать рабочий интерактивный прототип (Invision, Marvel и др.). Подготовка и перелинковка около 10 страниц займёт около 40 минут, что позволит сократить время на подготовку презентации клиенту. Автор: Андрей Левашов, Клипсайт (Руководитель проектов, разработчик) Иллюстрация: http://crystal-koblevo.com/sites/default/files/styles/blog_image/public/f429aaeb49b1ca31650ab4c3e151cf851402927816.png Please enable JavaScript to view the comments powered by Disqus.Полный текст статьи читайте на CMS Magazine
