Sushi Design System - UI Kit

Un delizioso kit UI per creare app Android. Made with ❤ di zomato

Sushi è il sistema di progettazione di Zomato, che aiuta a creare interfacce utente robuste seguendo un linguaggio di progettazione semplice e pulito. Noi di zomato l'abbiamo costruito da zero. Non è solo un sistema di progettazione per noi, ma più di questo ci aiuta a fornire un'esperienza nuova e migliorata ai nostri utenti. Sushi può aiutarti a creare interfacce utente su misura seguendo un linguaggio di progettazione atomico, pulito e semplice. Mentre Sushi si basa sul proprio linguaggio di progettazione, abbraccia e utilizza completamente i componenti di Material Design di Google internamente in molte aree.

Come sistema di progettazione e riferimento per le linee guida del marchio, è utilizzato e rappresentato da vari team all'interno di Zomato, come Product, Engineering, Marketing e Branding.

Cos'è un sistema di progettazione?

Un sistema di progettazione è un insieme di componenti riutilizzabili, guidati da standard chiari, che possono essere assemblati insieme per creare un numero qualsiasi di applicazioni. Un sistema di progettazione non è solo una raccolta di risorse e componenti che utilizzi per costruire un prodotto digitale. Secondo Emmet Connolly, direttore del design del prodotto presso Intercom, "... la maggior parte dei Design Systems sono in realtà solo librerie di modelli: una grande scatola di pezzi Lego dell'interfaccia utente che possono essere assemblati in modi quasi infiniti. Tutti i pezzi possono essere coerenti, ma ciò non significa che i risultati assemblati lo saranno. Il tuo prodotto è più di una semplice pila di elementi dell'interfaccia utente riutilizzabili. Ha struttura e significato. Non è una pagina web generica, è l'incarnazione di un sistema di concetti".

Sistema di design per sushi

Fondazioni

Le basi sono linee guida del marchio digitale, che definiscono la tipografia, le tavolozze dei colori, le icone, la spaziatura, l'ombra e l'architettura dell'informazione del nostro sistema di progettazione. Il sushi, seguendo i principi della progettazione atomica, è costruito dal basso utilizzando componenti componibili, ordinati come atomi ➡️ molecole ➡️ organismi.

Design atomico

Atomic Design (come descritto da Brad Frost) mappato sul nostro sistema.

#Atom

Le unità indivisibili più piccole sono gli atomi. In Android (o qualsiasi interfaccia utente mobile) le etichette di testo, i pulsanti e i supporti di immagine sono atomi.

#Molecole

Le viste che coinvolgono la formazione di più atomi, ma che sembrano e si comportano ancora come una singola entità per l'utente sono molecole. Ad esempio, i campi di input hanno la casella di input, il campo di errore e un pulsante Cancella, ma insieme costituiscono un'unica entità.

#Organismi

Componenti complessi, ma riutilizzabili, che lavorano insieme in modo coeso. Composto da più atomi e molecole. Un esempio calzante sono le barre di valutazione, che consistono in tag, ciascuno con un numero e un'icona. Anche i tag cambiano colore, quando vengono selezionate valutazioni diverse. Ogni tag viene utilizzato individualmente anche in altri luoghi, ma come barra di valutazione, funziona tutto insieme per creare un nuovo significato.

Tipografia

La tipografia, come forse saprai, è l'arte di organizzare i caratteri per rendere il linguaggio scritto leggibile, leggibile e accattivante quando visualizzato. La disposizione del tipo prevede la selezione di caratteri tipografici, dimensioni in punti, lunghezze delle linee, interlinea e interlinea e la regolazione dello spazio tra coppie di lettere.

Supportiamo le seguenti variazioni di carattere:

Extra leggero

Leggero

Regolare

medio

Semigrassetto

Grassetto

Extra grassetto

Puoi utilizzare qualsiasi carattere che abbia fino a 8 pesi dei caratteri e assegnarli da questi alias. Sebbene disponiamo di Metropolis, Okra e Roboto per la demo, puoi utilizzare qualsiasi carattere adatto al tuo marchio.

Colori

Sushi fornisce anche una serie di colori predefiniti nella sua tavolozza. Per casi estremamente unici, sentiti libero di usare i tuoi colori, ma in caso contrario, ti consigliamo di utilizzare i colori di questa tavolozza per tutti i componenti del tuo prodotto.

Repository di codice