Sushi Design System - UI Kit

Un delicioso kit de interfaz de usuario para crear aplicaciones de Android. Hecho con ❤ por zomato

Sushi es el sistema de diseño propio de Zomato, que ayuda a construir interfaces de usuario robustas siguiendo un lenguaje de diseño limpio y simple. Nosotros en zomato, hemos construido esto desde cero. No es solo un sistema de diseño para nosotros, sino más que eso, nos ayuda a brindar una experiencia nueva y mejorada a nuestros usuarios. Sushi puede ayudarlo a crear interfaces de usuario a medida siguiendo un lenguaje de diseño atómico, limpio y simple. Si bien Sushi se basa en su propio lenguaje de diseño, adopta y utiliza los componentes de Material Design de Google internamente en muchas áreas.

Como un sistema de diseño y una referencia para las pautas de marca, es utilizado y representado por varios equipos dentro de Zomato, tales como: Producto, Ingeniería, Marketing y Marca.

¿Qué es un sistema de diseño?

Un sistema de diseño es una colección de componentes reutilizables, guiados por estándares claros, que se pueden ensamblar para construir cualquier cantidad de aplicaciones. Un sistema de diseño no es solo una colección de activos y componentes que utiliza para crear un producto digital. Según Emmet Connolly, director de diseño de productos de Intercom, “… la mayoría de los sistemas de diseño son en realidad solo bibliotecas de patrones: una gran caja de piezas de UI Lego que se pueden ensamblar de formas casi infinitas. Todas las piezas pueden ser consistentes, pero eso no significa que los resultados ensamblados lo serán. Su producto es más que un montón de elementos de interfaz de usuario reutilizables. Tiene estructura y significado. No es una página web genérica, es la encarnación de un sistema de conceptos”.

Sistema de Diseño de Sushi

Cimentaciones

Los cimientos son pautas de marca digital, que definen la tipografía, las paletas de colores, los íconos, el espaciado, la sombra y la arquitectura de la información de nuestro sistema de diseño. El sushi, siguiendo los principios del diseño atómico, se construye de abajo hacia arriba utilizando componentes componibles, ordenados como átomos ➡️ moléculas ➡️ organismos.

Diseño atómico

Diseño atómico (como lo describe Brad Frost) mapeado en nuestro sistema.

#Átomos

Las unidades indivisibles más pequeñas son los átomos. En Android (o cualquier interfaz de usuario móvil), las etiquetas de texto, los botones y los contenedores de imágenes son átomos.

#Moléculas

Las vistas que involucran múltiples átomos para formarse, pero aún se ven y se comportan como una sola entidad para el usuario son moléculas. Por ejemplo, los campos de entrada tienen el cuadro de entrada, el campo de error y un botón de borrado, pero juntos son una sola entidad.

#Organismos

Componentes complejos, pero reutilizables, que funcionan juntos de forma coherente. Compuesto por múltiples átomos y moléculas. Un ejemplo son las barras de clasificación, que consisten en etiquetas, cada una con un número y un icono. Las etiquetas también cambian de color cuando se seleccionan diferentes clasificaciones. Cada etiqueta individualmente también se usa en otros lugares, pero como una barra de calificación, todo funciona en conjunto para crear un nuevo significado.

Tipografía

La tipografía, como quizás sepa, es el arte de organizar los tipos para hacer que el lenguaje escrito sea legible, legible y atractivo cuando se muestra. La disposición del tipo implica la selección de tipos de letra, tamaños de puntos, longitudes de línea, espaciado entre líneas y entre letras, y el ajuste del espacio entre pares de letras.

Admitimos las siguientes variaciones tipográficas:

Extra ligero

Luz

Regular

Medio

seminegrita

Audaz

extra negrita

Puede usar cualquier fuente que tenga hasta 8 pesos de fuente y asignarlos desde estos alias. Si bien tenemos Metropolis, Okra y Roboto para demostración, puede usar cualquier fuente que vaya con su marca.

Colores

Sushi también proporciona un conjunto de colores predefinidos en su paleta. Para casos extremadamente únicos, siéntase libre de usar sus propios colores, pero de lo contrario, recomendamos usar colores de esta paleta para todos los componentes de su producto.

Repositorio de código