Sushi Design System - UI Kit
10 k+
Descargas
Apto para todo público
info
Acerca de esta app
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
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
Actualización
Seguridad de los datos
Los desarrolladores pueden mostrar información aquí sobre cómo su app recopila y usa tus datos. Más información sobre la seguridad de los datos
No hay información disponible
