Sobre esta plantilla
Vertex es la referencia de landing page para una marca de ecommerce, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. “Streamline the shop” es la línea que la maquetación está pensada para sostener. La paleta se queda en azul intenso #020204 de base, y el tipo es Poppins. La entrega es un único archivo HTML autocontenido: una página, sin plugins y sin herramientas de build entre tú y el diseño. El brief gasta su presupuesto de movimiento en transiciones de 620ms, cubic-bezier(.4,0.2,1) y un vídeo en bucle de fondo. Sirve de referencia cuando construyas este tipo de landing page para una marca de ecommerce y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Pasa un único archivo HTML autocontenido al desarrollador con el recorte de 1920x1414 adjunto y deja que lo reconstruya.
- Agencias que llevan su landing page de una marca de ecommerce a una propuesta y quieren citar tipografía de 12px a 54px y una cuadrícula de 4 columnas en la presentación para que el presupuesto siga en pie tras el kickoff.
- La página sirve a desarrolladores front-end que rehacen su landing page de una marca de ecommerce en un único archivo HTML autocontenido y buscan los números que hay detrás del aspecto.
Qué incluye
- La navegación es fina a propósito. La navegación es una sola fila, sin un segundo nivel debajo. Por debajo de 158px los enlaces se pliegan en una superposición a pantalla completa. Por debajo de 158px los enlaces colapsan en lugar de saltar a una segunda línea.
- El fotograma de póster importa. El fondo es un único bucle de 6,9s a 1920x1414, recortado para cubrir y sin teñir. Todo lo demás flota encima, en una capa superior. Exporta a 1920x1414 o más ancho y el recorte de cobertura sigue funcionando.
- Una píldora para lo único nuevo. Una insignia, un mensaje: la píldora se sitúa sobre el titular en Poppins al paso más pequeño, y nada más compite por ese hueco. La píldora se compone en el paso más pequeño del brief, así se lee como etiqueta y no como un segundo título. Retírala cuando la noticia ya no sea nueva.
- Una barra sin nada de más. No des a la marca más espacio que el que pide su tipografía. La captura de la referencia es de 1920x1414.
Movimiento e interacción
El lienzo sostiene la primera pantalla
Un lienzo en vivo hace el trabajo visual: un lienzo WebGL. Como es un render y no una imagen fija, el elemento focal aguanta a cualquier tamaño. Mantén la interfaz plana alrededor.
El tiempo va en el brief
Los tiempos son cortos y coherentes (620ms usando cubic-bezier(.4,0.2,1)), así que el hover y la pulsación se leen como un solo sistema y no como un conjunto de efectos sueltos. Nada espera a una posición de scroll, así que la página responde en cuanto la tocas.
Qué se sostiene para Ecommerce
Una capa de tinte sobre el material habría sido la solución fácil. El brief la deja fuera. El medio es un bucle de 6,9s en 1920x1414. El texto aguanta igual porque tipografía de 12px a 54px y una cuadrícula de 4 columnas mantienen el marco tranquilo. Da a quien lee páginas de ecommerce el camino más corto y honesto hasta la oferta.
Las cifras detrás de landing page
Cuando una reconstrucción se desvía, lo primero que se va es el espaciado. Vertex lo evita publicando tipografía de 12px a 54px, una cuadrícula de 4 columnas, esquinas de 12px y pasos de espaciado de 16px junto a la composición. Nada de este tipo de landing page depende de un valor por defecto.
Qué cambiar primero en Vertex
Cambia primero el texto y el material, después el color y por último la maquetación. El marco de 1920x1414 y la escala de Poppins son lo que sostiene la página, así que sustituye alrededor de ellos y no a través de ellos. La composición es la parte reutilizable, y sobrevive a una marca distinta.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Vertex?
El brief capturado ocupa 51.432 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.
¿Puedo reconstruir este diseño de landing page de Vertex con otro stack?
Vertex 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 Vertex es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 51.432 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
