Sushi Design System - UI Kit

Zomato

À propos de cette application

Sushi est le système de conception propre à Zomato, qui aide à créer des interfaces utilisateur robustes suivant un langage de conception simple et épuré. Chez zomato, nous avons construit cela à partir de zéro. Ce n'est pas seulement un système de conception pour nous, mais plus que cela, il nous aide à offrir une expérience nouvelle et améliorée à nos utilisateurs. Sushi peut vous aider à créer des interfaces utilisateur sur mesure en suivant un langage de conception atomique, propre et simple. Bien que Sushi s'appuie sur son propre langage de conception, il adopte et utilise pleinement les composants de conception matérielle de Google en interne 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 au sein de Zomato, telles que - Produit, Ingénierie, Marketing et Image de marque.

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, qui peuvent être assemblés pour créer un nombre illimité 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 de produits chez Intercom, "... la plupart des systèmes de conception ne sont en réalité que des bibliothèques de modèles : une grande boîte de pièces UI Lego qui peuvent être assemblées de manière presque infinie. Toutes les pièces peuvent être cohérentes, mais cela ne signifie pas que les résultats assemblés le seront. Votre produit est plus qu'un simple tas d'éléments d'interface utilisateur réutilisables. Il a une structure et un sens. 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 sushis

Fondations
Les fondations sont des directives de marque numériques, qui définissent la typographie, les palettes de couleurs, les icônes, l'espacement, l'ombre et l'architecture des informations de notre système de conception. Le sushi, suivant les principes de conception atomique, est construit de bas en haut à l'aide de composants composables, ordonnés en atomes ➡️ molécules ➡️ organismes.

Conception atomique
Atomic Design (tel que décrit par Brad Frost) mappé à notre système.

#atomes
Les plus petites unités indivisibles sont les atomes. Dans Android (ou toute interface utilisateur mobile), les étiquettes de texte, les boutons et les supports d'image sont des atomes.

#Molécules
Les vues qui impliquent la formation de plusieurs atomes, mais qui ressemblent et se comportent toujours comme une seule entité pour l'utilisateur sont des molécules. Par exemple, les champs de saisie ont la zone de saisie, le champ d'erreur et un bouton d'effacement, mais ensemble, il s'agit d'une seule entité.

#Organismes
Composants complexes, mais réutilisables, qui fonctionnent ensemble de manière cohérente. Composé de plusieurs atomes et molécules. Un exemple en est les barres de notation, qui se composent de balises, chacune ayant un numéro et une icône. Les balises changent également de couleur lorsque différentes évaluations sont sélectionnées. Chaque balise individuellement est également utilisée à d'autres endroits, mais en tant que barre de notation, tout fonctionne ensemble pour créer une nouvelle signification.

Typographie
La typographie, comme vous le savez peut-être, est l'art d'arranger les caractères pour rendre le langage écrit lisible, lisible et attrayant lorsqu'il est affiché. La disposition des caractères implique la sélection des polices de caractères, des tailles de point, des longueurs de ligne, de l'interligne et de l'espacement des lettres, ainsi que l'ajustement de l'espace entre les paires de lettres.

Nous prenons en charge les variantes de police suivantes -

Lumière supplémentaire
Léger
Régulier
Moyen
Semi-gras
Audacieux
ExtraGras

Vous pouvez utiliser n'importe quelle police ayant jusqu'à 8 poids de police et les attribuer à partir de ces alias. Bien que nous ayons Metropolis, Okra et Roboto pour la démonstration, 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 les cas extrêmement uniques, n'hésitez pas à utiliser vos propres couleurs, mais sinon, nous vous recommandons d'utiliser les couleurs de cette palette pour tous les composants de votre produit.

Référentiel de code