Sushi Design System - UI Kit

Zomato

Acerca desta aplicación

Sushi é o propio sistema de deseño de Zomato, que axuda a crear interfaces de usuario sólidas seguindo unha linguaxe de deseño limpa e sinxela. Nós en Zomato construímos isto desde cero. Non é só un sistema de deseño para nós, senón que máis que iso axúdanos a ofrecer unha experiencia nova e mellorada aos nosos usuarios. Sushi pode axudarche a crear interfaces de usuario a medida seguindo unha linguaxe de deseño atómica, limpa e sinxela. Aínda que Sushi se basea na súa propia linguaxe de deseño, abraza e usa completamente os compoñentes de Material Design de Google internamente en moitas áreas.

Como sistema de deseño e referencia para as directrices da marca, é utilizado e representado por varios equipos de Zomato, como Produto, Enxeñaría, Marketing e Marca.

Que é un sistema de deseño?
Un sistema de deseño é unha colección de compoñentes reutilizables, guiados por estándares claros, que se poden ensamblar para crear calquera número de aplicacións. Un sistema de deseño non é só unha colección dos activos e compoñentes que utilizas para construír un produto dixital. Segundo Emmet Connolly, director de deseño de produtos de Intercom, "... a maioría dos sistemas de deseño son realmente só bibliotecas de patróns: unha gran caixa de pezas de Lego de IU que se poden montar de formas case infinitas. Todas as pezas poden ser consistentes, pero iso non significa que os resultados reunidos o sexan. O teu produto é algo máis que unha pila de elementos da IU reutilizables. Ten estrutura e significado. Non é unha páxina web xenérica, é a plasmación dun sistema de conceptos”.

Sistema de deseño de sushi

Fundacións
As bases son pautas de marca dixital, que definen tipografía, paletas de cores, iconas, espazamento, sombra e arquitectura da información do noso sistema de deseño. O sushi, seguindo os principios de deseño atómico, constrúese de abaixo cara arriba utilizando compoñentes compoñentes, ordenados como átomos ➡️ moléculas ➡️ organismos.

Deseño atómico
Deseño atómico (como o descrito por Brad Frost) mapeado ao noso sistema.

#Atoms
As unidades indivisibles máis pequenas son os átomos. En Android (ou calquera IU móbil) as etiquetas de texto, os botóns e os soportes de imaxes son átomos.

#Moléculas
As vistas que implican varios átomos para formar, pero que aínda se ven e se comportan como unha única entidade para o usuario son moléculas. Por exemplo, os campos de entrada teñen a caixa de entrada, o campo de erro e un botón claro, pero xuntos é unha única entidade.

#Organismos
Compoñentes complexos, pero reutilizables, que traballan de forma cohesionada. Composto por múltiples átomos e moléculas. Un exemplo son as barras de clasificación, que consisten en etiquetas, cada unha con un número e unha icona. As etiquetas tamén cambian de cor cando se seleccionan diferentes clasificacións. Cada etiqueta individualmente tamén se usa noutros lugares, pero como barra de clasificación, todo funciona xunto para crear un novo significado.

Tipografía
A tipografía, como xa sabedes, é a arte de organizar os tipos para que a linguaxe escrita sexa lexible, lexible e atractiva cando se mostra. A disposición do tipo implica a selección de tipos de letra, tamaños de puntos, lonxitudes de liña, interlineado e interlineado, e axustar o espazo entre pares de letras.

Admitimos as seguintes variacións tipográficas:

Extralixeiro
Luz
Regular
Medio
SemiNegrita
Negriña
ExtraNegrita

Podes usar calquera tipo de letra que teña ata 8 grosores de fonte e asignalas a partir destes alias. Aínda que temos Metropolis, Okra e Roboto para a demostración, podes usar calquera tipo de letra que vaia coa túa marca.

Cores
Sushi tamén ofrece un conxunto de cores predefinidas na súa paleta. Para casos extremadamente exclusivos, non dubide en usar as súas propias cores, pero se non, recomendamos usar cores desta paleta para todos os compoñentes do seu produto.

Repositorio de código