Sobre esta plantilla
Aurora Onboard da a una marca de lifestyle una primera pantalla terminada y las cifras que la produjeron. El color se limita a negro #000000 de base y índigo apagado #DBCDE9 para la tipografía y la página se compone en Inter. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. Tómalo como el brief de pantalla de inicio de sesión para una marca de lifestyle que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Profesionales del marketing de producto que necesitan que cada pantalla de inicio de sesión siga leyéndose con una imagen fija en 1850x1352 detrás del texto.
- Quien le pase el brief de pantalla de inicio de sesión a un modelo usará el prompt de 4.770 caracteres como punto de partida.
- Pensado para un fundador en solitario que saca un único diseño de pantalla de inicio de sesión para una marca de lifestyle y no tiene ningún sistema de diseño detrás.
Qué incluye
- El interletraje se cierra al crecer. Los pasos de tamaño y el interletraje del brief son los que dan el tono: Inter a un tamaño display cerrado y una caída clara hasta el texto de apoyo. El paso de pie de foto es lo bastante pequeño para situarse bajo una cifra sin alterar el ritmo de la página.
- Un campo, una acción. Aquí solo hay una decisión: rellenar el formulario o marcharse. Todo lo demás de la pantalla sostiene esa decisión. Las etiquetas van encima de sus campos y el texto de apoyo se queda por encima del primer campo. Especifica el estado de foco.
- La composición es el contenido. Todo lo que está por encima del pliegue se gana su sitio. El brief nombra el texto, el marco de 1850x1352 y los tamaños de tipo, y no deja nada decorativo compitiendo con ellos. La página es una sola composición a 1850x1352, y por eso se sostiene cuando cambia el texto.
- El tipo hace el estilo. La fuente va con tamaños fijos, y eso es lo que mantiene relacionadas la línea display y el texto de interfaz.
Movimiento e interacción
Hover solo donde aporta
Cada elemento interactivo hace una sola cosa (estados hover en los botones y los enlaces y no en todas las tarjetas), y eso mantiene los estados previsibles. Los objetivos interactivos son lo bastante grandes para tocarlos y el tratamiento del puntero es coherente entre ellos.
Movimiento que no estorba
Esta se entrega como composición estática en 1850x1352, así que la jerarquía tiene que funcionar sin movimiento, y funciona. El brief no incluye ninguna librería de animación, lo que mantiene pequeña la reconstrucción.
El argumento de pantalla de inicio de sesión
Si tu primera pantalla explica hoy tres cosas, esta es la versión que explica una. Aquí el titular, la fila de cifras, el formulario, el clip de fondo y el pie de página se colocan en orden de lectura, con un marco de 1850x1352 marcando el ritmo. Da a quien lee páginas de lifestyle el camino más corto y honesto hasta la oferta.
Cómo ordena Aurora Onboard la primera lectura
Si pones tu propio texto en este tipo de pantalla de inicio de sesión, la secuencia se mantiene, porque los elementos no son intercambiables: el titular, la fila de cifras, el formulario, el clip de fondo y el pie de página cumplen una función propia. Quien busca lifestyle recibe la oferta antes que las opciones.
El reflujo de pantalla de inicio de sesión
La composición de escritorio se resuelve contra 1850x1352, y la maquetación estrecha está diseñada y no heredada: la escala es fluida en lugar de escalonada. El movimiento incluye una rama de movimiento reducido, y el medio lleva un fotograma de portada para que la página siga comunicando cuando no hay reproducción automática. Un apretujón habría sido más barato y no aguantaría.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Aurora Onboard?
El brief capturado ocupa 4.770 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.
¿Necesito React y Tailwind CSS para recrear Aurora Onboard?
Aurora Onboard 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 Aurora Onboard?
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 1850x1352.
