Sushi Design System - UI Kit

Zomato

Aplikazio honi buruz

Sushi Zomato-ren diseinu-sistema oso propioa da, diseinu-lengoaia garbi eta sinple bati jarraituz erabiltzaile-interfaze sendoak eraikitzen laguntzen duena. Zomato-n, hau oinarritik eraiki dugu. Ez da guretzat diseinu sistema bat, baina hori baino gehiago gure erabiltzaileei esperientzia berri eta hobetua eskaintzen laguntzen digu. Sushi-k neurrira egindako erabiltzaile-interfazeak eraikitzen lagun zaitzake diseinu-lengoaia atomiko, garbi eta sinple bati jarraituz. Sushi bere diseinu hizkuntzan eraikitzen den arren, Google-ren Material Design osagaiak barne hartzen ditu eta erabiltzen ditu arlo askotan.

Diseinu sistema eta markaren gidalerroetarako erreferentzia gisa, Zomatoko hainbat taldek erabiltzen eta ordezkatzen dute, hala nola, produktua, ingeniaritza, marketina eta marka.

Zer da diseinu-sistema bat?
Diseinu-sistema osagai berrerabilgarrien bilduma bat da, estandar argiek gidatuta, elkarrekin munta daitezkeen edozein aplikazio sortzeko. Diseinu-sistema ez da produktu digital bat eraikitzeko erabiltzen dituzun aktibo eta osagaien bilduma soilik. Emmet Connolly, Intercom-eko produktuen diseinuaren zuzendariaren arabera, "... Diseinu-sistema gehienak eredu-liburutegiak besterik ez dira: modu ia infinituan munta daitezkeen UI Lego piezen kutxa handi bat. Pieza guztiak koherenteak izan daitezke, baina horrek ez du esan nahi bildutako emaitzak izango direnik. Zure produktua UI elementu berrerabilgarrien pila bat baino gehiago da. Egitura eta esanahia ditu. Ez da web-orri generiko bat, kontzeptu-sistema baten gorpuztea baizik».

Sushi Diseinu Sistema

Fundazioak
Oinarriak marka digitalaren gidalerroak dira, gure diseinu sistemaren tipografia, kolore paletak, ikonoak, tarteak, itzalak eta informazio-arkitektura definitzen dituztenak. Sushia, diseinu atomikoaren printzipioei jarraituz, behetik gora eraikitzen da osagai konposagarriak erabiliz, atomo ➡️ molekula ➡️ organismo gisa ordenatuta.

Diseinu atomikoa
Diseinu atomikoa (Brad Frost-ek deskribatu bezala) gure sisteman mapatu zen.

#Atomoak
Unitate zatiezin txikienak atomoak dira. Android-en (edo mugikorren edozein UI) testu-etiketak, botoiak eta irudi-euskarriak atomoak dira.

#Molekulak
Atomo anitz eratzen dituzten ikuspegiak, baina hala ere erabiltzailearentzat entitate bakarraren itxura eta portaera duten molekulak dira. Adibidez, sarrera-eremuek sarrera-koadroa, errore-eremua eta garbi-botoia dituzte, baina elkarrekin entitate bakarra da.

#Organismoak
Osagai konplexuak, baina berrerabilgarriak, elkarrekin modu kohesionatuan lan egiten dutenak. Atomo eta molekula anitzez osatua. Kasu honetan, balorazio-barrak dira, etiketaz osatuta, bakoitzak zenbaki bat eta ikono bat dituelarik. Etiketak ere kolorez aldatzen dira, balorazio desberdinak hautatzen direnean. Etiketa bakoitza banaka beste leku batzuetan ere erabiltzen da, baina balorazio-barra gisa, guztiak batera funtzionatzen du esanahi berria sortzeko.

Tipografia
Tipografia, jakingo duzuenez, idazkera idatzia irakurgarria, irakurgarria eta erakargarria izan dadin, letrak antolatzeko artea da bistaratzen denean. Motaren antolaketak letra tipoak, puntu-tamainak, lerro-luzerak, lerro-tartea eta letra-tartea hautatzea eta letra pareen arteko tartea doitzea dakar.

Tipografia aldaera hauek onartzen ditugu:

ExtraLight
Argia
Erregularra
Ertaina
Erdi lodia
Lodia
ExtraBold

Gehienez 8 letra-tipo dituen edozein letra erabil dezakezu eta ezizena hauetatik esleitu. Demorako Metropolis, Okra eta Roboto ditugun arren, zure markarekin bat datorren edozein letra-tipo erabil dezakezu.

Koloreak
Sushi-k aurrez zehaztutako kolore multzo bat ere eskaintzen du bere paletan. Oso kasu berezietarako, lasai zure koloreak erabiltzeko, baina bestela, paleta honetako koloreak erabiltzea gomendatzen dugu zure produktuaren osagai guztietan.

Kode biltegia