Sushi Design System - UI Kit

Zomato

Om denne app

Sushi er Zomatos helt eget designsystem, som hjælper med at bygge robuste brugergrænseflader efter et rent og enkelt designsprog. Vi hos zomato har bygget dette op fra bunden. Det er ikke kun et designsystem for os, men mere end det hjælper det os med at give vores brugere en ny og forbedret oplevelse. Sushi kan hjælpe dig med at bygge skræddersyede brugergrænseflader efter et atomart, rent og enkelt designsprog. Mens Sushi bygger op på sit eget designsprog, omfavner og bruger det fuldt ud Googles Material Design-komponenter internt på mange områder.

Som et designsystem og en reference for brandretningslinjer, bliver det brugt og repræsenteret af forskellige teams inden for Zomato, såsom - Produkt, Engineering, Marketing og Branding.

Hvad er et designsystem?
Et designsystem er en samling af genanvendelige komponenter, styret af klare standarder, der kan samles til at bygge et vilkårligt antal applikationer. Et designsystem er ikke kun en samling af de aktiver og komponenter, du bruger til at bygge et digitalt produkt. Ifølge Emmet Connolly, direktør for produktdesign hos Intercom, "... de fleste designsystemer er egentlig bare mønsterbiblioteker: en stor kasse med UI Lego-stykker, der kan samles på næsten uendelige måder. Alle stykkerne kan være konsistente, men det betyder ikke, at de samlede resultater vil være det. Dit produkt er mere end blot en bunke genanvendelige UI-elementer. Det har struktur og mening. Det er ikke en generisk webside, det er legemliggørelsen af ​​et system af begreber."

Sushi Design System

Fundament
Fundamenter er digitale mærkeretningslinjer, som definerer typografi, farvepaletter, ikoner, mellemrum, skygge og informationsarkitektur i vores designsystem. Sushi, efter atomare designprincipper, er bygget nedefra og op ved hjælp af komponerbare komponenter, ordnet som atomer ➡️ molekyler ➡️ organismer.

Atomisk design
Atomic Design (som beskrevet af Brad Frost) kortlagt til vores system.

#Atomer
De mindste udelelige enheder er atomer. I Android (eller enhver mobil UI) er tekstetiketter, knapper og billedholdere atomer.

#Molekyler
Synspunkter, der involverer flere atomer at danne, men som stadig ser ud og opfører sig som en enkelt enhed for brugeren, er molekyler. Indtastningsfelter har f.eks. inputfeltet, fejlfeltet og en slet knap, men tilsammen er det en enkelt enhed.

#Organismer
Komplekse, men genanvendelige komponenter, der arbejder sammen på en sammenhængende måde. Sammensat af flere atomer og molekyler. Et eksempel på dette er vurderingsbjælker, som består af tags, der hver har et nummer og et ikon. Mærkerne skifter også farve, når forskellige vurderinger er valgt. Hvert tag individuelt bruges også andre steder, men som en vurderingsbjælke arbejder det hele sammen for at skabe ny mening.

Typografi
Typografi, som du måske ved, er kunsten at arrangere skrift for at gøre skriftsproget læseligt, læsbart og tiltalende, når det vises. Ordningen af ​​skrift involverer valg af skrifttyper, punktstørrelser, linjelængder, linjeafstand og bogstavafstand og justering af mellemrummet mellem bogstavpar.

Vi understøtter følgende skrifttypevariationer -

EkstraLys
Lys
Fast
Medium
Halvfed
Fremhævet
EkstraFed

Du kan bruge enhver skrifttype, der har op til 8 skriftvægte, og tildele dem fra disse aliasser. Mens vi har Metropolis, Okra og Roboto til demo, kan du bruge enhver skrifttype, der passer til dit brand.

Farver
Sushi giver også et sæt foruddefinerede farver i paletten. For ekstremt unikke sager er du velkommen til at bruge dine egne farver, men ellers anbefaler vi at bruge farver fra denne palet til alle komponenter i dit produkt.

Kodelager