Sushi est le système de conception de Zomato, qui aide à construire des interfaces utilisateur robustes à la suite d'un langage de conception propre et simple. Nous, à Zomato, nous avons construit cela depuis la terre. Ce n'est pas simplement un système de conception pour nous, mais plus que cela nous aide à fournir une nouvelle expérience améliorée à nos utilisateurs. Sushi peut vous aider à construire des interfaces utilisateur sur mesure après une langue de conception atomique, propre et simple. Bien que Sushi s'accumule sur son propre langage de design, il embrasse pleinement et utilise des composants de conception matériels de Google dans de nombreux domaines.
En tant que système de conception et référence pour les directives de la marque, il est utilisé et représenté par diverses équipes de Zomato, tels - produits, ingénierie, marketing et marquage.
Qu'est-ce qu'un Système de conception?
Un système de conception est un ensemble de composants réutilisables, guidés par des normes claires, pouvant être assemblées ensemble pour construire n'importe quel nombre d'applications. Un système de conception n'est pas seulement une collection d'actifs et de composants que vous utilisez pour créer un produit numérique. Selon EMMET Connolly, directeur de la conception du produit à Intercom, "... La plupart des systèmes de conception ne sont vraiment que des bibliothèques de motifs: une grande boîte de morceaux de LEGO UI pouvant être assemblés de manière proche infinie. Toutes les pièces peuvent être cohérentes, mais cela ne signifie pas que les résultats assemblés seront. Votre produit est plus qu'un simple tas d'éléments ui réutilisables. Il a une structure et une signification. Ce n'est pas une page Web générique, c'est l'incarnation d'un système de concepts. "
Système de conception de sushi
Fondations
Les fondations sont des directives de la marque numérique, qui définissent la typographie, les palettes de couleurs, les icônes, l'espacement, l'ombre et l'architecture de notre système de conception. Sushi, à la suite des principes de conception atomique, est construit ascendant à l'aide de composants composables, commandé sous forme d'atomes ➡️ molécules ➡️ Organismes.
Design atomique
Conception atomique (comme décrit par Brad Frost ) Mappé à notre système.
#atoms
Les plus petites unités indivisibles sont des atomes. Dans Android (ou Toute UI mobile) Les étiquettes de texte, les boutons et les porte-images sont des atomes.
#molecules
>
Vues impliquant plusieurs atomes à former, mais toujours regarder et se comporter Comme une seule entité à l'utilisateur sont des molécules. Par exemple, les champs d'entrée ont la zone d'entrée, le champ d'erreur et un bouton clair, mais ensemble c'est une seule entité.
#Organismes
Complexe de
complexe, mais réutilisable , cela fonctionne de manière cohérente ensemble. Composé de multiples atomes et molécules. Un cas en fonction des barres d'évaluation, qui consiste en étiquettes, chacune ayant un numéro et une icône. Les balises changent de couleur aussi, lorsque différentes notes sont sélectionnées. Chaque balise individuellement est également utilisée à d'autres endroits, mais comme barre de notation, tout fonctionne pour créer une nouvelle signification.
Typographie
Typographie, comme vous le savez peut-être, L'art du type d'arrangement pour faire une langue écrite lisible, lisible et attrayante lorsqu'il est affiché. L'agencement du type implique la sélection de types de caractères, des tailles de points, des longueurs de ligne, de l'espacement de la ligne et de l'espacement des lettres, et ajustant l'espace entre paires de lettres.
Nous soutenons les variations de type de type suivantes -
Extralight
Light
Moyen
Semibold
Extrabold
Vous pouvez utiliser n'importe quelle police qui doit atteindre 8 pondères de police et les assigner de ces alias. Bien que nous ayons Metropolis, Okra et Roboto pour la démo, vous pouvez utiliser n'importe quelle police qui va avec votre marque.
Couleurs
Sushi fournit également un ensemble de couleurs prédéfinies dans sa palette . Pour des cas extrêmement uniques, n'hésitez pas à utiliser vos propres couleurs, mais sinon, nous vous recommandons d'utiliser des couleurs de cette palette pour tous les composants de votre produit.
9Apps 4.9
