Sushi is het zeer eigen designsysteem van Zomato, dat helpt robuuste gebruikersinterfaces te bouwen na een schone en eenvoudige ontwerptaal. Wij bij Zomato hebben dit van de grond opgebouwd. Het is niet alleen een ontwerpsysteem voor ons, maar meer dan dat het helpt ons een nieuwe en verbeterde ervaring te bieden aan onze gebruikers. Sushi kan u helpen bij het bouwen van op maat gemaakte gebruikersinterfaces na een atoom-, schone en eenvoudige ontwerptaal. Terwijl Sushi op zijn eigen ontwerptaal opbouwt, omhelst het volledig en maakt het intern in vele gebieden gebruik van de materiaalontwerpcomponenten van Google.
Zoals een ontwerpsysteem en een referentie voor merkrichtlijnen, wordt het gebruikt en weergegeven door verschillende teams binnen Zomato, dergelijke - product, engineering, marketing en branding.
Wat is een Ontwerpsysteem?
een ontwerpsysteem is een verzameling herbruikbare componenten, geleid door duidelijke normen, die samen kunnen worden geassembleerd om een willekeurig aantal toepassingen op te bouwen. Een ontwerpsysteem is niet alleen een verzameling van de activa en componenten die u gebruikt om een digitaal product te bouwen. Volgens Emmet Connolly, directeur van productontwerp bij Intercom, "... Meest designsystemen zijn echt alleen patroonbibliotheken: een grote doos met UI LEGO-stukken die in bijna-oneindige manieren kunnen worden geassembleerd. Alle stukken kunnen consistent zijn, maar dat betekent niet dat de geassembleerde resultaten 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 uitvoeringsvorm van een systeem van concepten. "
Sushi Design System
Foundations
Stichtingen zijn digitale merkrichtlijnen, die typografie, kleurenpaletten, pictogrammen, afstand, schaduw- en informatiearchitectuur van ons ontwerpsysteem definiëren. Sushi, na de beginselen van het atomaire ontwerp, is bottom-up gebouwd met behulp van componeerbare componenten, besteld als atomen ➡️ moleculen ➡️ organismen.
Atomic Design
Atomic Design (zoals beschreven door Brad Frost ) In kaart gebracht aan ons systeem.
#atoms
De kleinste ondeelbare eenheden zijn atomen. In Android (of mobiele UI) Tekstlabels, knoppen en beeldhouders zijn atomen.
#moleculen
Aanmelden met meerdere atomen om te vormen, maar er zijn nog steeds uit en gedragen Net als een enkele entiteit aan de gebruiker zijn moleculen. Invoervelden hebben bijvoorbeeld de invoervak, het foutveld en een duidelijke knop, maar samen is het een enkele entiteit.
#Organismen
Complex, maar herbruikbare componenten , dat werkt samen op een samenhangende manier. Samengesteld uit meerdere atomen en moleculen. Een zaak in punt zijn ratingstaven, die uit tags bestaat, 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 een beoordelingsbalk werkt het allemaal samen om een nieuwe betekenis te creëren.
Typografie
Typografie, zoals je misschien weet De kunst van het regelen van het type om schriftelijke taal leesbaar, leesbaar en aantrekkelijk te maken wanneer weergegeven. De rangschikking van het type omvat de selectie van typefaces, puntformaten, lijnlengtes, lijnafstand en letterafstand en het aanpassen van de ruimte tussen paren van letters.
Wij ondersteunen de volgende lettertype-variaties -
Extralight
Licht
Regelmatige
Medium
Semibold
Bold
ExtraBold
U kunt een lettertype gebruiken dat tot 8 gewichten van het lettertype heeft en deze van deze heeft aliassen. Hoewel we metropolis, Okra en Roboto voor demo hebben, kunt u een lettertype gebruiken dat bij uw merk past.
kleuren
Sushi biedt ook een set vooraf gedefinieerde kleuren in het palet . Voor extreem unieke gevallen, voel je vrij om je eigen kleuren te gebruiken, maar anders raden we aan kleuren uit dit palet voor alle componenten van je product te gebruiken.
9Apps 4.9
