Sushi es el sistema de diseño muy propio de Zomato, que ayuda a construir interfaces de usuario robustas después de un lenguaje de diseño limpio y simple. Nosotros en Zomato, hemos construido esto desde el terreno. No es solo un sistema de diseño para nosotros, sino más que eso, nos ayuda a proporcionar una experiencia nueva y mejorada a nuestros usuarios. Sushi puede ayudarlo a construir las interfaces de usuario a medida después de un lenguaje de diseño atómico, limpio y simple. Mientras que el sushi se acumula en su propio idioma de diseño, abraza completamente y utiliza los componentes de diseño de materiales de Google internamente en muchas áreas.
Como sistema de diseño y una referencia para las directrices de marca, se utiliza y representa por varios equipos dentro de Zomato, tal - 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 los activos y componentes que utiliza para construir un producto digital. Según Emmet Connolly, director de diseño de productos en el intercomunicador, "... la mayoría de los sistemas de diseño son realmente bibliotecas de patrones: una gran caja de piezas de UI LEGO que se pueden montar de manera casi infinita. Todas las piezas pueden ser consistentes, pero eso no significa que los resultados ensamblados sean. Su producto es más que una pila de elementos de UI 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
Fundaciones
Las fundaciones son directrices de marca digital, que definen la tipografía, las paletas de colores, los iconos, el espacio, la sombra y la arquitectura de la información de nuestro sistema de diseño. Sushi, siguiendo los principios de diseño atómico, se construye de abajo hacia arriba utilizando componentes compuestos, ordenados como átomos ➡️ moléculas ➡️ organismos.
diseño atómico
Diseño atómico (según lo descrito por Brad Frost ) mapeado a nuestro sistema.
# patoms
Las unidades indivisibles más pequeñas son átomos. En Android (o cualquier etiqueta de texto de UI móvil), los botones y los titulares de imágenes son átomos.
#molecules
Vistas que involucran a múltiples átomos para formar, pero aún se ven y se comportan. Como una sola entidad al usuario son moléculas. Por ejemplo, los campos de entrada tienen el cuadro de entrada, el campo de error y un botón claro, pero juntos es una sola entidad.
#organismos
Complejo, pero componentes reutilizables , que trabajan de forma cohesiva juntos. Compuesto por múltiples átomos y moléculas. Un caso en el punto de ser las barras de calificación, que consiste en etiquetas, cada una con un número y un icono. Las etiquetas cambian de color también, cuando se seleccionan diferentes calificaciones. Cada etiqueta individualmente también se usa en otros lugares, pero como una barra de calificación, todo funciona juntos para crear un nuevo significado.
Tipografía
Tipografía, como usted sabrá, es El arte de organizar el tipo para hacer que el lenguaje escrito sea legible, legible y atractivo cuando se muestre. La disposición de tipo implica la selección de tipografías, tamaños de puntos, longitudes de línea, espaciamiento de línea y espacio de letras, y ajuste el espacio entre pares de letras.
Admitimos las siguientes variaciones de tipografía -
Extralight
Luz
Regular
Medio
Semibold
Negrit
Extrabold
Puedes usar cualquier fuente que tenga hasta 8 pesos de fuente y asignarlos de estos alias. Si bien tenemos Metropolis, Okra y Roboto para Demo, 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.
9Apps 4.9
