Sushi Design System - UI Kit

Zomato

Sobre l'aplicació

Sushi és el sistema de disseny propi de Zomato, que ajuda a crear interfícies d'usuari robustes seguint un llenguatge de disseny net i senzill. A Zomato, ho hem construït des de zero. No és només un sistema de disseny per a nosaltres, sinó que més que això ens ajuda a oferir una experiència nova i millorada als nostres usuaris. Sushi us pot ajudar a crear interfícies d'usuari a mida seguint un llenguatge de disseny atòmic, net i senzill. Tot i que Sushi es basa en el seu propi llenguatge de disseny, adopta i utilitza completament els components de disseny de materials de Google internament en moltes àrees.

Com a sistema de disseny i referència per a les directrius de marca, és utilitzat i representat per diversos equips de Zomato, com ara Producte, Enginyeria, Màrqueting i Branding.

Què és un sistema de disseny?
Un sistema de disseny és una col·lecció de components reutilitzables, guiats per estàndards clars, que es poden acoblar per construir qualsevol nombre d'aplicacions. Un sistema de disseny no és només una col·lecció dels actius i components que utilitzeu per crear un producte digital. Segons Emmet Connolly, director de disseny de producte d'Intercom, "... la majoria dels sistemes de disseny són realment només biblioteques de patrons: una gran caixa de peces de Lego d'IU que es poden muntar de maneres gairebé infinites. Totes les peces poden ser coherents, però això no vol dir que els resultats reunits ho siguin. El vostre producte és més que un munt d'elements d'IU reutilitzables. Té estructura i significat. No és una pàgina web genèrica, és l'encarnació d'un sistema de conceptes".

Sistema de disseny de sushi

Fundacions
Les bases són directrius digitals de marca, que defineixen la tipografia, les paletes de colors, les icones, l'espaiat, l'ombra i l'arquitectura de la informació del nostre sistema de disseny. El sushi, seguint principis de disseny atòmic, es construeix de baix a dalt utilitzant components composables, ordenats com àtoms ➡️ molècules ➡️ organismes.

Disseny atòmic
El disseny atòmic (tal com el descriu Brad Frost) es va assignar al nostre sistema.

#Àtoms
Les unitats indivisibles més petites són els àtoms. A Android (o qualsevol interfície d'usuari mòbil) les etiquetes de text, els botons i els titulars d'imatges són àtoms.

#Molècules
Les vistes que impliquen diversos àtoms per formar-se, però que encara es veuen i es comporten com una única entitat per a l'usuari són molècules. Per exemple, els camps d'entrada tenen el quadre d'entrada, el camp d'error i un botó d'esborrar, però junts és una única entitat.

#Organismes
Components complexos, però reutilitzables, que funcionen conjuntament de manera cohesionada. Formada per múltiples àtoms i molècules. Un cas concret són les barres de valoració, que consisteixen en etiquetes, cadascuna amb un número i una icona. Les etiquetes també canvien de color quan se seleccionen diferents classificacions. Cada etiqueta individualment també s'utilitza en altres llocs, però com a barra de valoració, tot funciona conjuntament per crear un nou significat.

Tipografia
La tipografia, com ja sabeu, és l'art d'ordenar els tipus per fer que el llenguatge escrit sigui llegible, llegible i atractiu quan es mostra. La disposició del tipus implica la selecció de tipus de lletra, mides de punt, longituds de línia, interlineat i interlineat, i ajustar l'espai entre parells de lletres.

Admetem les següents variacions de tipus de lletra:

ExtraLight
Llum
Regular
Mitjana
SemiNegreta
Atrevit
ExtraBold

Podeu utilitzar qualsevol tipus de lletra que tingui fins a 8 pesos de lletra i assignar-los des d'aquests àlies. Tot i que tenim Metropolis, Okra i Roboto per a la demostració, podeu utilitzar qualsevol tipus de lletra que vagi amb la vostra marca.

Colors
Sushi també ofereix un conjunt de colors predefinits a la seva paleta. Per a casos extremadament únics, no dubteu a utilitzar els vostres propis colors, però en cas contrari, us recomanem que utilitzeu els colors d'aquesta paleta per a tots els components del vostre producte.

Repositori de codi