Sushi Design System - UI Kit

Zomato

Про цей додаток

Sushi — це власна система дизайну Zomato, яка допомагає створювати надійні користувацькі інтерфейси на основі чистої та простої мови дизайну. Ми в Zomato створили це з нуля. Для нас це не просто система дизайну, а й більше, ніж це, що допомагає нам надавати новий та покращений досвід для наших користувачів. Sushi може допомогти вам створити користувацькі інтерфейси на замовлення на основі атомарної, чистої та простої мови дизайну. Хоча Sushi спирається на власну мову дизайну, він повністю охоплює та використовує внутрішні компоненти Google Material Design у багатьох областях.

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

Що таке система проектування?
Система проектування — це набір компонентів багаторазового використання, які керуються чіткими стандартами, які можна зібрати разом для створення будь-якої кількості додатків. Система дизайну — це не лише сукупність активів і компонентів, які ви використовуєте для створення цифрового продукту. За словами Еммета Конноллі, директора з дизайну продуктів компанії Intercom, «... більшість систем дизайну — це насправді просто бібліотеки шаблонів: велика коробка елементів UI Lego, які можна зібрати майже нескінченними способами. Усі частини можуть бути послідовними, але це не означає, що зібрані результати будуть. Ваш продукт — це більше, ніж просто купа багаторазових елементів інтерфейсу користувача. Він має структуру і значення. Це не загальна веб-сторінка, це втілення системи концепцій».

Система дизайну суші

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

Атомний дизайн
Atomic Design (за описом Бреда Фроста) зіставлено з нашою системою.

#Атоми
Найменші неподільні одиниці — атоми. В Android (або будь-якому мобільному інтерфейсі користувача) текстові мітки, кнопки та утримувачі зображень є атомами.

#Молекули
Уявлення, у яких утворюється кілька атомів, але все ще виглядають і поводяться для користувача як єдине ціле, є молекулами. Наприклад, поля введення мають поле введення, поле помилки та кнопку очищення, але разом вони є єдиним об’єктом.

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

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

Ми підтримуємо наступні варіанти шрифту:

ExtraLight
Світло
Звичайний
Середній
Напівжирний
Жирний
ExtraBold

Ви можете використовувати будь-який шрифт, який має до 8 ваги шрифтів, і призначити їх із цих псевдонімів. Хоча у нас є Metropolis, Okra та Roboto для демонстрації, ви можете використовувати будь-який шрифт, який підходить до вашого бренду.

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

Сховище коду