Розробка дизайн-системи

Якщо ви хочете збільшити масштаб вашого сайту, продукту або сервісу і вам необхідно налагодити злагоджену роботу дизайну і розробки - Замовте розробку дизайн-системи в Evergreen Розробити дизайн систему в Києві 3

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

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

Зв’яжіться з нами, відповімо на всі ваші запитання

system design

Процес створення дизайн системи

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

Дизайн інтерфейсу

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

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

Інструкції та гайдлайни

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

Інструменти для створення дизайн системи

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

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

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

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

Написати

Більше про UX\UI дизайн

Почитайте більше про розробку дизайну в наших статтях і вибірках

Дорогий і дешевий UI: основні відмінності

Дорогий і дешевий UI: основні відмінності

Чи варто платити за UI відчутну суму? Або ж можна заощадити з тим же результатом для бізнесу? У цьому матеріалі ми розповімо про свій досвід з приводу того чи може дешеве бути хорошим і чим відрізняються дешевий і...

UI refreshment: чи варто обновляти UI не змінюючи функціонал?

UI refreshment: чи варто обновляти UI не змінюючи функціонал?

Чи потрібен вам UI refreshment без зміни функціоналу? Який саме редизайн підійде вам і чи потрібен він взагалі - читайте в статті.

Як UI дизайн впливає на конверсію

Як UI дизайн впливає на конверсію

У цій статті ми розповімо про актуальні результати досліджень та способи виміряти вплив дизайну на конверсію на вашому сайті.

Що таке UI Kit и для чого він потрібен вашій компанії

Що таке UI Kit и для чого він потрібен вашій компанії

UI-kit є першим і обов'язковим елементом створення будь-якого якісного UI-дизайну. Що таке UI-kit, UI elements, UI / UX-guidelines і дизайн-система читайте в нашій статті.

UI patterns. Використання шаблонів для ui дизайну

UI patterns. Використання шаблонів для ui дизайну

Зібралися робити редизайн UI, але губитеся серед величезного вибору шаблонів? Вас турбує, що сайт не буде виділятися серед конкурентів? У цій статті ми допоможемо вам розібратися, як знайти хороший патерн дизайну.

Чому потрібно оновлювати UI сайту кожні 5 років?

Чому потрібно оновлювати UI сайту кожні 5 років?

У цій статті ми розповімо, чим обернеться для вашого сайту відсутність редизайну і чому важливо регулярно оновлювати UI дизайн!

Ваша команда професіоналів з розробки системи дизайну – Evergreen

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