Дизайн-системи: чому це плюс для продукту, але мінус - для студії

  1. Що таке дизайн-система
  2. Що буває з людьми, які проходять 1 курс з маркетингу?
  3. Як створюють дизайн-системи
  4. Зробили - і все?
  5. Чому UI-кит - це не дизайн-система
  6. Плюси дизайн-системи
  7. Чому це потрібно продукту і чим погано для студії
  8. Головне - імідж

Наш общий бизнес-фронт BIKINIKA.com.ua

Весь 2018 рік дизайнери шумлять на тему дизайн-систем. Багато встигли розкласти інструмент на молекули, поумничать, похайпіть і навіть запропонувати нові штуки по роботі з дизайн-системами. Розповімо про, мабуть, головному тренді року на пальцях і спробуємо відповісти на головне питання: чи потрібна агентству власна дизайн-система?

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

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

приклад компонента головної кнопки з дизайн-системи Альфа-Банку

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

Що буває з людьми, які проходять 1 курс з маркетингу?

Нічого особливого: у них залишаються знання з 1 курсу з маркетингу. Але що, якщо з'єднати 3 кращих курсу з маркетингу і віддати їх за супервигідною ціною тим, хто хоче знати все?

Ми зібрали всі ключові знання в області інтернет-маркетингу і перетворили їх у зрозумілі інструкції та покрокові алгоритми. Тобі залишилося тільки скористатися ними.

Реклама


Як створюють дизайн-системи

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

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

Якими саме інструментами і методами це реалізувати, справа кожної команди. Але все зводиться до того, що окремо в редакторі створюється сторінка, що містить всі мінімальні частини і компоненти, які потім будуть транслюватися на інші сторінки. Система з кодом пишеться окремо. Деякі компанії навіть публікують код у відкритому доступі - наприклад, як у Рамблера .

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

Зробили - і все?

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

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

Якщо наявний набір правил не годиться для завдання, його треба переосмислити, зламати, пересобрать і впровадити заново - під це і потрібна команда

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

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

Чому UI-кит - це не дизайн-система

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

Плюси дизайн-системи

  1. Стандартизація дизайн-рішень. Все чітко описано - це дозволяє домогтися однаковості на всіх рівнях: однакового UX і відчуттів на всіх платформах. За рахунок фіксації кращих патернів відбувається і стандартизація UI - користуватися сайтом стає зручніше.
  2. Швидке впровадження фахівця в живій проект. Припустимо, є один великий проект з UI-китом, а другий - з дизайн-системою. У першому випадку дизайнеру показують окремі кнопки. Його завдання - придумати, як їх просочетать з іншим елементами дизайну. Тоді як у другому випадку він отримує готовий набір елементів. Залишається збирати закінчену сторінку - і це, звичайно, простіше.
  3. Дизайн = верстка. Кожен раз, коли дизайнер передає свою роботу на верстку, він повинен описувати принципи, за якими все збирається: відступи, кольору та інше. Без чіткої системи щось або втрачається, або розробники невірно трактують ТЗ. Одне із завдань дизайн-системи - прискорити процес «дизайн + верстка». І ніякого зіпсованого телефону.
  4. Впізнаваність бренду. Крім фірмового кольору, tone of voice і інших речей, брендинг може закладатися навіть на такому рівні, як місце кнопки на сайті. І якщо ти великий гравець з федеральної мережею магазинів, з дизайн-системою підтримувати такі речі буде простіше.
  5. Зниження витрат - швидкість розробки і економія на кадрах. Після створення дизайн-системи нові сторінки робляться швидше: дизайнер і розробник не витрачають час на кнопки, які вже зроблені. І для створення типових сторінок досить дизайнера-стажиста.

Мінуси дизайн-системи

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

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

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

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

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

Чому це потрібно продукту і чим погано для студії

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

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

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

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

Головне - імідж

Пам'ятайте, що при всій потужності і продуманості дизайн-систем, все вирішують точкові підходи навіть в рамках самого інструменту.

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

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

Думка редакції може не збігатися з думкою автора. Ваші статті надсилайте нам на [email protected] . А наші вимоги до них - ось тут .

Розповімо про, мабуть, головному тренді року на пальцях і спробуємо відповісти на головне питання: чи потрібна агентству власна дизайн-система?
Що буває з людьми, які проходять 1 курс з маркетингу?
Зробили - і все?
BIKINIKA.com.ua
Наш общий бизнес-фронт BIKINIKA.com.ua. Казино "Buddy.Bet" обещает вам море азарта и незабываемых моментов. Поднимите ставки и начните выигрывать прямо сейчас.

We have 4 guests online