Sushi Design System - UI Kit

Zomato

Meer oor hierdie program

Sushi is Zomato se eie ontwerpstelsel, wat help om robuuste gebruikerskoppelvlakke te bou volgens 'n skoon en eenvoudige ontwerptaal. Ons by zomato het dit van die grond af gebou. Dit is nie net 'n ontwerpstelsel vir ons nie, maar meer as dit help dit ons om 'n nuwe en verbeterde ervaring aan ons gebruikers te bied. Sushi kan jou help om pasgemaakte gebruikerskoppelvlakke te bou volgens 'n atoom, skoon en eenvoudige ontwerptaal. Terwyl Sushi op sy eie ontwerptaal opbou, omhels en gebruik dit Google se Materiaalontwerpkomponente intern op baie gebiede.

As 'n ontwerpstelsel en 'n verwysing vir handelsmerkriglyne, word dit gebruik en verteenwoordig deur verskeie spanne binne Zomato, soos - Produk, Ingenieurswese, Bemarking en Handelsmerk.

Wat is 'n ontwerpstelsel?
'n Ontwerpstelsel is 'n versameling herbruikbare komponente, gelei deur duidelike standaarde, wat saamgevoeg kan word om enige aantal toepassings te bou. ’n Ontwerpstelsel is nie net ’n versameling van die bates en komponente wat jy gebruik om ’n digitale produk te bou nie. Volgens Emmet Connolly, direkteur van produkontwerp by Intercom, "... is die meeste ontwerpstelsels eintlik net patroonbiblioteke: 'n groot boks UI Lego-stukke wat op byna oneindige maniere saamgestel kan word. Al die stukke kan konsekwent wees, maar dit beteken nie dat die saamgestelde resultate sal wees nie. Jou produk is meer as net 'n stapel herbruikbare UI-elemente. Dit het struktuur en betekenis. Dit is nie 'n generiese webblad nie, dit is die verpersoonliking van 'n stelsel van konsepte.”

Sushi-ontwerpstelsel

Grondslae
Grondslae is digitale handelsmerkriglyne, wat tipografie, kleurpalette, ikone, spasiëring, skadu en inligtingsargitektuur van ons ontwerpstelsel definieer. Sushi, volgens atoomontwerpbeginsels, word van onder na bo gebou deur saamstelbare komponente te gebruik, georden as atome ➡️ molekules ➡️ organismes.

Atoomontwerp
Atomic Design (soos beskryf deur Brad Frost) gekarteer na ons stelsel.

#Atome
Die kleinste ondeelbare eenhede is atome. In Android (of enige mobiele UI) is teksetikette, knoppies en beeldhouers atome.

#Molekules
Beskouings wat verskeie atome behels om te vorm, maar steeds lyk en optree soos 'n enkele entiteit vir die gebruiker, is molekules. Invoervelde het byvoorbeeld die invoerkassie, die foutveld en 'n duidelike knoppie, maar saam is dit 'n enkele entiteit.

#Organismes
Komplekse, maar herbruikbare komponente, wat op 'n samehangende manier saamwerk. Bestaan ​​uit veelvuldige atome en molekules. 'n Voorbeeld hiervan is graderingstawe, wat bestaan ​​uit etikette, elk met 'n nommer en 'n ikoon. Die etikette verander ook van kleur wanneer verskillende graderings gekies word. Elke merker word individueel ook op ander plekke gebruik, maar as 'n graderingsbalk werk dit alles saam om nuwe betekenis te skep.

Tipografie
Tipografie, soos jy dalk weet, is die kuns om lettertipes te rangskik om geskrewe taal leesbaar, leesbaar en aantreklik te maak wanneer dit vertoon word. Die rangskikking van tipe behels die keuse van lettertipes, puntgroottes, lynlengtes, lynspasiëring en letterspasiëring, en die aanpassing van die spasie tussen pare letters.

Ons ondersteun die volgende lettertipe variasies -

Ekstra Lig
Lig
Gereelde
Medium
Halfvet
Vet
ExtraBold

Jy kan enige lettertipe gebruik wat tot 8 lettertipegewigte het en dit toeken vanaf hierdie aliasse. Terwyl ons Metropolis, Okra en Roboto vir demo het, kan jy enige lettertipe gebruik wat by jou handelsmerk pas.

Kleure
Sushi bied ook 'n stel voorafbepaalde kleure in sy palet. Vir uiters unieke gevalle, gebruik gerus jou eie kleure, maar andersins beveel ons aan om kleure uit hierdie palet vir alle komponente van jou produk te gebruik.

Kodebewaarplek