Sushi Design System - UI Kit

Zomato

Rreth këtij aplikacioni

Sushi është sistemi i dizajnit të Zomato, i cili ndihmon në ndërtimin e ndërfaqeve të fuqishme të përdoruesit duke ndjekur një gjuhë të pastër dhe të thjeshtë dizajni. Ne në zomato, e kemi ndërtuar këtë nga themeli. Nuk është vetëm një sistem projektimi për ne, por më shumë se kaq ai na ndihmon të ofrojmë një përvojë të re dhe të përmirësuar për përdoruesit tanë. Sushi mund t'ju ndihmojë të ndërtoni ndërfaqe përdoruesi të personalizuara duke ndjekur një gjuhë dizajni atomike, të pastër dhe të thjeshtë. Ndërsa Sushi ndërtohet në gjuhën e vet të dizajnit, ai përqafon plotësisht dhe përdor përbërësit e Dizajnit Material të Google brenda në shumë fusha.

Si një sistem dizajni dhe një referencë për udhëzimet e markës, ai përdoret dhe përfaqësohet nga ekipe të ndryshme brenda Zomato, të tilla si - Produkt, Inxhinieri, Marketing dhe Branding.

Çfarë është një sistem projektimi?
Një sistem projektimi është një koleksion i komponentëve të ripërdorshëm, të udhëhequr nga standarde të qarta, që mund të mblidhen së bashku për të ndërtuar çdo numër aplikacionesh. Një sistem dizajni nuk është vetëm një koleksion i aseteve dhe komponentëve që përdorni për të ndërtuar një produkt dixhital. Sipas Emmet Connolly, drejtor i dizajnit të produktit në Intercom, “… shumica e Sistemeve të Dizajnit janë në të vërtetë thjesht Biblioteka Modeli: një kuti e madhe me pjesë Lego UI që mund të montohen në mënyra pothuajse të pafundme. Të gjitha pjesët mund të jenë të qëndrueshme, por kjo nuk do të thotë se rezultatet e mbledhura do të jenë të qëndrueshme. Produkti juaj është më shumë se një grumbull elementësh të ndërfaqes së përdoruesit të ripërdorshëm. Ka strukturë dhe kuptim. Nuk është një faqe interneti e përgjithshme, është mishërimi i një sistemi konceptesh.”

Sistemi i dizajnit sushi

Themelet
Themelet janë udhëzime të markave dixhitale, të cilat përcaktojnë tipografinë, paletat e ngjyrave, ikonat, hapësirën, hijen dhe arkitekturën e informacionit të sistemit tonë të dizajnit. Sushi, duke ndjekur parimet e dizajnit atomik, është ndërtuar nga poshtë-lart duke përdorur përbërës të përbërë, të renditur si atome ➡️ molekula ➡️ organizma.

Dizajni Atomik
Dizajni Atomik (siç përshkruhet nga Brad Frost) i hartuar në sistemin tonë.

#Atoms
Njësitë më të vogla të pandashme janë atomet. Në Android (ose çdo ndërfaqe celulare) etiketat e tekstit, butonat dhe mbajtësit e imazheve janë atome.

#Molekulat
Pamjet që përfshijnë atome të shumta për t'u formuar, por megjithatë duken dhe sillen si një entitet i vetëm për përdoruesit janë molekula. Për shembull, fushat e hyrjes kanë kutinë e hyrjes, fushën e gabimit dhe një buton pastrimi, por së bashku është një entitet i vetëm.

#Organizma
Komponentë komplekse, por të ripërdorshëm, që punojnë në një mënyrë kohezive së bashku. Përbëhet nga atome dhe molekula të shumta. Një rast në fjalë janë shiritat e vlerësimit, i cili përbëhet nga etiketa, secila prej të cilave ka një numër dhe një ikonë. Etiketat ndryshojnë gjithashtu ngjyrën kur zgjidhen vlerësime të ndryshme. Çdo etiketë individualisht përdoret gjithashtu në vende të tjera, por si shirit vlerësimi, të gjitha funksionojnë së bashku për të krijuar kuptim të ri.

Tipografi
Tipografia, siç mund ta dini, është arti i rregullimit të tipit për ta bërë gjuhën e shkruar të lexueshme, të lexueshme dhe tërheqëse kur shfaqet. Rregullimi i tipit përfshin zgjedhjen e shkronjave, madhësive të pikave, gjatësisë së rreshtave, hapësirës midis rreshtave dhe ndarjes së shkronjave, dhe rregullimin e hapësirës midis çifteve të shkronjave.

Ne mbështesim variacionet e mëposhtme të shkronjave -

ExtraLight
Drita
E rregullt
E mesme
Gjysmë e trashë
E guximshme
ExtraBold

Ju mund të përdorni çdo Font që ka deri në 8 pesha të shkronjave dhe t'i caktoni ato nga këto pseudonime. Ndërsa ne kemi Metropolis, Okra dhe Roboto për demonstrim, ju mund të përdorni çdo font që shkon me markën tuaj.

Ngjyrat
Sushi gjithashtu ofron një grup ngjyrash të paracaktuara në paletën e tij. Për raste jashtëzakonisht unike, mos ngurroni të përdorni ngjyrat tuaja, por në të kundërt, ju rekomandojmë të përdorni ngjyrat nga kjo paletë për të gjithë përbërësit e produktit tuaj.

Depoja e kodit