Sobre esta plantilla
Digital Experiences es una referencia de trabajo para una agencia o un estudio: el desglose de landing page, con la maquetación medida y lista para recrear. El titular de la propia página dice “Crafted Digital Experiences Built to Outlast Trends”, y la composición se construye alrededor de esas palabras exactas. La paleta es negro #0D0D0C de base, con la tipografía Instrument Serif. Se entrega como React y Tailwind CSS, y la captura se fija a 640x458 antes de escribir código. El movimiento se queda en transiciones de 500ms. Sirve de referencia cuando construyas este tipo de landing page para una agencia o un estudio y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Quien le pase el brief de landing page a un modelo usará el prompt de 8.994 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 Digital Experiences.
- Sustituye los textos del diseño de landing page antes de tocar Instrument Serif, porque los tamaños están ajustados a la longitud actual de las líneas.
Qué incluye
- Fila superior, una acción. La barra es una fila de texto y una acción, medida en pasos de espaciado de 10px y transiciones de 500ms, así que se lee como franja y no como banda. Las etiquetas son lo bastante cortas para caber en una línea en cualquier ancho que cubra el brief.
- Una tipografía, usada con disciplina. La tipografía es Instrument Serif, y el brief asigna un papel a la fuente en lugar de mezclar por variedad. El peso, el interletraje y los pasos de tamaño están especificados, así que la jerarquía sobrevive a una sustitución. El interletraje se fija por tamaño, así la línea display y el pie de foto no comparten un mismo valor. No añadas un tamaño sin función.
- Cifras donde va la prueba. Una franja compacta de cifras sostiene las afirmaciones que de otro modo pedirían un párrafo, lo que evita que la composición de landing page se convierta en una lista de funciones. Las etiquetas van bajo las cifras, en el paso más pequeño del brief, así la fila se lee como dato y no como adorno. Si una cifra necesita un párrafo, no es una estadística.
- 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 640x458 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 640x458, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
Cambios de estado medidos
El presupuesto de animación es pequeño y explícito: 500ms, aplicado a cambios de estado y no a entradas. Los tiempos cortos son la razón de que la página se lea como diseñada; un valor por defecto lento desharía la composición.
Movimiento que no estorba
Aquí no hay librería de scroll: la composición de 640x458 se queda quieta y solo se mueven los elementos que responden a ti. El movimiento se trata como respuesta y no como adorno. No hacen falta líneas de tiempo de scroll.
El orden detrás de landing page
Este tipo de landing page tiene un recorrido de lectura declarado. La navegación presenta el producto y le da al visitante que vuelve una forma de moverse que ya reconoce. A partir de ahí la mirada recorre navegación, el titular, la insignia de anuncio, la fila de cifras y la fila de clientes en secuencia, y eso es lo que impide que una sola pantalla se lea como una lista. Quien busca agencia recibe la oferta antes que las opciones.
Las cifras detrás de landing page
La mayoría de las referencias muestra el resultado y se guarda las cifras. Esta lo invierte: publica pasos de espaciado de 10px y transiciones de 500ms junto a la página, para que el resultado se pueda reproducir y no aproximar. Nada de este tipo de landing page depende de un valor por defecto.
El argumento de landing page
Cuando haces el brief de landing page para un proyecto de agencia, lo difícil es decidir qué se niega a decir la primera pantalla. Digital Experiences lo responde de antemano: una línea de display y navegación, el titular, la insignia de anuncio, la fila de cifras y la fila de clientes detrás. Digital Experiences enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Digital Experiences?
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 640x458. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Digital Experiences depende de React y Tailwind CSS?
Digital Experiences 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.
¿Puedo usar Digital Experiences en un proyecto de cliente?
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 640x458.
