- Що таке дизайн-система
- Що буває з людьми, які проходять 1 курс з маркетингу?
- Як створюють дизайн-системи
- Зробили - і все?
- Чому UI-кит - це не дизайн-система
- Плюси дизайн-системи
- Чому це потрібно продукту і чим погано для студії
- Головне - імідж
Наш общий бизнес-фронт BIKINIKA.com.ua
Весь 2018 рік дизайнери шумлять на тему дизайн-систем. Багато встигли розкласти інструмент на молекули, поумничать, похайпіть і навіть запропонувати нові штуки по роботі з дизайн-системами. Розповімо про, мабуть, головному тренді року на пальцях і спробуємо відповісти на головне питання: чи потрібна агентству власна дизайн-система?
Що таке дизайн-система
Це візуальна мова, який технічно описаний за допомогою коду і перетворює все будова в конструктор з блоків, які гармоніюють і взаємодіють один з одним. Простіше кажучи, оформлення кнопочок на вашому сайті промальовано і зведено в правило (можна робити так і не інакше). Більше того, в коді прописані всі важливі правила: де ці кнопки знаходяться і як анімуються.
приклад компонента головної кнопки з дизайн-системи Альфа-Банку
Така мова створюють два типи фахівців: дизайнер розробляє самі елементи та їх застосування за певними шаблонами, а фронтенд-розробник займається технічним втіленням. Наприклад, кнопка «Залишити заявку» повинна бути завжди знизу праворуч і при наведенні курсору реагувати однаковою анімацією.
Що буває з людьми, які проходять 1 курс з маркетингу?
Нічого особливого: у них залишаються знання з 1 курсу з маркетингу. Але що, якщо з'єднати 3 кращих курсу з маркетингу і віддати їх за супервигідною ціною тим, хто хоче знати все?
Ми зібрали всі ключові знання в області інтернет-маркетингу і перетворили їх у зрозумілі інструкції та покрокові алгоритми. Тобі залишилося тільки скористатися ними.
Реклама
Як створюють дизайн-системи
Все робиться в Figma, Sketch або Adobe XD. Спочатку збирається кілька сторінок сайту, де ще немає детального опрацювання системи. Потім досвід цих сторінок систематизується: прописуються шрифти, всі розміри, відступи і так далі. Нарешті, на цій основі вибудовується дизайн-система і всі інші сторінки за принципом атомарного дизайну .
До речі, не факт, що те, що було на перших сторінках, доживе до фіналу в первісному вигляді, - все рухомо і опрацьовується під кожну задачу.
Якими саме інструментами і методами це реалізувати, справа кожної команди. Але все зводиться до того, що окремо в редакторі створюється сторінка, що містить всі мінімальні частини і компоненти, які потім будуть транслюватися на інші сторінки. Система з кодом пишеться окремо. Деякі компанії навіть публікують код у відкритому доступі - наприклад, як у Рамблера .
Для створення дизайн-систем не потрібен специфічний софт, але оновлення та плагіни для найпомітніших інструментів допоможуть прискорити і спростити багато процесів.
Зробили - і все?
Ні. Дизайн-система вимагає постійної готування. Будь-який бізнес розвивається, з'являються нові продукти, проводяться кампанії. Для всього потрібна реалізація: поновлення на старому сайті або створення нових розділів.
Щоб після запуску дизайн-система не розвалилася, а успішно переживала всі необхідні оновлення, потрібна команда дизайнерів і розробників. Якщо наявний набір правил не годиться для завдання, його треба переосмислити, зламати, пересобрать і впровадити заново - під це і потрібна команда.
Крім того, на наш погляд, необхідно вводити дизайн-принципи, які допоможуть планомірно розвивати систему, наприклад, як у Альфа-Банку . Тому що, навіть якщо доведеться ламати систему через нововведення, зберегти її однаковість можна тільки дотримуючись певних правил.
Ще один непоганий приклад дизайн-принципів у інтеркома : Вони завжди дотримуються стандартних підходів в розробці інтерфейсу, але за інновації на рівні продукту. І кожен раз, коли виникає питання як вчинити, вони звертаються до цього принципу.
Чому UI-кит - це не дизайн-система
UI-кит часто плутають з дизайн-системою. Але сам по собі UI-кит не описує на технічному рівні то, як буде виглядати готовий сайт або додаток. Тобто це просто картинка в картинці. Плюс UI-кит прискорює лише роботу дизайнерів, але не весь процес для команди, тоді як дизайн-система націлена саме на це.
Плюси дизайн-системи
- Стандартизація дизайн-рішень. Все чітко описано - це дозволяє домогтися однаковості на всіх рівнях: однакового UX і відчуттів на всіх платформах. За рахунок фіксації кращих патернів відбувається і стандартизація UI - користуватися сайтом стає зручніше.
- Швидке впровадження фахівця в живій проект. Припустимо, є один великий проект з UI-китом, а другий - з дизайн-системою. У першому випадку дизайнеру показують окремі кнопки. Його завдання - придумати, як їх просочетать з іншим елементами дизайну. Тоді як у другому випадку він отримує готовий набір елементів. Залишається збирати закінчену сторінку - і це, звичайно, простіше.
- Дизайн = верстка. Кожен раз, коли дизайнер передає свою роботу на верстку, він повинен описувати принципи, за якими все збирається: відступи, кольору та інше. Без чіткої системи щось або втрачається, або розробники невірно трактують ТЗ. Одне із завдань дизайн-системи - прискорити процес «дизайн + верстка». І ніякого зіпсованого телефону.
- Впізнаваність бренду. Крім фірмового кольору, tone of voice і інших речей, брендинг може закладатися навіть на такому рівні, як місце кнопки на сайті. І якщо ти великий гравець з федеральної мережею магазинів, з дизайн-системою підтримувати такі речі буде простіше.
- Зниження витрат - швидкість розробки і економія на кадрах. Після створення дизайн-системи нові сторінки робляться швидше: дизайнер і розробник не витрачають час на кнопки, які вже зроблені. І для створення типових сторінок досить дизайнера-стажиста.
Мінуси дизайн-системи
Глобальний мінус - обмеження експериментальної зони. Дизайн-система - головна перешкода пошуку оригінальних і творчих рішень.
Коли проект новий. На старті не буває конкретного рішення: у вас ще немає даних про обмеження, ні чіткого розуміння ЦА - немає фундаменту, на якому можна побудувати систему. Потрібно спочатку підтвердити працездатність бізнесу в цілому. Це як база - якщо в ній прогалини, використовувати її як фундамент для настільки великовагового інструменту можна.
До того ж невеликі компанії знаходяться у висококонкурентному середовищі. В такому випадку візуальна стандартизація тільки зашкодить. Потрібні оригінальні точкові рішення, за допомогою яких вийде зачепити нову аудиторію.
Коли треба розвивати проект. Дизайнер придумав щось нове і круте, але уперся в кордону дизайн-системи і зрозумів, що так, можна зробити краще, але ж тоді систему треба ламати і переписувати величезну кількість елементів. Думає: «Фіг з ним, і так зійде».
Багатошаровість і взаємозв'язок всіх елементів дизайн-системи відлякує і ставить хрест на багатьох змінах. Потрібна сильна команда, яка буде постійно працювати над дизайн-системою. Якщо її немає, все швидко стухне - і тоді розробка дизайн-системи втрачає будь-який сенс.
Чому це потрібно продукту і чим погано для студії
Коли компанія розростається, багато процесів стають все важче контролювати. У тому числі великий сайт з купою сторінок. Саме в цей момент варто задуматися про дизайн-системі: з нею витрачається менше ресурсів, так як вже не треба придумувати низькорівневі рішення типу кнопки у спливаючому вікні.
Крім великих компаній дизайн-системи знадобляться некомерційному сектору - державних сайтів. Вони повинні бути уніфіковані для широкої аудиторії користувачів, мати зрозумілі патерни. До того ж дизайн-система повинна здешевити вартість виробництва, що також зручно для таких проектів.
А ось дизайн-, діджітал- і рекламним агентствам власні дизайн-системи не потрібні. Вони недоречні, їх можна тільки в стіл покласти. Ну, або на ринку пошуміти. У таких команд немає експериментальної бази, щоб перевірити працездатність дизайн-системи, розвивати її і приносити користь бізнесу. Це лише красива ідея в вакуумі.
Тоді як агентство - це в першу чергу про новий досвід і полігон для експериментів. Це лабораторія нововведень. Щось систематизувати тут значить сильно обмежити себе і зростання всього проекту.
Головне - імідж
Пам'ятайте, що при всій потужності і продуманості дизайн-систем, все вирішують точкові підходи навіть в рамках самого інструменту.
Наприклад, у банку є своя дизайн-система: круто розробили, успішно підтримують. Але ось вони вводять напрямок преміум-обслуговування, і тут система нічим не допоможе. Образ і позиціонування в дизайні треба створювати з нуля - цікаво, унікально, щоб чіпляло аудиторію. Ніякої стандартизації.
Дизайн-система - це просто інструмент, як тисячі інших інструментів, і так, він допоможе великим компаніям або продуктам бути краще. Але не забувайте про те, що поганий той дизайн, який не естетичний і не красивий, яким би функціональним і технічно струнким він не був.
Думка редакції може не збігатися з думкою автора. Ваші статті надсилайте нам на 42@cossa.ru . А наші вимоги до них - ось тут .
Розповімо про, мабуть, головному тренді року на пальцях і спробуємо відповісти на головне питання: чи потрібна агентству власна дизайн-система?Що буває з людьми, які проходять 1 курс з маркетингу?
Зробили - і все?