За поширеним твердженням продуктові дизайнери мають вирішувати проблеми користувачів. Cергій Валюх з Tubik Studio вважає, що це хибна думка. Тому, замість того, щоб зменшувати біль юзерів, його агенція занурилася в мистецтво.

Законспектували виступ Сергія Валюха на Krupa 2019 про те, як завдяки поєднанню роботи дизайнерів та ілюстраторів, студії вдалося зібрати ряд нагород.

Читайте також: Як Airbnb і Google будують спільноти користувачів

Пабло Пікассо «Розп’яття». Зображення: www.pablopicasso.org

Донедавна у діджитал-агенції Tubik Studio не було нагород за сайти. Але за неповних 5 місяців 2019 року ми отримали дві на Awwwards, Site of the Day на FWA та Webby у категорії «Фільми». Спробуємо розібратися, як нам це вдалося.

У компанії Tubik Studio працює близько 42 людей: серед них 15 UI/UX дизайнерів, 5 графічних дизайнерів та 2 моушн-дизайнера. 65% дизайнерів навчалися у художніх вузах, тож ми вирішили використати цю суперздібність, щоб якісно виділитися на фоні інших студій.

Будемо відвертими: взагалі-то дизайн мобільних додатків — це нудно. Будь-хто може стати дизайнером інтерфейсів. Потрібно лише знати гайдлайни, бути уважним та слідкувати за тенденціями.

За поширеним твердженням продуктові дизайнери мають вирішувати проблеми користувачів. Мені здається, що це хибна думка. Дизайнер інтерфейсів передусім не повинен створювати ці проблеми, щоб їх взагалі не виникало. Знаючи гайдлайни, проблематику та тенденції, можна одразу зробити простий та зрозумілий продукт.

Тому, замість того, щоб вирішувати болі користувачів, ми в Tubik Studio протягом останнього року занурилися в мистецтво. Розповім про три кейси, що наочно демонструють, як наші UI/UX дизайнери та ілюстратори співпрацюють заради створення оригінального продукту.

Product Interface Design Professium

«Абук» — інтерфейс як фон для мистецтва

Перший кейс — додаток для прослуховування аудіокниг «Аудіобаза української книги». Робота над цим проектом розпочалася в лютому 2018, а офіційний реліз відбувся рівно за рік — у лютому 2019. Для нас цей проект виявився неабияким викликом, адже ми робили все від А до Я: UI/UX, лендинг, web-додаток, iOS та Android, фронтенд та бекенд, ілюстрації та обкладинки.

Зазвичай робота над продуктом починається з вибору назви. Для цього додатку ми обрали назву «Абук» — це абревіатура від «Аудіобаза української книги». Після назви продумується брендинг. Ми не агентство повного циклу, але можемо створити прикольний логотип, що міг би стати основою фірмового стилю та дизайну інтерфейсу. Це важливо, адже продукт повинен бути впізнаваним та виглядати однаково на різних носіях.

Спочатку ми обрали варіант, натхненний українським скорописом. Було вирішено, що саме цей варіант у прямокутній рамці буде максимально асоціюватися з друкованою книгою.

Головна ідея інтерфейсу — він має бути непомітним фоном для контенту. У випадку з аудіокнигами контентом є аудіофайли, але відрізнити одну книгу від іншої нам дозволяють саме обкладинки.Тому ми вирішили не вигадувати велосипед та скористатися стандартним інтерфейсом стрімінгових сервісів, натомість сконцентруватися на ілюстраціях для обкладинок.

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

Тоді ми спробували залити ті самі ілюстрації фоном:

Стало краще, але не набагато. Тоді ми встановили обмеження для картинок: не більше 3 кольорів, прибрати дитячі форми та контрасти, щоб жодна із них не вирізнялася на загальному фоні. Ось, що вийшло:

Коли перший білд додатку був готовий, клієнт завантажив туди перші аудіокниги і ми побачили усі ці страшні обкладинки. Якісь із них були створені ще у радянські часи, інші — у 90-ті роки. Ми не мали їх малювати, але зрозуміли, що вони дуже сильно псують загальну картину. При переносі зображення на екран телефона воно зменшується — дрібні деталі зливаються та перетворюються на кашу. Тому усі обкладинки необхідно оптимізувати для діджиталу.

Ми звернули увагу на музичні стрімінгові сервіси, наприклад, Spotify або Apple Music. Вони роблять обкладинки для своїх добірок у вигляді простих аутлайнових іконок, витриманих в одному стилі.

Ми вирішили зробити те саме із обкладинками аудіокниг. Розбили типологію на три стилі:

1 – light – найбільш простий та дешевий у виконанні.

2 – medium – більш складні ілюстрації, де ми використовуємо 3D-модель.

3 – maximum – найбільш складний та дорогий вид обладинки; ілюстратор створює повноцінну деталізовану обкладинку, яка б добре виглядала на екрані.

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

Якщо дизайн має бути ненавязливим, чому б не спростити логотип до текстового напису гарним шрифтом без засічок? Але нам і цього було мало: ми вирішили написати «абук» з маленької літери, адже так бренд ніби спілкується з користувачем на «ти».

Сучасний світ перенасичений контентом. Щоб бути на хвилі, треба бути впізнаваним, а щоб бути впізнаваним, потрібно бути простим. Якщо подивитися на застосування цього логотипу в іконці, він виглядає максимально просто. Черговий унікальний логотип загубиться в низці програм на вашому телефоні. А так одразу видно, що це «абук» — не потрібно згадувати, як він виглядає. Плюс він дуже гнучкий, його можна скейлити на носії, він безсмертний, бо спростити його ще більше просто неможливо.

