Sushi Design System - UI Kit

Zomato

Om appen

Sushi är Zomatos alldeles egna designsystem, som hjälper till att bygga robusta användargränssnitt efter ett rent och enkelt designspråk. Vi på zomato har byggt detta från grunden. Det är inte bara ett designsystem för oss, utan mer än så hjälper det oss att ge våra användare en ny och förbättrad upplevelse. Sushi kan hjälpa dig att bygga skräddarsydda användargränssnitt efter ett atomärt, rent och enkelt designspråk. Medan Sushi bygger på sitt eget designspråk, omfattar och använder det Googles materialdesignkomponenter internt inom många områden.

Som ett designsystem och en referens för varumärkesriktlinjer, används och representeras det av olika team inom Zomato, såsom - Produkt, Engineering, Marketing och Branding.

Vad är ett designsystem?
Ett designsystem är en samling återanvändbara komponenter, styrda av tydliga standarder, som kan sättas ihop för att bygga valfritt antal applikationer. Ett designsystem är inte bara en samling av tillgångarna och komponenterna du använder för att bygga en digital produkt. Enligt Emmet Connolly, chef för produktdesign på Intercom, "... de flesta designsystem är egentligen bara mönsterbibliotek: en stor låda med UI-legobitar som kan sättas ihop på nästan oändliga sätt. Alla bitar kan vara konsekventa, men det betyder inte att de sammansatta resultaten blir det. Din produkt är mer än bara en hög med återanvändbara UI-element. Den har struktur och mening. Det är inte en generisk webbsida, det är förkroppsligandet av ett system av koncept."

Sushi Design System

Fundament
Grunderna är digitala varumärkesriktlinjer som definierar typografi, färgpaletter, ikoner, mellanrum, skugga och informationsarkitektur för vårt designsystem. Sushi, enligt atomära designprinciper, byggs nerifrån och upp med hjälp av komponerbara komponenter, ordnade som atomer ➡️ molekyler ➡️ organismer.

Atomic Design
Atomic Design (som beskrivs av Brad Frost) mappad till vårt system.

#Atomer
De minsta odelbara enheterna är atomer. I Android (eller vilket mobilt gränssnitt som helst) är textetiketter, knappar och bildhållare atomer.

#Molekyler
Åsikter som involverar flera atomer att bilda, men som fortfarande ser ut och beter sig som en enda enhet för användaren är molekyler. Inmatningsfälten har till exempel inmatningsrutan, felfältet och en rensa knapp, men tillsammans är det en enda enhet.

#Organismer
Komplexa, men återanvändbara komponenter, som fungerar på ett sammanhängande sätt. Består av flera atomer och molekyler. Ett exempel är betygsfält, som består av taggar, som var och en har ett nummer och en ikon. Taggarna ändrar färg också när olika betyg väljs. Varje tagg individuellt används också på andra ställen, men som en betygsfält samverkar allt för att skapa ny mening.

Typografi
Typografi, som du kanske vet, är konsten att ordna typ för att göra det skrivna språket läsbart, läsbart och tilltalande när det visas. Typarrangemanget innefattar val av typsnitt, punktstorlekar, radlängder, radavstånd och bokstavsavstånd, och justering av avståndet mellan bokstäverpar.

Vi stöder följande typsnittsvarianter -

Extra ljus
Ljus
Regelbunden
Medium
Halvfet
Djärv
ExtraFet

Du kan använda vilket typsnitt som helst som har upp till 8 teckensnittsvikter och tilldela dem från dessa alias. Medan vi har Metropolis, Okra och Roboto för demo, kan du använda vilket typsnitt som helst som passar ditt varumärke.

Färger
Sushi tillhandahåller också en uppsättning fördefinierade färger i sin palett. För extremt unika fall, använd gärna dina egna färger, men annars rekommenderar vi att du använder färger från denna palett för alla komponenter i din produkt.

Kodarkiv