Mint Interfaz de tienda

Mint Interfaz de tienda es un conjunto de 12 elementos de tienda y economía dibujados en estilo plano, donde no hay contornos ni sombreado de ningún tipo. Contiene cuatro estados de fila de compra, una pestaña de categoría activa y otra inactiva, una tira de monedero, un selector de cantidad, una tira de confirmación de compra y tres indicadores de existencias contables.

Una pantalla de tienda tiene una tarea que una de inventario nunca tiene: decir qué no se puede pagar antes de pulsar el botón. La mayoría de los sets gratuitos lo resuelven poniendo el precio en rojo, algo que falla con quien no puede leer ese rojo y vuelve a fallar en una captura en escala de grises. Además choca con el color de vida que ya usa el resto de la interfaz.

La profundidad viene solo de una sombra suave por capas — tres pasadas apiladas en vez de un filtro de desenfoque, porque algunos rasterizadores de SVG escalan mal un desenfoque y el PNG de 4x sale como una mancha. Todo lo demás es un único color macizo.

Dentro de ese estilo, esta es la lectura de Mint: una interfaz de tema oscuro sobre una paleta gris azulado con acentos en verde menta, construida en torno a una banda de cabecera cruzando la parte superior del marco, botones de esquinas rectas de 120x36, barras con marcas divididas en 12 segmentos e iconos a dos tintas sobre una rejilla de 16px. Esas medidas son la razón por la que dos familias pueden compartir un estilo artístico sin ser intercambiables: el estilo decide cómo se dibuja un borde, los números deciden para qué sirve la interfaz.

Los cuatro estados de fila se distinguen por estructura y no por color. La fila asequible lleva una franja continua en el borde izquierdo, la inasequible lleva una franja discontinua y una barra que tacha su campo de precio, y la ya comprada cierra ese campo y marca su esquina superior derecha. Eso hace que el estado sobreviva a un tinte, a un filtro de daltonismo y a una captura sin saturación. El indicador de existencias es contable por lo mismo: cinco puntos, un punto y ninguno se leen como lleno, escaso y agotado sin una sola palabra ni un solo color.

Cada sprite viene como SVG editable y como PNG transparente en 1x, 2x y 4x, así que puedes soltar los PNG directamente en un motor o abrir el vector y cambiar un color. Dibujado con las mismas medidas que el resto de la familia Mint, lo que significa que este kit y el kit de paneles de Mint encajan sin redimensionar ninguno. Encaja bien en interfaces minimalistas y móviles.

Creative Commons Zero 1.0 — Dominio público. Sin atribución. Términos completos · Qué significa en la práctica