Sobre esta plantilla
Aquí no hay una captura sino un caso de landing page de Pet Diagnostics, con el brief original al lado. La paleta se queda en #101010 de base y crema #EEF0D0 para la tipografía, y el tipo es Inter. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 2336x1080 antes de escribir código. El movimiento se queda en un vídeo en bucle de fondo. Es más útil cuando cada landing page de Salud tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Pensado para estudios que tienen que explicar a un cliente el comportamiento a 820px sin construir antes un prototipo.
- Equipos que rehacen su landing page de salud a partir de la referencia de un competidor y quieren dejar claro un único archivo HTML autocontenido antes de que nadie se comprometa con un framework.
- Escribe tu propio titular y luego rehace este diseño de landing page en un único archivo HTML autocontenido con las medidas intactas.
Qué incluye
- Navegación contenida en una fila. La barra es una fila de texto y una acción, medida en tipografía de 12px a 16px y secciones de 92vh, así que se lee como franja y no como banda. Por debajo de 820px los enlaces colapsan en lugar de saltar a una segunda línea.
- Medios sin superposición. Los medios hacen trabajo atmosférico y no narrativo: un bucle de 7,1s a 2336x1080 detrás de todo lo demás. Un fotograma de póster a 2336x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Lista, no muro de tarjetas. Las funciones se componen como una lista en Inter y no como un muro de tarjetas. Los elementos comparten un tamaño y un marcador, lo que mantiene escaneable una lista larga.
- Navegación sin fondo propio. Las etiquetas son lo bastante cortas para caber en una línea a 820px, y el elemento activo se marca con peso y no con una píldora.
Movimiento e interacción
El bucle hace el trabajo ambiente
Un clip de 7,1s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. El bucle se recorta a cubrir, lo que significa que la composición no depende de un tamaño de fotograma concreto.
Respuesta en los controles
La capa interactiva es pequeña a propósito: estados hover en los botones y los enlaces y no en todas las tarjetas. Cada estado cambia una sola propiedad, lo que mantiene legible la respuesta.
Qué cambiar primero en Pet Diagnostics
Si tu marca gasta una paleta más pesada, pruébala contra el marco antes de decidir. Como #101010 sostiene la página, un acento más oscuro necesita más contraste del que usa la referencia. El tema es la parte que debería cambiar.
Qué se sostiene para Salud
Podrías reconstruirlo como una pila de tarjetas sueltas y perderías solo el argumento. Esta clase de landing page se lee como una única decisión: navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas en una sola secuencia. Pet Diagnostics enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Los tiempos detrás de landing page
El presupuesto de animación está declarado: estados hover y pulsados y un bucle de 7,1s. Nada en este tipo de landing page se mueve sin un valor detrás. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿Necesito un único archivo HTML autocontenido para recrear Pet Diagnostics?
Pet Diagnostics se construyó en un único archivo HTML autocontenido, 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.
¿El brief de Pet Diagnostics es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 18.711 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Qué me llevo cuando copio el brief de Pet Diagnostics?
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 2336x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
