Sobre esta plantilla
Innovation resuelve el problema de cada landing page de una agencia o un estudio con un solo brief capturado. El esquema de color es azul intenso #020D14 de base, y la página está compuesta en Instrument Serif. Se entrega como React y Tailwind CSS, y la captura se fija a 447x800 antes de escribir código. Todo el movimiento cabe en transiciones de 500ms. Es la referencia adecuada para este tipo de landing page en una agencia o un estudio, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Quien le pase el brief de landing page a un modelo usará el prompt de 8.996 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de Innovation.
- Conserva Instrument Serif y rehace el diseño de landing page en torno a esa tipografía en vez de abrir una escala tipográfica nueva para tu marca.
Qué incluye
- Fila superior: marca, enlaces y acción. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Instrument Serif, para que la barra pertenezca a la página de abajo y no a un sistema aparte. Los estados hover y de foco están definidos para cada enlace, y eso es lo que evita que una barra fina parezca inerte.
- El brief nombra los pasos. La maquetación trabaja con valores absolutos y no con proporciones: pasos de espaciado de 20px y transiciones de 500ms. Las proporciones del marco se registran junto a los tamaños, así un remontaje también acierta con el formato.
- El formulario es toda la primera pantalla. Aquí solo hay una decisión: rellenar el formulario o marcharse. Todo lo demás de la pantalla sostiene esa decisión. La acción se sitúa justo bajo el último campo, así la decisión nunca queda a más de un vistazo. Una columna, una acción.
- Estructura en una sola pantalla. La composición está completa en 447x800: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 447x800, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
El tiempo va en el brief
Los controles se resuelven en 500ms, lo bastante rápido para que la página responda al tocarla y no después. La misma duración se reutiliza en todos los controles, lo que mantiene las interacciones como un solo sistema. Los tiempos forman parte del diseño, no son un repaso final.
Una superficie interactiva pequeña
La interacción se queda en cada control (estados hover en los botones y los enlaces y no en todas las tarjetas), así que nada más de la página se mueve como efecto secundario. El hover y el foco están especificados juntos, así que el puntero y el teclado reciben la misma información. Comprueba los estados en un dispositivo táctil.
Cómo ordena Innovation la primera lectura
Donde una página de marketing apila pruebas por debajo y cruza los dedos, este tipo de landing page pone navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas delante de quien lee y retiene el resto. Quien busca agencia recibe la oferta antes que las opciones.
Por qué esta composición funciona para agencia
La contención te cuesta espacio para pruebas por encima de la primera pantalla. Este brief acepta ese coste y gasta la primera pantalla en la oferta, con las cifras ya fijadas (pasos de espaciado de 20px y transiciones de 500ms) para poder añadir abajo una sección de prueba sin rehacer nada. Da a quien lee páginas de agencia el camino más corto y honesto hasta la oferta.
Los tiempos detrás de landing page
El movimiento se limita a transiciones de 500ms y estados hover y pulsados; se ejecuta una vez al entrar y luego se aparta, que es el presupuesto adecuado para que cada landing page siga siendo legible. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Innovation?
El brief capturado ocupa 8.996 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?
Innovation 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.
¿Puedo publicar una página reconstruida a partir de Innovation sin acreditar nada?
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 447x800.
