Redline Kit de navegación

Redline Kit de navegación es un conjunto de 15 componentes de navegación y entrada dibujados en estilo cyberpunk, donde cada marco tiene su propio contorno asimétrico — una muesca en una esquina, un raíl en un borde. Contiene pestañas activas e inactivas, la guía de una barra de desplazamiento, su tirador y dos flechas, un desplegable en estado cerrado y abierto con su menú, campos de texto en reposo y con foco y botones redondos de cerrar, atrás, más y menos.

La mayoría de los kits de interfaz gratuitos se quedan en paneles y botones, lo que significa que la primera pantalla de ajustes que montes es el momento en que empiezas a dibujar tu propio arte. Esto es el resto: las piezas que un menú necesita de verdad antes de funcionar.

La silueta está compuesta y no escalada: cada una de las cuatro esquinas y cada uno de los cuatro bordes recibe su propio tratamiento, así que no hay dos marcos del conjunto que compartan contorno. El resplandor de neón es una pila de trazos de opacidad decreciente, no un filtro de desenfoque — algunos rasterizadores de SVG aplican los filtros de otra manera y convierten el halo en una mancha a 4x.

Dentro de ese estilo, esta es la lectura de Redline: una interfaz de tema oscuro sobre una paleta negro sangre con acentos en ámbar de aviso, construida en torno a un marco de borde único, botones biselados de 140x36, barras de núcleo hueco divididas en 10 segmentos e iconos a dos tintas sobre una rejilla de 32px. 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.

El campo de texto con foco ensancha su contorno en vez de solo cambiar de color, porque un anillo de foco que es únicamente un matiz desaparece en modo de alto contraste y se lleva por delante la navegación por teclado. La pestaña activa se funde con la superficie de debajo en vez de solo aclararse, y eso es lo que la hace leerse como conectada.

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 Redline, lo que significa que este kit y el kit de paneles de Redline encajan sin redimensionar ninguno. Encaja bien en interfaces cyberpunk, de ciencia ficción y de futuro cercano.

Creative Commons Atribución 4.0 — Gratis para uso comercial. Atribución obligatoria. Términos completos · Qué significa en la práctica