Sushi Design System - UI Kit

Um delicioso kit de interface do usuário para construir aplicativos Android. Feito com ❤ por zomato

Sushi é o sistema de design próprio da Zomato, que ajuda a construir interfaces de usuário robustas seguindo uma linguagem de design limpa e simples. Nós da zomato construímos isso do zero. Não é apenas um sistema de design para nós, mas mais do que isso, nos ajuda a fornecer uma experiência nova e aprimorada aos nossos usuários. Sushi pode ajudá-lo a construir interfaces de usuário sob medida seguindo uma linguagem de design atômica, limpa e simples. Embora o Sushi se baseie em sua própria linguagem de design, ele adota e usa totalmente os componentes do Material Design do Google internamente em muitas áreas.

Como sistema de design e referência para diretrizes de marca, é utilizado e representado por várias equipes dentro da Zomato, como - Produto, Engenharia, Marketing e Branding.

O que é um sistema de design?

Um sistema de design é uma coleção de componentes reutilizáveis, guiados por padrões claros, que podem ser montados juntos para construir qualquer número de aplicações. Um sistema de design não é apenas uma coleção de ativos e componentes que você usa para criar um produto digital. De acordo com Emmet Connolly, diretor de design de produto da Intercom, “… a maioria dos Design Systems são realmente apenas bibliotecas de padrões: uma grande caixa de peças de Lego de interface do usuário que podem ser montadas de maneiras quase infinitas. Todas as peças podem ser consistentes, mas isso não significa que os resultados montados serão. Seu produto é mais do que apenas uma pilha de elementos de interface do usuário reutilizáveis. Tem estrutura e significado. Não é uma página da web genérica, é a personificação de um sistema de conceitos.”

Sistema de design de sushi

Fundações

As fundações são diretrizes digitais da marca, que definem a tipografia, paletas de cores, ícones, espaçamento, sombra e arquitetura de informação do nosso sistema de design. O sushi, seguindo os princípios de design atômico, é construído de baixo para cima usando componentes componíveis, ordenados como átomos ➡️ moléculas ➡️ organismos.

Design atômico

Atomic Design (conforme descrito por Brad Frost) mapeado para o nosso sistema.

#Atoms

As menores unidades indivisíveis são os átomos. No Android (ou em qualquer interface de usuário móvel), rótulos de texto, botões e suportes de imagem são átomos.

#Moléculas

Visões que envolvem vários átomos para se formar, mas ainda parecem e se comportam como uma única entidade para o usuário, são moléculas. Por exemplo, os campos de entrada têm a caixa de entrada, o campo de erro e um botão de limpeza, mas juntos são uma única entidade.

#Organismos

Componentes complexos, mas reutilizáveis, que trabalham juntos de forma coesa. Composto por vários átomos e moléculas. Um caso em questão são as barras de classificação, que consistem em tags, cada uma com um número e um ícone. As tags também mudam de cor quando diferentes classificações são selecionadas. Cada tag individualmente também é usada em outros lugares, mas como uma barra de classificação, tudo funciona em conjunto para criar um novo significado.

Tipografia

A tipografia, como você deve saber, é a arte de organizar tipos para tornar a linguagem escrita legível, legível e atraente quando exibida. O arranjo do tipo envolve a seleção de tipos de letra, tamanhos de pontos, comprimentos de linha, espaçamento entre linhas e espaçamento entre letras e o ajuste do espaço entre os pares de letras.

Apoiamos as seguintes variações de tipo de letra -

Luz extra

Luz

Regular

Médio

Seminegrito

Audacioso

ExtraNegrito

Você pode usar qualquer fonte que tenha até 8 pesos de fonte e atribuí-los a partir desses aliases. Embora tenhamos Metropolis, Okra e Roboto para demonstração, você pode usar qualquer fonte que combine com sua marca.

Cores

O Sushi também oferece um conjunto de cores pré-definidas em sua paleta. Para casos extremamente exclusivos, sinta-se à vontade para usar suas próprias cores, mas, caso contrário, recomendamos o uso de cores desta paleta para todos os componentes do seu produto.

Repositório de código