Sushi Design System - UI Kit

Sushi ist Zomatos eigenes Designsystem, das dabei hilft, robuste Benutzeroberflächen mit einer sauberen und einfachen Designsprache zu erstellen. Wir von zomato haben das von Grund auf neu aufgebaut. Es ist nicht nur ein Designsystem für uns, sondern hilft uns darüber hinaus, unseren Benutzern ein neues und verbessertes Erlebnis zu bieten. Sushi kann Ihnen dabei helfen, maßgeschneiderte Benutzeroberflächen zu erstellen, die einer atomaren, sauberen und einfachen Designsprache folgen. Während Sushi auf seiner eigenen Designsprache aufbaut, werden die Materialdesign-Komponenten von Google in vielen Bereichen vollständig übernommen und intern verwendet.

Als Designsystem und Referenz für Markenrichtlinien wird es von verschiedenen Teams innerhalb von Zomato verwendet und repräsentiert, wie z. B. Produkt, Engineering, Marketing und Branding.

Was ist ein Designsystem?

Ein Designsystem ist eine Sammlung wiederverwendbarer Komponenten, die von klaren Standards geleitet werden und die zu einer beliebigen Anzahl von Anwendungen zusammengesetzt werden können. Ein Designsystem ist nicht nur eine Sammlung von Assets und Komponenten, die Sie zum Erstellen eines digitalen Produkts verwenden. Laut Emmet Connolly, Director of Product Design bei Intercom, „… sind die meisten Designsysteme eigentlich nur Musterbibliotheken: eine große Kiste mit UI-Lego-Teilen, die auf nahezu unendliche Weise zusammengesetzt werden können. Alle Teile mögen konsistent sein, aber das bedeutet nicht, dass die zusammengesetzten Ergebnisse es sein werden. Ihr Produkt ist mehr als nur ein Haufen wiederverwendbarer UI-Elemente. Es hat Struktur und Bedeutung. Es ist keine generische Webseite, es ist die Verkörperung eines Systems von Konzepten.“

Sushi-Design-System

Stiftungen

Grundlagen sind digitale Markenrichtlinien, die Typografie, Farbpaletten, Symbole, Abstände, Schatten und Informationsarchitektur unseres Designsystems definieren. Sushi, das den Prinzipien des atomaren Designs folgt, wird von unten nach oben aus zusammensetzbaren Komponenten aufgebaut, die als Atome ➡️ Moleküle ➡️ Organismen angeordnet sind.

Atomdesign

Atomic Design (wie von Brad Frost beschrieben) unserem System zugeordnet.

#Atome

Die kleinsten unteilbaren Einheiten sind Atome. In Android (oder jeder mobilen Benutzeroberfläche) sind Textbeschriftungen, Schaltflächen und Bildhalter Atome.

#Moleküle

Ansichten, an deren Bildung mehrere Atome beteiligt sind, die für den Benutzer jedoch immer noch wie eine einzelne Einheit aussehen und sich verhalten, sind Moleküle. Eingabefelder haben beispielsweise das Eingabefeld, das Fehlerfeld und eine Schaltfläche zum Löschen, aber zusammen bilden sie eine Einheit.

#Organismen

Komplexe, aber wiederverwendbare Komponenten, die auf kohärente Weise zusammenarbeiten. Bestehend aus mehreren Atomen und Molekülen. Ein typisches Beispiel sind Bewertungsbalken, die aus Tags bestehen, die jeweils eine Nummer und ein Symbol haben. Die Tags ändern auch ihre Farbe, wenn verschiedene Bewertungen ausgewählt werden. Jedes Tag einzeln wird auch an anderen Stellen verwendet, aber als Bewertungsbalken arbeitet alles zusammen, um eine neue Bedeutung zu schaffen.

Typografie

Wie Sie vielleicht wissen, ist Typografie die Kunst, Schrift so anzuordnen, dass geschriebene Sprache lesbar, lesbar und ansprechend dargestellt wird. Die Schriftanordnung umfasst die Auswahl von Schriftarten, Punktgrößen, Zeilenlängen, Zeilenabständen und Buchstabenabständen sowie die Anpassung des Abstands zwischen Buchstabenpaaren.

Wir unterstützen die folgenden Schriftartvariationen -

Extra-Licht

Hell

Regulär

Mittel

Halbfett

Deutlich

ExtraBold

Sie können jede Schriftart mit bis zu 8 Schriftstärken verwenden und sie von diesen Aliasen zuweisen. Während wir Metropolis, Okra und Roboto für Demos haben, können Sie jede Schriftart verwenden, die zu Ihrer Marke passt.

Farben

Sushi bietet auch eine Reihe vordefinierter Farben in seiner Palette. Für äußerst einzigartige Fälle können Sie gerne Ihre eigenen Farben verwenden, aber ansonsten empfehlen wir die Verwendung von Farben aus dieser Palette für alle Komponenten Ihres Produkts.

Code-Repository