Sobre esta plantilla
Lee Northstar como especificación de landing page: los valores se escribieron antes de construir la página. El esquema de color es turquesa #1D8FB8 de base, blanco #EEF2F3 para la tipografía y naranja apagado #F0DAC8 para los acentos, y la página está compuesta en Instrument Serif. El montaje es vanilla JS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El brief gasta su presupuesto de movimiento en transiciones de 580ms y cubic-bezier(.16,1.3,1). Tenlo abierto mientras escribes: el brief de 11.589 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Llévate el marco de 1280x956 y secciones de 100vh y pasos de espaciado de 14px de este diseño de landing page antes que cualquier otra cosa.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de Northstar.
- Copia la entrada de 580ms y la curva cubic-bezier(.16,1.3,1) tal cual si quieres la misma implementación a la misma velocidad.
Qué incluye
- Una fila, sin desplegables. La navegación es una tira fina y no una banda: marca a la izquierda, enlaces hacia el centro-derecha y una acción en #F0DAC8, todo en la capa superior de landing page y sin fondo propio. Los enlaces se componen a un tamaño menor que la marca, y la acción en #F0DAC8 es el único elemento de la barra con peso.
- Los pasos de espaciado van cifrados. En la maquetación nada queda a la intuición: el brief cita secciones de 100vh, pasos de espaciado de 14px, transiciones de 580ms y easing cubic-bezier(.16,1.3,1) y el montaje tiene que dar esos valores. Cada valor responde a una función: un paso de tipo, un hueco, un radio o una transición. Traslada los valores junto con la maquetación.
- El tipo fija la jerarquía. La línea display se compone en Instrument Serif a un tamaño que fija el brief, lo que convierte el titular en un elemento de composición y no en un párrafo. El texto de interfaz se queda en una sola tipografía, por lo que la página nunca mezcla dos voces al mismo tamaño. No añadas un tamaño sin función.
- Estructura en una sola pantalla. Toda la composición cabe en una pantalla y se entrega como vanilla JS, con el texto, los medios y los controles nombrados en el brief. La página es una sola composición a 1280x956, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
Rápido, pero deliberado
Los cambios de estado están fijados en 580ms, así que la respuesta de los controles es un valor de diseño y no el que trae el navegador por defecto. Como los valores son cortos, una reconstrucción que los alargue se nota de inmediato.
Estático a propósito
El brief deja fuera la animación y deja que la maquetación de 1280x956 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. No hacen falta líneas de tiempo de scroll.
El orden detrás de landing page
Léelo en orden: navegación, el titular, la fila de cifras, el clip de fondo y el pie de página. Cada elemento tiene una sola función, y el acento naranja apagado #F0DAC8 se gasta solo en el elemento que debes pulsar. Quien busca agencia recibe la oferta antes que las opciones.
Por qué esta composición funciona para agencia
Supón que tu material grita más que tu texto. Es el caso para el que está construida esta composición. El medio es una imagen fija en 1280x956. El marco se queda callado y secciones de 100vh y pasos de espaciado de 14px mantienen a quien lee sobre el texto. Da a quien lee páginas de agencia el camino más corto y honesto hasta la oferta.
Hacer tuyo este tipo de landing page
La composición es la parte reutilizable; el tema es tuyo. Cambia el titular, mantén la escala tipográfica (una escala tipográfica fluida) y vuelve a probar el acento #F0DAC8 sobre tu propio material. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue. El tema es la parte que debería cambiar.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Northstar?
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 1280x956. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Northstar depende de vanilla JS?
No. El brief es una especificación, no una lista de dependencias. Se escribió para vanilla JS, pero la misma composición se puede recrear en lo que ya uses. El stack se nombra para que sepas cómo se hizo la referencia.
¿Puedo publicar una página reconstruida a partir de Northstar sin acreditar nada?
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 1280x956.
