Коли мова йде про український дизайн, що найчастіше спадає на думку? Ілюстрації, шрифти, орнаменти, але дуже рідко — українськість у контексті вебу та застосунків. Глобалізація зіграла з людьми злий жарт. З одного боку, ми маємо необмежений доступ до світових надбань у сфері цифрових інтерфейсів. А з іншого — українські дизайнери масово працюють над іноземними проєктами. Чи створювали українці щось оригінальне? Продуктова дизайнерка з Xenoss Ольга Тушич запевняє, що так. І мова йде про один з найгарячіших трендів UI останніх років — неоморфізм. Він виринув майже нізвідки та миттєво став предметом жвавих дискусій у дизайнерській спільноті: одні були в захваті, інші нещадно його критикували. А це, між іншим, один із небагатоьх випадків в історії, де можна чітко простежити походження та авторство стилю UI — всі ниточки ведуть до України.
Утворення неоморфізму
Перший макет, з якого прийнято починати відлік неоморфізму як окремого стилю, було створено восени 2019 року одеським дизайнером Олександром Плюто.
Цей та наступні його дріббл шоти були результатом експериментів з тонкими градієнтами та переосмислення естетики продуктів Дітера Рамса — німецького індустріального дизайнера XX сторіччя, автора «10 принципів хорошого дизайну». Що цікаво, Плюто не мав освіти ані у сферах проєктування інтерфейсів, промислового дизайну чи, навіть, у художній сфері— він самоук. Дизайном Олександр почав займатися ще зі шкільних років. Тож, на момент створення Mobile Banking App, попри молодий вік, уже мав низку успішних проєктів та був членом Young Jury в Awwwards.
Оригінальний Skeuomorph Mobile Banking Олександра Плюто, листопад 2019 року — Dribbble
Сам Плюто спочатку назвав винайдений ним стиль «skeuomorphism 2.0». Слово неоморфізм було вигадано пізніше: коли стиль «завірусився», поляк Міхал Малєвіч написав статтю-огляд, і один з коментаторів запропонував назву neumorphism як поєднання «new»+«skeuomorphism».
Неоморфізм моментально став популярним: десятки нових концептів на dribbble з’являлись кожного дня, про неоморфізм публікували численні статті та робили гайдлайни для девелоперів. Його обрала корпорація Samsung для щорічного івенту Galaxy Unpacked 2020, Huawei розробила нову операційну систему EMUI 12 з неоморфними включеннями, а американський виробник Ford випустив нову автівку Mustang Mach-E з цілком неоморфним інтерфейсом бортового комп’ютеру. Індійський фінансовий стартап — сервіс на 16 мільйонів користувачів — CRED в оновленні 2020 року також перейшов на неоморфізм.
Samsung Galaxy Unpacked 2020, Ford Mustang Mach-E interface, CRED , Huawei EMUI 12
Solomid.tech, Learnbyear.io, Nicecard,Speed Vpn
Передумови появи неоморфізму: скевоморфізм та флет
Щоб зрозуміти, чому навколо неоморфізму здійнявся такий хайп, потрібно зазирнути трохи вглиб історії. З 1980-х років у дизайні інтерфейсів тотально домінував скевоморфізм — стиль, який імітує предмети з реального світу: об’ємні кнопки та плашки, знамениті книжкові полиці apple тощо. Іконка, що має вигляд дискети на позначення збереження інформації — теж нащадок тих часів, коли користувачі були не дуже обізнані в технологіях. І для зменшення спротиву дизайнери показували функції застосунків через знайомі та зрозумілі людям об’єкти.
Приклади скевоморфізму: iOS1, сайт cheese&burger
Приблизно середини 2000-х років інтерфейси почали поступово рухатись у бік меншої реалістичності та декоративності. У 2012-2013 роках після виходу Windows 8 та iOS7, flat design впевнено посів лідуючі позиції. Він був менш ресурсозатратним у порівнянні зі скевоморфізмом. Окрім того, flat чудово адаптувався під різноманіття пристроїв та екранів, що було надзвичайно актуальним. У 2014 році світ побачив Material Design від Google — це було інноваційне переосмислення концепції flat з додаванням ідеї множинності площин: тепер об’єкти не лежали на фоні, а «висіли» над ним на різній висоті відповідно до їхньої значущості. Після цього скевоморфізм фактично став табу, відійшовши лише у нішеві сфери (як-то ігри та дитячі застосунки), а всі новітні продукти створювались за канонами material, flat або їхнього міксу.
Google Material Design, 2014 рік
Але дуже скоро перед UI-дизайнерами постала проблема: у світі повним ходом йшли 3D технології, графіка, фільми. А пласкі інтерфейси, зарегульовані гайдлайнами, не зважаючи на всі переваги адаптивності, все ще залишались пласкими. Ідея повертати об’єм в UI обговорювалася в дизайнерському комьюніті, але до справи не доходило, оскільки єдиною альтернативою flat та material дизайн-спільнота бачила «презренний» скевоморфізм. Навіть коли Apple (флагман дизайну) випустила iOS13 з деякими натяками на об’єм — це було сприйнято не надто привітно.
Gemini2 від MacPaw, 2016 рік — вже є натяк на об’єм, але до неоморфізму ще далеко
iOS 13, вересень 2019 рік — скевоморфізм повертається?
Характеристика та риси неоморфізму
І в цей час, коли інтерфейсам давно потрібне «друге дихання», але ніхто не наважується на суттєві кроки, Олександр Плюто малює свій Banking App Concept.
Його чистий, свіжий, футуристичний, тактильно звабливий вигляд принципово відрізнявся і від flat, і від класичного скевоморфізму — хоча по суті був їхнім синтезом. Окрім візуалу, успіх концепту був також обумовлений його цілісністю: це була не одинока кнопка чи іконка, а доволі зрілий макет який зрозуміло презентує певні функції.
Radio Player App натхненний радіоприймачем Дітера Рамса, Олександр Плюто — Dribbble
Скевоморфізм — це окремі «деталі» з різних матеріалів, що лежать на площині фону. Material design — пласкі картки які «левітують» над фоном. А неоморфний інтерфейс — це суцільний лист матеріалу з вичавленими, рельєфними елементами керування.
«Екструдований пластик» є основною, але не єдиною характерною рисою неоморфізму. Елементи, які мають відповідники в реальному світі — перемикачі, дисплеї, повзунки — також часто зображуються подібними на свої фізичні прототипи. Але й менш реалістично, ніж у класичному скевоморфізмі.
Неоморфні перемикачі (toggles) Олександра Плюто —Dribbble
Тричі український
Олександр каже: «Я не думаю, що чогось дуже схожого не було до моїх шотів. Скоріш за усе було, просто фрагментально, або не стало віральним».
Одним з прикладів робіт, які попередують концептам Плюто є вебмагазин «Ваш Пульт» (2017 рік), який був безпосереднім запозиченням вигляду кнопок пультів до телевізорів.
Ваш Пульт, дизайнер Павло Савеленко, 2017 рік. Наразі оригінальні неоморфні елементи збереглися у футері та декількох секціях
Паралелі з трендами та явищами промислового дизайну
Якщо ж казати про попередників неоморфізму в загальному сенсі, то ідея екструдованого інтерфейсу далеко не нова: в індустріальному дизайні подібні зразки існують ще з 70х років. Наприклад, калькулятор Divisumma 18 італійського дизайнера Маріо Белліні, дизайн кнопок якого названо «найвидатнішим на всі часи». Такі інтерфейси не втрачають актуальності і дотепер: в 2011 вийшов шведський музичний синтезатор OP-1, який наразі включено до колекції музею сучасного мистецтва Сан Франциско, а в 2017 році кишеньковий синтезатор Zont виграв Red Dot Design Award. Саме вони почасти слугували референсами Олександру Плюто при створенні перших шотів в стилі неоморфізм. Хоча варто зазначити, що тій чи іншій формі неоморфні фізичні інтерфейси чи об’єкти оточують нас усюди – усюди, де м’яке світло торкається монохромних випуклостей: від айподів до кухонних міксерів, від скульптур до поп-ітів.
Divisumma 18 (Mario Bellini), OP-1 (Teenage Engineering), Zont (Pavel Golovkin), поп-іт
Окрема ніша «неоморфних» пристроїв — продукти для людей з вадами зору. Перший смарт-годинник для незрячих The Dot Watch вийшов у 2011 році, а спроби поєднати в одному пристрої візуальну та тактильну складову — так звані гаптичні екрани — ведуться ще 2010-х.
The Dot Watch (Samuel Jerichow), гаптичний екран на електроосмотичних насосах (Future Shape Interfaces)
Критика неоморфізму
Попри блискучий старт, у цифрових інтерфейсах неоморфізм так і не набув масового поширення. Лише кілька епізодів застосування — Ford, Samsung, Huawei, CRED та невеличка низка нішевих продуктів.
Основними недоліками, через які неоморфізм не став широко використовуваним, є:
– низька візуальна доступність через слабкий контраст,
– все виглядає як кнопки,
– громіздкість у складних інтерфейсах.
Олександр Плюто оцінює винайдений стильтак: «Це усього лише візуальна гра зі світлом. Я це розумів одразу і як тільки перший шот на Dribbble несподівано став віральним, то я почав додавати завжди в опис, що це експеримент і не треба це застосовувати в реальному житті, тому що красива картинка формується лише через штучне комбінування елементів інтерфейсу».
Ідея монохромного, екструдованого інтерфейсу — є його й недоліком недоліком. Те, що круто виглядає у концептах — в реальних умовах, з реальними користувачами працює не завжди. Межі об’єктів, позначені делікатними градієнтами, а не контрастуючим кольором, як у flat та material, погано зчитуються людьми з розладами зору або при недостатньому освітленні. Спроби боротися з цим були: кнопкам додавали кольору або ж чітких контрастних рамок та індикаторів. Але здебільшого це лише ускладнювало інтерфейс та додавало візуального шуму, котрий є концептуально неприйнятним для неоморфізму. Ще гіршою ситуація стає якщо говорити про стани елементів — pressed, disabled, selected disabled: у flat зміну стану показують напівпрозорістю чи іншим кольором, у неморорфізмі ж кольорова гама вкрай обмежена через саму його природу, а прозорість фактично відсутня як концепція.
Неоморфні кнопки Олександра Плюто — Dribbble
Варіанти оформлення основної та другорядної кнопок: додавання кольору вимагає тонкої роботи з тінями та градієнтами. Піднята над базовою поверхнею кнопка приваблює увагу і наче запрошує натиснути на неї, але тільки коли це одна кнопка. Використання того ж прийому екструзії для всіх елементів інтерфейсу одночасно — заплутує користувача і розсіює увагу. Що натискати, якщо все має вигляд кнопок? В складних інтерфейсах з широким спектром функцій ця проблема набуває критичного масштабу ще й тому, що неоморфні об’єкти «крадуть» простір своїми зовнішніми тінями. Якщо у flat-і для визначення ієрархії елементів слугує whitespace, то в неоморфному інтерфейсі елементи зливаються докупи; як наслідок — користувачеві потрібно більше часу для візуальної ідентифікації змістових блоків.
Vanilla Dashboard, дизайнерка Karin Gizri — Dribbble
Вплив неоморфізму на дизайн сьогодення
Хоча неоморфізм і став віральним в концептах на Dribbble, далі концептів він по суті не просунувся. Він має проблеми з доступністю, а в складних проєктах надмірне використання неоморфмних елементів взагалі унеможливлює нормальне користування продуктом.
Попри всі недоліки неоморфізм як явище призвів до значних змін в області дизайну цифрових інтерфейсів.
По-перше, він підняв дискусію стосовно accessibility — завдяки згадкам в кожній статті та огляді, важливість візуальної доступності прийняли до уваги навіть ті, хто раніше нею взагалі не переймався.
По-друге, неоморфізм надихнув дизайнерську спільноту на нові творчі пошуки — так згодом з’явились гласморфізм та клейморфізм, та й зі скевоморфізму було зняте табу.
ClearVPN2 від MacPaw, 2023
І нарешті, неоморфізм в певній мірі «виховав» покоління молодих дизайнерів, котрі брали саме цей стиль для своїх перших робіт — і, відповідно, від самого початку мислили тривимірно, а не двовимірно як при проєктуванні flat UI.
Неоморфізм — це такий собі прообраз haute couture в світі інтерфейсів. Подіумні образи з колготами на голові та спідницею з пір’я не призначені для носіння в повсякденному житті — але вони потрібні з точки зору розширення уявлень про стиль, форму, гру матеріалів, текстур, кольорів. Вони піднімають суспільні питання, проблеми екології, етики тощо. І врешті-решт це все не напряму, але впливає на те як ми виглядаємо і який одяг опиниться у наших шафах завтра.
Олександр Плюто скромно каже про своє створіння так: «На мою думку, сам по собі неоморфізм не мав і не має майбутнього. Нехай залишиться суто як експеримент на Dribbble»
Так, неоморфізм не став «новою ерою» в UI. Але він є ключом, що відкрив двері до світу об’ємних інтерфейсів, котрий ми опановуємо зараз і в котрому нас ще чекає чимало цікавого. А власне неоморфізм в чистому вигляді, попри песимістичні прогнози автора, може продовжити розвиватися в малонавантажених, монофункціональних інтерфейсах.
А ще — це унікальний прецедент в історії дизайну інтерфейсів. Унікальний тим, що окремий, повноцінний, впізнаваний по всьому світу стиль UI створила не корпорація-гігант, не Apple, не Google і не Microsoft, а лише одна людина. Більше того, ця людина не була «мастодонтом» дизайну, титулованим митцем з орденами на всі груди — це б ще було зрозуміло — але ні, це був молодий дизайнер-самоук з обласного центру.
Хтось каже: випадковість! Я ж впевнена — це талант.
Наш. Український.