Sushi Design System - UI Kit

Zomato

O ovoj aplikaciji

Sushi je Zomatoov vlastiti sustav dizajna, koji pomaže u izgradnji robusnih korisničkih sučelja slijedeći čist i jednostavan jezik dizajna. Mi u Zomato-u smo ovo izgradili od temelja. Za nas to nije samo sustav dizajna, već nam više od toga pomaže pružiti novo i poboljšano iskustvo našim korisnicima. Sushi vam može pomoći da izgradite prilagođena korisnička sučelja slijedeći atomski, čist i jednostavan jezik dizajna. Dok se Sushi nadograđuje na vlastitom dizajnerskom jeziku, u potpunosti prihvaća i koristi Googleove komponente Material Design interno u mnogim područjima.

Kao sustav dizajna i referenca za smjernice brenda, koriste ga i predstavljaju različiti timovi unutar Zomatoa, kao što su - Product, Engineering, Marketing i Branding.

Što je sustav dizajna?
Sustav dizajna je zbirka komponenata za višekratnu upotrebu, vođenih jasnim standardima, koje se mogu sastaviti zajedno za izradu bilo kojeg broja aplikacija. Sustav dizajna nije samo zbirka sredstava i komponenti koje koristite za izradu digitalnog proizvoda. Prema Emmetu Connollyju, direktoru dizajna proizvoda u Intercomu, “... većina dizajnerskih sustava zapravo su samo knjižnice uzoraka: velika kutija Lego dijelova korisničkog sučelja koji se mogu sastavljati na gotovo beskonačne načine. Svi dijelovi mogu biti dosljedni, ali to ne znači da će i skupni rezultati biti. Vaš proizvod je više od gomile višekratnih elemenata korisničkog sučelja. Ima strukturu i značenje. To nije generička web stranica, to je utjelovljenje sustava koncepata."

Sushi Design System

Temelji
Temelji su smjernice digitalnog brenda, koje definiraju tipografiju, palete boja, ikone, razmake, sjene i informacijsku arhitekturu našeg sustava dizajna. Sushi, slijedeći principe atomskog dizajna, izgrađen je odozdo prema gore pomoću komponenata koji se mogu sastaviti, poredanih kao atomi ➡️ molekule ➡️ organizmi.

Atomski dizajn
Atomski dizajn (kako ga je opisao Brad Frost) preslikan na naš sustav.

#Atomi
Najmanje nedjeljive jedinice su atomi. U Androidu (ili bilo kojem mobilnom korisničkom sučelju) tekstualne oznake, gumbi i držači slika su atomi.

#Molekule
Pogledi koji uključuju više atoma koji se formiraju, ali i dalje izgledaju i ponašaju se kao jedan entitet za korisnika su molekule. Na primjer, polja za unos imaju okvir za unos, polje pogreške i gumb za brisanje, ali zajedno su jedan entitet.

#Organizmi
Složene, ali višekratne komponente, koje zajedno rade na kohezivan način. Sastoji se od više atoma i molekula. Primjer su trake za ocjenjivanje, koje se sastoje od oznaka, od kojih svaka ima broj i ikonu. Oznake također mijenjaju boju kada su odabrane različite ocjene. Svaka oznaka zasebno se također koristi na drugim mjestima, ali kao traka za ocjenjivanje, sve zajedno radi na stvaranju novog značenja.

Tipografija
Tipografija je, kao što možda znate, umjetnost uređenja slova kako bi pisani jezik bio čitljiv, čitljiv i privlačan kada je prikazan. Raspored tipa uključuje odabir slova, veličine točaka, duljine redaka, razmaka između redaka i razmaka između slova, te podešavanje razmaka između parova slova.

Podržavamo sljedeće varijacije slova -

ExtraLight
Svjetlo
Redovito
Srednji
Polupodebljano
Podebljano
Ekstrapodebljano

Možete koristiti bilo koji font koji ima do 8 težine fonta i dodijeliti ih iz ovih aliasa. Dok imamo Metropolis, Okra i Roboto za demo, možete koristiti bilo koji font koji ide uz vaš brend.

Boje
Sushi također nudi skup unaprijed definiranih boja u svojoj paleti. Za iznimno jedinstvene slučajeve slobodno koristite svoje boje, ali inače, preporučamo korištenje boja iz ove palete za sve komponente vašeg proizvoda.

Spremište kodova