Що таке дизайн-система та чому це потрібно tech-бізнесу

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

Спойлер: цілісний влучний візуал робить диджитал-продукт матеріальним, створює відчуття «тактильності», наближує аудиторію. І ще один спойлер, про який ви вже певно здогадалися з назви статті: дизайн-система допоможе цього досягнути. Давайте розбиратися, як.

Особливості брендингу для технологічних бізнесів

Я певний час рефлексувала з приводу цього, коли стала помічати, які типи проєктів почали заходити в нашу marketing & tech-агенцію: венчурні бізнеси, стартапи, геймдев-студії, web3-фонди, криптоплатформи та всі інші бізнеси, де продукт часом максимально важко осягнути візуально, лише на словах. Ця сфера розростається все швидше. І всі намагаються бути сучасними та технологічними.

«А чим відрізняється стиль для IT від стилю, який я робила для не-IT-клієнтів?», — питала я себе.

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

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

Ясна річ, він дуже технологічний. Але це перший рівень, який навіть не обговорюється, бо зараз все більше бізнесів переходять у цей пласт.

Я подивилася на дизайни, які створила для деяких клієнтів, і зрозуміла, що вони виглядають не лише технологічно. Відтоді особливість для цих бізнесів я сформувала так: найкращий спосіб робити цікавий бренд для tech-бізнесу — не робити його як бренд для tech-бізнесу.

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

Що більше ми зараз технологізуємось, то більше цінується зусилля зробити дизайн «живим» й інакшим. Це як культура прийняття всіх рас, релігій, національностей, статей і статури, яка зараз активно розвивається. Люди не мають боятися бути різними. Бути інакшими, виділятися — це добре.

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

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

Що таке дизайн-система?

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

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

Наприклад, елементарні коригування логотипа чи кольору. Інтернет-перепалки в коментарях на рахунок зміни форми лого здаються більш емоційними, коли це стосується якогось відомого офлайн-бренду, знак чи лого якого люди звикли сприймати сталим.

Більшість не люблять зміни. Але цифрові бренди ніби дійсно можуть мати більш динамічний дизайн, який безболісно і непомітно підправляється за потреби. І дизайн-система здається корисним інструментом, щоб актуалізуватися.

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

Tech-компаніям важлива загальна цілісна естетика дизайну. Увага до деталей — це те, що створює стиль. Вона може не мати одного впізнаваного прийому, але мати ряд візуальних елементів, які і створюють загальне враження та можуть потроху апгрейдитися з плином часу.

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

Дизайн-система має працювати на впізнаваність бренду

Дизайн-система — це набір інструментів, які дозволяють бренду швидко, організовано та влучно адаптувався і під банер, і під сайт, і під продукт. Прояви дизайну в різних каналах не повинні бути однаковими.

Існує багато нюансів, які складно врахувати без продуманої дизайн-системи. Наприклад, лендинг компанії не має виглядати так само як і постер, бо тоді дизайн виглядає одноманітним та «приїдається». До того ж декорування не має перекривати комунікацію.

Сайт може бути більш функціональним, соцмережі більше контентоцентричні. Іноді вистачає невеликого вкраплення брендових форм, іноді кольору та шрифту, іноді графіки. Уся ця digital-екосистема має працювати на впізнаваність бренду, але дизайн кожного носія має адаптуватися під функцію.

Щоб візуальна мова мала комплексний підхід, треба дивитись, як дизайн працює в усіх ключових каналах бренду.

І ще одне важливе правило для компаній, що мають продукт (софт, апку тощо): брендинг не має йому суперечити. Інакше виникає відчуття дисонансу. Інтеграція з ключовими диджитальними каналами бренду — це одна з основних особливостей дизайн-систем. Тут може бути алегорія на організм, який у різних його частинах функціонує по-різному. І все разом впливає на загальний стан.

Як у дизайн-системі використати передові технології

