Sobre esta plantilla
Modern Agency es un caso de landing page de agencia: nace de un único brief escrito y esta página lo documenta. El titular dice “We craft digital experiences for brands ready to dominate their category online”, y el orden de landing page gira alrededor de esa línea. Toda la página se construye sobre blanco #FFFFFF de base y naranja brillante #F26522 para los acentos. Se entrega como React y Tailwind CSS, y la captura se fija a 364x640 antes de escribir código. Todo el movimiento cabe en cubic-bezier(0.25,0.1,0.25,1). Parte del brief capturado y ajusta la composición de landing page en lugar de empezar de cero.
Pensado para
- Pensado para un fundador en solitario que saca un único diseño de landing page para una agencia o un estudio y no tiene ningún sistema de diseño detrás.
- Quien le pase el brief de landing page a un modelo usará el prompt de 10.347 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 Modern Agency.
Qué incluye
- Enlaces antes de la acción. Marca, enlaces y la acción #F26522 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 #F26522 es el único elemento de la barra con peso. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra.
- El brief nombra los pasos. La lista se mantiene corta (pasos de espaciado de 13px y easing cubic-bezier(0.25,0.1,0.25,1)), y por eso todo el sistema se puede comprobar a mano. Un remontaje que da esos números se parece a la referencia sin más ajustes.
- Primero el texto, después el adorno. La composición de landing page está construida para que el texto llegue antes que nada: el tipo lleva la jerarquía, el marco de 364x640 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 364x640, y por eso se sostiene cuando cambia el texto.
- Los enlaces colapsan a un ancho. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #F26522, dimensionada para no destacar frente al resto de la página. Una superposición móvil toma el relevo por debajo del breakpoint de tableta.
Movimiento e interacción
Duraciones cortas y nombradas
El movimiento de los controles es corto y repetible: 0 en cada cambio de estado. Los estados de foco usan el mismo tiempo que el hover, así que la respuesta de teclado y de puntero coincide. No publiques el valor por defecto del navegador.
Una escena en vivo en la primera pantalla
Un lienzo WebGL hace el trabajo visual en el marco de 364x640, con la tipografía encima o al lado. La escena responde al viewport en lugar de quedarse detrás como una imagen.
Hacer tuyo este tipo de landing page
Casi todo el mundo empieza por el color de acento. Empieza tú por la promesa: reescribe la línea de display y vuelve a probar naranja brillante #F26522 contra tu propio material. Reescribe la línea de display antes de tocar el color.
El orden detrás de landing page
Una maquetación centrada en funciones enumera lo que hace el producto; esta lleva a quien lee hacia una única decisión. El recorrido se ve en navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas y en cómo pasos de espaciado de 13px y easing cubic-bezier(0.25,0.1,0.25,1) marcan las distancias. Quien busca agencia recibe la oferta antes que las opciones.
Las cifras detrás de landing page
Comprometerse con pasos de espaciado de 13px y easing cubic-bezier(0.25,0.1,0.25,1) cambia flexibilidad por repetibilidad. Ese es el sentido de la referencia: la misma página en otra marca, sin un nuevo juego de suposiciones. Nada de este tipo de landing page depende de un valor por defecto.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Modern Agency?
El brief capturado ocupa 10.347 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 Modern Agency con otro stack?
Modern Agency 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 Modern Agency?
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 364x640.
