Sobre esta plantilla
Antes de rehacer cada pie de página para un producto de IA o SaaS, lee Designy Footer: la composición y la especificación que hay detrás están aquí. Toda la página se construye sobre blanco #FAFAFA de base y negro #0A0A0A para la tipografía. Se entrega como React y Tailwind CSS, así que el conjunto de pie de página se puede trasladar a un proyecto sin traspaso de diseño. El presupuesto de movimiento se agota en un vídeo en bucle de fondo. Parte del brief capturado y ajusta la composición de pie de página en lugar de empezar de cero.
Pensado para
- Llévate el marco de 1922x1394 y tipografía de 13px a 14px y pasos de espaciado de 13px de este diseño de pie de página antes que cualquier otra cosa.
- Este diseño de pie de página sirve a fundadores que necesitan una pantalla de prueba de que los textos de SaaS aguantan 2,9s de vídeo en bucle.
- Si la maquetación parte de React y Tailwind CSS, llévate primero tipografía de 13px a 14px y pasos de espaciado de 13px y no toques la paleta hasta que se asiente la cuadrícula.
Qué incluye
- La navegación es fina a propósito. Una serie corta de enlaces y una única acción se sitúan sobre pie de página, sostenidas en tipografía de 13px a 14px y pasos de espaciado de 13px, de manera que la barra nunca compite con la composición que tiene detrás. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador. La barra son unos pocos elementos, así que se reconstruye sin librería de componentes.
- Un clip, no una ilustración. Los medios hacen trabajo atmosférico y no narrativo: un bucle de 2,9s a 1922x1394 detrás de todo lo demás. El bucle es lo bastante corto (2,9s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Una barra sin nada de más. Los estados hover y de foco están definidos para cada enlace, y eso es lo que evita que una barra fina parezca inerte. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Números que llegan al montaje. En la maquetación nada queda a la intuición: el brief cita tipografía de 13px a 14px y pasos de espaciado de 13px y el montaje tiene que dar esos valores. Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado. Mide antes de ajustar.
Movimiento e interacción
El bucle hace el trabajo ambiente
El movimiento ambiente es un clip de 2,9s en 1922x1394, en bucle discreto detrás del texto y sin reaccionar al puntero. El clip es lo bastante corto para girar sin costura visible, y eso importa más que su resolución.
Estático a propósito
El brief deja fuera la animación y deja que la maquetación de 1922x1394 sostenga la página, con el hover y la pulsación como únicos cambios. La composición se queda quieta, así que la jerarquía tiene que sostener la página, y lo hace.
Qué gana un producto de IA o SaaS aquí
Cuando haces el brief de pie de página para un proyecto de SaaS, lo difícil es decidir qué se niega a decir la primera pantalla. Designy Footer lo responde de antemano: una línea de display y navegación, la fila de cifras, la cuadrícula de tarjetas y el pie de página detrás. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
El orden detrás de pie de página
Una pantalla, una acción y navegación, la fila de cifras, la cuadrícula de tarjetas y el pie de página entre medias. El brief fija ese orden en lugar de dejar la primera pantalla a una pila de secciones. Quien busca SaaS recibe la oferta antes que las opciones.
Las cifras detrás de pie de página
La página tiene más cifras de las que parece. Las que una reconstrucción debe conservar son estas: tipografía de 13px a 14px y pasos de espaciado de 13px; el resto puede moverse. Nada de este tipo de pie de página depende de un valor por defecto.
Preguntas frecuentes
¿El brief de Designy Footer es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 3.029 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto ocupa el prompt que hay detrás de Designy Footer?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1922x1394. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Designy Footer depende de React y Tailwind CSS?
Designy Footer 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.