Наостанок, доволі простенька й очевидна тавтологія: tech-бізнес може найбільш нативно використовувати передові технології та персоналізувати це під дизайн бренду. Адаптивна дизайн-система часто містить сучасні інструменти — генератив, фільтри, інтерактивний контент, ШІ тощо. Упаковані у зрозумілий процес так, щоб ними міг користуватися майже будь-хто. Не самоціль їх інтегрувати, аби показати: «Ми теж вміємо користуватись міджорні». Я ставлюсь до цього як до більш практичних речей. Так, вони теж можуть задавати настрій, розвивати стиль, але є ще одним доступним інструментом для реалізації творчих задумів.

Як створити цікаву дизайн-систему для tech-продукту

1. Один із моїх перших дизайнів у студії був для Pawa — ML-венчурного фонду. Тоді ми відштовхувались від назви і від того, що командна гра важлива в цій сфері. Використання маскотів приїлося в ентертеймент-сфері, але у венчурних бізнесах ніколи не зустрічалося. Вийшов нуарний і досить інтелігентний за вайбом дизайн. Я б уявила його і для якогось івенту про кіно, однак він все ще залишається досить героїчно-технологічним.

Цей кейс класно транслює, як «нетехнологічний» дизайн може зробити диджитал-проєкт яскравішим та впізнаваним.

2. З останніх дизайнів, це Neurons Lab. Вони роблять ШІ ближчим для інших компаній: це справжня лабораторія, яка знаходить трансформаційні рішення задачок із зірочкою.

ШІ та наука — вони десь на перетині цих двох понять. Все незрозуміле мені в одному бренді. Коли працювала над проєктом, то захотілося зробити щось на межі: технологічно та науково. Трохи журнальна верстка задавала цю атмосферу ерудованості і здавалася нетиповою для використання в технологічній сфері.

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

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

Математичні вирази замість нормальних речень здались гіковською фановою штукою, особливо для їхньої обізнаної аудиторії. Тож тепер будь-який заголовок може бути написаний так, як напише тільки Neurons Lab.

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

3. Massive Black — американська студія, яка займається IP-девелопментом, розробкою візуального стилю, створенням ключових персонажів, сеттінгів та сцен у відеоіграх.. Вони мали чітку комунікацію в диджиталі: це презентація робіт. Айдентика вже була: логотип, знак, чорний колір. Треба було придумати стиль навколо, подружити з вже наявним «надбанням» та запакувати його завдяки дизайну в найефективнішому вигляді.

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

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

4. Crystal Blockchain надає можливість аналізувати блокчейни та встановлювати зв’язок між кримінальними діями та реальними організаціями. Інструмент пов’язує різні блокчейн-об’єкти та надає докази фінансовим слідчим. Він юзерфрендлі, має візуалізацію операцій, тому в ньому легко розбираєшся і вчасно бачиш ризикову транзакцію. Це був, мабуть, перший проєкт, де в парі з іншим дизайнером я побачила продукт зсередини.

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

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

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

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

Як креаторка, я шукаю нестандартні рішення, які зроблять tech-продукти видимими та осяжними. Як дизайн-лід, я маю створити дизайн-систему, щоб вона була комфортною в роботі для самого клієнта та його команди. Адже хороший дизайн може стати посереднім, якщо не знати, як його використовувати і не мати... дизайн-системи.

Наостанок, ще раз пройдемося основними пунктами:

1. Головне — не бійтеся використовувати «нетехнологічний» дизайн. Ви здивуєтеся, як нестандартно та яскраво може виглядати ваш брендинг.
2. Синхронізуйте продукт і бренд: дисонанс призведе до розфокусу уваги користувачів, а узгодженість — до формування цілісного образу компанії.
3. Адаптуйте дизайн під різні канали, залежно від цілей присутності бренду.
4. Використовуйте різні тулзи, щоб знайти неочевидні рішення.

Дизайн-система може розвиватись разом із бізнесом, реагувати на зміни. Та й кому як не диджитал-бізнесу треба в першу чергу тримати руку на пульсі.