Sobre esta plantilla
Skybridge 404 conserva el rastro de sus decisiones: el brief que hay detrás de página 404 ocupa 7.104 caracteres. El color se limita a azul #1165B4 de base y blanco #E7E1D8 para la tipografía y la página se compone en Geist Mono. Se entrega como React y Tailwind CSS, así que el conjunto de página 404 se puede trasladar a un proyecto sin traspaso de diseño. El brief gasta su presupuesto de movimiento en un vídeo en bucle de fondo. Cuando prepares el brief de cada página 404 de ecommerce, parte de esta composición y sustituye el tema.
Pensado para
- Pensado para estudios que tienen que explicar a un cliente el comportamiento a 640px sin construir antes un prototipo.
- Pensado para agencias que presentan propuestas de ecommerce y necesitan incluir un marco de 1456x1080 en la primera respuesta al cliente.
- Los responsables de estudio que llevan varios proyectos a la vez usarán este diseño de página 404 como patrón que copian las demás páginas.
Qué incluye
- La barra sigue la cuadrícula. La navegación es una sola fila, sin un segundo nivel debajo. Por debajo de 640px los enlaces se pliegan en una superposición a pantalla completa. Las etiquetas son lo bastante cortas para caber en una línea a 640px, y el elemento activo se marca con peso y no con una píldora. Diseña el estado colapsado antes de añadir un sexto enlace.
- Un solo medio lleva el tono. Un único recurso de 4,7s sostiene toda la primera pantalla, y la página no tiene un segundo medio que mantener sincronizado. El bucle es lo bastante corto (4,7s) para que el ojo lo lea como textura y no como una línea de tiempo.
- El interletraje se cierra al crecer. Aquí el tipo es el sistema de estilo: Geist Mono al tamaño display, la misma fuente en toda la interfaz y ningún segundo color de acento haciendo el trabajo. La tipografía display se usa a un solo tamaño, por eso nunca compite consigo misma.
- Primero el texto, después el adorno. Todo lo que está por encima del pliegue se gana su sitio. El brief nombra el texto, el marco de 1456x1080 y los tamaños de tipo, y no deja nada decorativo compitiendo con ellos. La página es una sola composición a 1456x1080, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
Una escena, no una imagen
La primera pantalla la construye el navegador y no llega como imagen: un lienzo WebGL. El render es lo último en estar listo, así que la página tiene que funcionar en el estado previo a su carga.
Un bucle, no una secuencia
Un clip de 4,7s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. El clip es lo bastante corto para girar sin costura visible, y eso importa más que su resolución.
El reflujo de página 404
Aquí responsive significa que cambia la escala, no la jerarquía: la escala es fluida en lugar de escalonada, la maquetación cambia a 640px y la sección se mantiene a 100vh. El texto se queda por encima del pliegue, los controles siguen siendo lo bastante grandes para tocarlos y se respeta el movimiento reducido. El orden es lo último que cambia.
Los tiempos detrás de página 404
Compara el movimiento de aquí con una página guiada por scroll. En ambas hay movimiento; esta lo hace donde dice el brief (estados hover y pulsados, un bucle de 4,7s y un lienzo en vivo), así que el texto sigue delante. Nada se anima por gusto en este tipo de página 404.
El orden detrás de página 404
Aquí el orden es el diseño: navegación, la fila de cifras y el clip de fondo se colocan para que la oferta llegue antes que la prueba, y la distancia entre ambas la marcan secciones de 100vh y pasos de espaciado de 40px. Quien busca ecommerce recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Skybridge 404?
El brief capturado ocupa 7.104 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Por qué la ficha nombra React y Tailwind CSS?
Skybridge 404 se construyó en React y Tailwind CSS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿De dónde sale el diseño de Skybridge 404?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 1456x1080.