Отже, наша місія була в тому, щоб створити максимально простий брендинг. Ідея додатку «Абук» полягає в тому, що ви його не помічаєте, а на перший план виходять обкладинки книг. Інтерфейс, як і брендинг, — це просто фон, який дозволяє дійти до необхідного функціоналу.

Kubrick — максимальний результат із мінімальними витратами

Кожна студія має власні критерії кар’єрного зростання. Наша система базується на трьох пунктах:

1. продуктивність;
2. робота над студійним портфоліо;
3. нові знання.

Одного разу, працюючи над портфоліо, нам спала ідея зробити якийсь незвичайний кейс, щоб замахнутися на серйозну нагороду. На той час усі наші розробники були залучені в інших проектах, тому ми вирішили зробити сайт у конструкторі Readymag. Але потрібна була оригінальна ідея, тож ми вирішили присвятити сайт унікальній особистості, творчість якої не була б захищена авторським правом. Зупинилися на Кубрику — скандальному режисерові. Розпочали роботу в березні 2018, релізнули сайт у лютому 2019 та одразу подали його на різноманітні конкурси. На диво, він почав перемагати.

Частково ми пояснюємо свій успіх масштабами виконаної роботи. Спочатку ми думали взяти 2-3 фільми і на цьому зупинитися. Але коли стало зрозуміло, що виходить, ми підключили до роботи ще кількох дизайнерів та зробили повну фільмографію.

Окрім Webby у категорії «Фільми» та Site of the day від FWA та Awwwards, наш Kubrick ще отримав окрему нагороду за код, незважаючи на те, що сайт був зроблений у Readymag. Як бачите, немає нічого неможливого. Звичайно, ми додали до стандартного конструктора кілька інтерактивів, які зробили сайт цікавішим. Наприклад, для стрічки «Механічний апельсин» ми зробили фільтр, який дозволяє робити селфі із накладними віями. Це значно підвищило залученість користувачів.

Кажуть, чим більше обмежень, тим крутіший результат. Робота над сайтом Kubrick у конструкторі довела, що це правда.

MYWONY — контраст як спосіб привернення уваги

MYWONY — абревіатура від фрази my wood nymph. Це українська компанія, яка шиє весільні сукні для американських споживачів. Завдання сайту полягало в тому, щоб збільшити продажі шляхом привернення оптових покупців. До цього сукні продавалися не через сайт, а через Pinterest та Instagram, і це були переважно індивідуальні замовлення.

Їхній попередній сайт був абсолютно невиразним і не вирішував жодної задачі: красива картинка, якийсь текст та call to action, що веде на сторінку в Pinterest. Уся навігація була схована в непотрібне бургерне меню. Ми переглянули сайти їхніх конкурентів і вирішили зробити щось принципово інше.

Оскільки завдання компанії полягало в тому, щоб почати продаватися дорожче, ми вирішили змінити шрифт логотипу на більш строгий. Для того, щоб підкреслити наголос у назві, ми додали акцент над літерою Y — це одночасно стало посиланням на високу французьку моду.

Ось так виглядає новий сайт, де ми відмовилися від бургерного меню та зробили зрозумілий call to action — “Become a partner” спеціально для оптових покупців.

Ми також змінили лейаут та винесли каталог останньої колекції прямо на сайт. Під ним ми розмістили останні дві статті блогу та дві контактні форми: для партнерів та для приватних клієнтів, які хочуть придбати сукню в київському магазині.

Але світові не потрібен ще один гарний сайт із весільними сукнями. Для більшості наречених весілля — це казка. У цей день кожна дівчина перетворюється на принцесу або лісову німфу та чекає на диво. Тому ми вирішили зробити інтерактив, що передав би ці емоції.

За початковим задумом це мав бути намальований ілюстраторами анімований ролик, що показував казковий ліс та процес народження сукні. Також елементи цього ролику мали бути використані для оздоблення фізичних носіїв, наприклад, пакування.

23 листопада ми презентували цю ідею клієнтам, а через три дні Dior розпочав промокампанію із дуже схожою візуальною складовою. Вся наша робота виявилася марною.

Тоді ми вирішили зробити щось максимально дивне та оригінальне — і зупинилися на ідеї космічного вестерну. У новому ролику спершу ви бачите космос та якусь планету без ознак життя, прилітає ракета, звідки виходить прекрасна дівчина, її оточують інопланетні чудовиська. Дівчина натискає на кнопку і її скафандр перетворюється на весільну сукню. Вона б’ється із чудовиськами, їхні кров та кишки перетворюються на рослини і поступово планета стає зеленою. Дівчина знаходить свого нареченого і визволяє його з космічної тюрми. Вони сідають на космічний корабель і залишають планету.

Висновки:

1. Вирішуйте болі, не створюйте їх.
2. Люди хочуть бачити більше нових яскравих картинок, тому візуальний ряд потрібно оновлювати.
3. Інтерфейс — це тільки фон для контенту.
4. Робота ілюстраторів стає усе більш популярною та затребуваною в дизайні інтерфейсів.
5. WOW-ефект завжди перемагає.
6. У майбутньому на нас чекає революція: мистецтво стане основою в просуванні будь-якого продукту.

Раніше Telegraf.Design ходив у гості до компанії Tubik та показував, як виглядає їхній офіс.