Sushi Design System - UI Kit

Sushi is het eigen ontwerpsysteem van Zomato, dat helpt bij het bouwen van robuuste gebruikersinterfaces volgens een schone en eenvoudige ontwerptaal. Wij van zomato hebben dit vanaf de grond opgebouwd. Het is niet alleen een ontwerpsysteem voor ons, maar het helpt ons meer dan dat om onze gebruikers een nieuwe en verbeterde ervaring te bieden. Sushi kan u helpen bij het bouwen van op maat gemaakte gebruikersinterfaces volgens een atomaire, strakke en eenvoudige ontwerptaal. Terwijl Sushi voortbouwt op zijn eigen ontwerptaal, omarmt en gebruikt het de Material Design-componenten van Google op veel gebieden volledig.

Als een ontwerpsysteem en een referentie voor merkrichtlijnen, wordt het gebruikt en vertegenwoordigd door verschillende teams binnen Zomato, zoals - Product, Engineering, Marketing en Branding.

Wat is een ontwerpsysteem?

Een ontwerpsysteem is een verzameling herbruikbare componenten, geleid door duidelijke normen, die kunnen worden samengevoegd om een ​​willekeurig aantal toepassingen te bouwen. Een ontwerpsysteem is niet alleen een verzameling van de middelen en componenten die u gebruikt om een ​​digitaal product te bouwen. Volgens Emmet Connolly, directeur productontwerp bij Intercom, "... zijn de meeste ontwerpsystemen eigenlijk gewoon patroonbibliotheken: een grote doos met UI Lego-stukken die op bijna oneindige manieren kunnen worden geassembleerd. Alle stukken kunnen consistent zijn, maar dat betekent niet dat de verzamelde resultaten dat ook zullen zijn. Uw product is meer dan alleen een stapel herbruikbare UI-elementen. Het heeft structuur en betekenis. Het is geen generieke webpagina, het is de belichaming van een systeem van concepten.”

Sushi-ontwerpsysteem

Fundamenten

Basis zijn digitale merkrichtlijnen, die typografie, kleurenpaletten, pictogrammen, spatiëring, schaduw en informatiearchitectuur van ons ontwerpsysteem definiëren. Sushi, volgens atomaire ontwerpprincipes, wordt bottom-up gebouwd met behulp van composable componenten, geordend als atomen ➡️ moleculen ➡️ organismen.

Atoomontwerp

Atomic Design (zoals beschreven door Brad Frost) toegewezen aan ons systeem.

#Atomen

De kleinste ondeelbare eenheden zijn atomen. In Android (of een andere mobiele gebruikersinterface) zijn tekstlabels, knoppen en afbeeldingshouders atomen.

#Molecules

Weergaven waarbij meerdere atomen nodig zijn om te worden gevormd, maar die er voor de gebruiker nog steeds uitzien en zich gedragen als een enkele entiteit, zijn moleculen. Invoervelden hebben bijvoorbeeld het invoervak, het foutveld en een duidelijke knop, maar samen is het één geheel.

#Organismen

Complexe, maar herbruikbare componenten, die op een samenhangende manier samenwerken. Bestaat uit meerdere atomen en moleculen. Een voorbeeld hiervan zijn beoordelingsbalken, die bestaan ​​uit tags, elk met een nummer en een pictogram. De tags veranderen ook van kleur wanneer verschillende beoordelingen worden geselecteerd. Elke tag afzonderlijk wordt ook op andere plaatsen gebruikt, maar als beoordelingsbalk werkt het allemaal samen om een ​​nieuwe betekenis te creëren.

Typografie

Typografie is, zoals u wellicht weet, de kunst van het ordenen van letters om geschreven taal leesbaar, leesbaar en aantrekkelijk te maken wanneer deze wordt weergegeven. De rangschikking van het type omvat de selectie van lettertypen, puntgroottes, lijnlengtes, regelafstand en letterafstand, en het aanpassen van de ruimte tussen letterparen.

We ondersteunen de volgende lettertypevariaties -

Extra licht

Licht

Normaal

Medium

Halfvet

Vetgedrukt

ExtraBold

U kunt elk lettertype met maximaal 8 lettergewichten gebruiken en deze toewijzen vanuit deze aliassen. Hoewel we Metropolis, Okra en Roboto voor demo hebben, kunt u elk lettertype gebruiken dat bij uw merk past.

Kleuren

Sushi biedt ook een reeks vooraf gedefinieerde kleuren in het palet. Voor extreem unieke gevallen, voel je vrij om je eigen kleuren te gebruiken, maar voor de rest raden we aan om kleuren uit dit palet te gebruiken voor alle componenten van je product.

Coderepository