Sobre esta plantilla
Antes de rehacer cada landing page para una empresa industrial, lee Cordex: la composición y la especificación que hay detrás están aquí. El titular de la propia página dice “We protect transport safer across all industries”, y la composición se construye alrededor de esas palabras exactas. El esquema de color es negro #0A0A0B de base, #F7F7F8 para la tipografía y rojo #E23B32 para los acentos, y la página está compuesta en Inter. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1920x1416 antes de escribir código. El movimiento se limita a transiciones de 0.7s y un vídeo en bucle de fondo. Es la referencia adecuada para este tipo de landing page en una empresa industrial, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Pensado para estudios que tienen que explicar a un cliente el comportamiento a 480px sin construir antes un prototipo.
- Equipos que rehacen su landing page de industria 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.
- La página sirve a desarrolladores front-end que rehacen su landing page de una empresa industrial en un único archivo HTML autocontenido y buscan los números que hay detrás del aspecto.
Qué incluye
- Enlaces antes de la acción. La barra es la parte más callada de la composición: marca, una fila corta de enlaces y una acción en #E23B32, todo al paso de tipo más pequeño del brief. Por debajo de 480px los enlaces colapsan en lugar de saltar a una segunda línea. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra.
- Vídeo en la capa inferior. El vídeo ocupa la capa inferior de la composición de 1920x1416, con el texto dispuesto por encima y nada entre ambos. El bucle es lo bastante corto (6,8s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Los paneles sostienen el centro. Donde iría un bloque de texto corrido, esta página coloca un conjunto de paneles, y eso es lo que mantiene landing page fácil de escanear. Los paneles comparten la tipografía de interfaz a un solo tamaño, lo que evita que la cuadrícula se convierta en una segunda maquetación.
- El comportamiento se define por ancho. Los cambios de ancho se resuelven en el propio tipo: un clamp entre 12px y 21px lleva el titular del móvil al escritorio sin una composición móvil aparte. El menú móvil forma parte del mismo brief, así que el estado plegado también está diseñado.
Movimiento e interacción
El bucle hace el trabajo ambiente
Un clip de 6,8s 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.
Duraciones del brief
Cada cambio de estado de la especificación lleva una duración: las transiciones se resuelven en torno a 0.7s. Nada queda en el valor por defecto del navegador, y por eso la página se siente diseñada y no animada. El easing se especifica junto a la duración (0.7s), así que una reconstrucción no puede colar otra sensación sin avisar.
El orden detrás de landing page
La atención se canaliza en lugar de dispersarse. “We protect transport safer across all industries” hace ese trabajo desde el primer fotograma. El ojo aterriza primero en la línea de display, después en el texto de apoyo y por último en la acción. La prueba social, cuando aparece, se queda en una franja o una fila y no en un muro de testimonios. Esa secuencia es el diseño. Quien busca industria recibe la oferta antes que las opciones.
Leer Cordex como especificación
El coste de una escala fija es menos margen para improvisar. Con tipografía de 12px a 21px y secciones de 100vh la composición se mantiene coherente, pero un elemento nuevo hay que encajarlo y no simplemente colocarlo. Nada de este tipo de landing page depende de un valor por defecto.
El reflujo de landing page
Cuando el texto es largo, la maquetación estrecha es la primera que rompe. Aquí un clamp entre 12px y 21px absorbe el cambio, y la tipografía se limita entre 12px y 21px, la maquetación cambia a 480px y la sección se mantiene a 100vh. El orden es lo último que cambia.
Preguntas frecuentes
¿Necesito un único archivo HTML autocontenido para recrear Cordex?
Cordex 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.
¿Qué puedo hacer con el brief de Cordex una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 29.696 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 Cordex?
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 1920x1416. En ningún punto la imagen renderizada funciona como fuente de la verdad.
