Як інтерактивний дизайн витісняв psd-макети, веб-студія «кліпсайт»
Що не так з етапом дизайну в більшості веб-студій?
Чому я вважаю, що з етапом дизайну щось не так? Просто до недавнього часу серйозні проблеми на цьому етапі виникали і в нашій студії. Мені важливо було зрозуміти, це наша локальна проблема або проблема загальна, тому я досить багато і предметно спілкувався з колегами по цеху на цю тему. З'ясувалося, що в тій чи іншій мірі проблеми з дизайном виникають у всіх.
Проблеми на етапі дизайну
На етапі дизайну є свої проблеми:
1) Дизайнери працюють повільно
2) У дизайнера своє, особисте бачення прекрасного
3) Дистанційні дизайнери часто не мають достатніх компетенцій
Але «проблеми на етапі дизайну» - це занадто загальне формулювання, за якою ховається цілий оберемок проблем, на перший погляд, не пов'язаних між собою:
- Дизайнери працюють повільно. З точки зору керівника проектів, дизайнери працюють сильно повільніше розробників, верстальників, копірайтерів. А якщо дедлайн близько, дизайнери починають працювати зі швидкістю черепахи. Побий їх грім!
- Дизайнери в штаті виробляють свій «почерк», своє бачення прекрасного. Може бути, в ідеальному світі це і добре, але в реальності дизайнер раз по раз малює те, що вважає за потрібне, а не те, що хоче бачити арт-директор. В результаті гіпс знімають, клієнт виїжджає.
- Якщо студія ризикує і робить ставку на дизайнерів-удаленщіков. до вищеописаних проблем додається ризик, який добре ілюструється старої приказки «У полі кожен ховрах - агроном». Дійсно, серед великих тисяч фрілансерів, гордо іменують себе графічними дизайнерами, навряд чи можна знайти пару сотень фахівців, які знають, що насправді означають слова «типографіка», верстка »,« композиція », про що писав Едвард Тафті і чим відрізняється UX від UI. А якщо при цьому всередині студії компетенції арт-директора покладено на керівника проектів, у якого і без дресирування дизайнерів сповнена тікетніца турбот, на виході може трапитися конфуз. Керівник надіявся на дизайнера, дизайнер надіявся на авось, а клієнт отримає те, чого місце в розділі «сатира і гумор», а не на головній сторінці сайту.
Ну добре, проскочили ми між Сциллою дизайнерського его і Харибдою пролюбленних дедлайнів, отримали на руки готовий PSD-макет, видихнули. і зрозуміли, що проблеми тільки почалися.
Спонсор наступного розділу статті: НДІ перерахування проблем в стовпчик імені Гермеса Конрада.
Проблеми, що виникають при роботі з PSD-макетами
1) Не відображено поведінку елементів управління
2) Макет-картинка не дає клієнтові розуміння кінцевого результату
3) Складність в опрацюванні адаптивних версій
4) верстальника доводиться витрачати час на виміри і визначення
5) Робота з шарами
6) Графічні елементи не оптимізовані під веб і названі некоректно
7) Втрата часу або якості при конвертації макета в верстку
Як ми після всього цього знайшли в собі сили не впадати у відчай?
Ви готові зробити такий самий шлях? Може бути, вас переконає мій висновок, до якого я прийшов на фініші. Ось він: дизайнери вступають в таємний профспілка (щось на зразок масонської ложі вільних дизайнерів). Там їх навчають ігнорувати інструкції і успішно протистояти натиску менеджменту на затишний світ чистого творчості.
Ми вирішили провести експеримент зі зміни формату розробки дизайну
У якийсь момент ми в десятий раз перечитували книги про Scrum, Agile і Практики шаманізму Предбайкалья, щоб застосувати експертні знання в організації відділу дизайну, як мій колега сказав: «А що, якщо це буде парне програмування, тільки не програмування?»
На наступний день все було готово для експерименту. В якості піддослідного кролика ми взяли проект одного інтернет-магазину тм. Народження дизайну супроводжувалося муками вже не перший тиждень. З метою анестезії керівник проекту співав замовнику пісні під гітару, римуючи конверсії з часткою ринку. Але клієнт не хотів пісень, клієнт хотів дизайн, і хотів його вже вчора. Ми вирішили йти ва-банк.
У першій ітерації новий формат випробували арт-директор і фронтендер
У команду «парних дизайнерів» ми відрядили досвідченого фронтендера і арт-директора, який працював над цим проектом. Арт-директор повинен був:
Коло завдань фронтендера виглядав так: розслабитися, довіритися арт-директору і робити все, що той говорить. Але дуже швидко. Верстати як метелик, кодіть як бджола.
Чесно кажучи, ми не розраховували на великий успіх. Але ми виконали дуже довгий шлях, щоб зупинятися. Тільки закривши гештальт перевіркою цієї гіпотези, ми могли повернутися в розділ «безнадійно менеджмент» нашої бібліотеки.
Всього 6 годин підтвердили очевидну перевагу нового підходу!
В 9:02 по Москві ми запустили секундоміри. О 10:15 зрозуміли: відбувається щось дивне. Затамувавши подих, ми стежили, як з рядків в SubLime, блок за блоком, з'являється готовий дизайн. Інтерактивний дизайн. На посилання можна натискати, на кнопки можна наводити. Дизайнер, як досвідчений авіадиспетчер, віддавав короткі вказівки: «Дай повітря. Прибери тінь. Добре. Далі ». Фронтендер, як льотчик-снайпер, переключався між властивостями CSS. О 15:00 одноголосно визнали експеримент вдалим: до цього часу велика частина дизайну головної сторінки була готова, і це було добре, тисяча чортів!
Перший же проект був узгоджений без єдиної правки
На наступний день ми презентували готовий інтерактивний дизайн клієнта. І він його прийняв. Він його прийняв! Я твій сайт Error Fatal, він прийняв його без єдиної правки!
Але ми розуміли, що це могло бути випадковістю. У клієнта могло бути гарний настрій, можливо, він був готовий прийняти що завгодно, тільки б зрушити з мертвої точки. Ми не могли повірити, що «парний дизайн» - то, що нам потрібно.
І ми повторили цей експеримент. Потім повторили його ще раз. І ще раз. І ще. Тільки після десятого разу ми змогли сказати самим собі: «Ця штука реально працює».
Пізніше ми зрозуміли, чому відбувається саме так. Інтерактивний дизайн - це зверстана HTML-сторінка (або декілька сторінок, наприклад, головна, внутрішня і картка товару інтернет-магазину), яку клієнт дивиться в браузері на своєму пристрої. Він може скролить, використовувати елементи управління, натискати на кнопки, бачити все ефекти як на готовому сайті. У клієнта просто не залишається питань!
Після десяти ітерацій інтерактивного дизайну ми написали звід правил спринту на етапі дизайну. З'ясувалося, що замість арт-директора на невеликих проектах можна використовувати дизайнера, результат від цього не погіршується. Природно, якщо дизайнер хороший. А поганих ми і не тримаємо.
З 10 проектів тільки один був прийнятий з додатковим набором правок
Знаєте, який результат був після десяти спроб? Десять з десяти! У десяти випадках з десяти клієнт брав дизайн відразу, або з одним набором правок. З одним набором правок, Карл! Середній час розробки дизайн-концепції скоротилося з 14 до 2 робочих днів. Тепер ми настільки впевнені в результатах, що вже пропонуємо інтерактивний дизайн в якості окремої послуги. І я впевнений, що ця послуга буде затребувана не тільки кінцевими клієнтами, а й веб-продакшенами, які до сих пір мучаться з дизайнерами і дизайнами.
Кожен наступний дизайн створюється інтерактивним
Після того, що сталося ми згадуємо роботу з PSD-макетами як страшний сон. А день експерименту нагадує мені сцену з кінофільму "Форрест Гамп": день, коли з ніг маленького Форреста злітають металеві штуки, і він починає бігти. Бігти швидше вітру, бігти, щоб увійти в історію.