Sobre esta plantilla
Antes de rehacer cada landing page para una marca de ecommerce, lee Synth Mode: la composición y la especificación que hay detrás están aquí. Abre con “LGPSM — Future Forward Fashion” y le da el marco a esa línea en lugar de encogerla en una tarjeta. El color se limita a blanco #EBEBED de base y azul apagado #64748B para los acentos y la página se compone en Plus Jakarta Sans. Se entrega como React y Tailwind CSS, y la captura se fija a 1920x1396 antes de escribir código. Todo el movimiento cabe en transiciones de 3s y un vídeo en bucle de fondo. Es la referencia adecuada para este tipo de landing page en una marca de ecommerce, 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 10.533 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 Synth Mode.
- Estudios que pasan su landing page a un cliente que necesita comprobar #64748B frente a #EBEBED antes de aplicar la identidad de marca.
Qué incluye
- Navegación sin fondo propio. Marca, enlaces y la acción #64748B comparten una línea base, y eso es lo que evita que una fila fina parezca accidental. Los enlaces se componen a un tamaño menor que la marca, y la acción en #64748B es el único elemento de la barra con peso.
- Medido contra el viewport. Aquí nada se mide a ojo. La especificación fija transiciones de 3s, y el resto de la maquetación se deriva de esos valores. Los valores se citan del prompt capturado y no se deducen, por eso sobreviven a un nuevo render.
- Medios detrás del texto. El vídeo ocupa la capa inferior de la composición de 1920x1396, con el texto dispuesto por encima y nada entre ambos. Un fotograma de póster a 1920x1396 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Paneles con el mismo peso. La cuadrícula fija el orden de lectura: paneles del mismo peso, una idea cada uno, compuestos en Plus Jakarta Sans a un tamaño pequeño para que la estructura siga visible. El espaciado entre paneles es un único valor, y eso es lo que evita que una cuadrícula densa parezca apretada. Mantén el orden de lectura como orden de paneles.
Movimiento e interacción
Un bucle, no una secuencia
El movimiento ambiente viene del bucle de 7,3s en 1920x1396 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. Un fotograma de portada hace de suplente cuando la reproducción automática está bloqueada, así que el movimiento suma y no es obligatorio. Graba o exporta a 1920x1396 o más ancho.
Rápido, pero deliberado
Los tiempos son cortos y coherentes (3s), así que el hover y la pulsación se leen como un solo sistema y no como un conjunto de efectos sueltos. El easing se especifica junto a la duración (3s), así que una reconstrucción no puede colar otra sensación sin avisar.
El orden detrás de landing page
Una pantalla, una acción y navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas entre medias. El brief fija ese orden en lugar de dejar la primera pantalla a una pila de secciones. Quien busca ecommerce recibe la oferta antes que las opciones.
Leer Synth Mode como especificación
Cuando una reconstrucción se desvía, lo primero que se va es el espaciado. Synth Mode lo evita publicando transiciones de 3s junto a la composición. Nada de este tipo de landing page depende de un valor por defecto.
Los tiempos detrás de landing page
Traslada el movimiento al final. El brief lo fija como transiciones de 3s, un bucle de 7,3s y capas con parallax, y eso es más fácil de igualar cuando la maquetación ya está en su sitio. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Synth Mode?
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 1920x1396. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de landing page de Synth Mode con otro stack?
Synth Mode 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 Synth Mode?
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 1920x1396.
