Sobre esta plantilla
Aquí no hay una captura sino un caso de landing page de Neo Museum, con el brief original al lado. “Step into the natural world and discover the stories written millions of years ago” es la línea que la maquetación está pensada para sostener. La paleta se queda en blanco #FCFCFC de base y negro #0A0A0A para la tipografía, y el tipo es Inter. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. El movimiento se limita a transiciones de 2800ms y cubic-bezier(0.16,1,0.3,1), lo bastante discreto para que el texto siga mandando. Es la referencia adecuada para este tipo de landing page en una marca de educación o comunidad, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Los responsables de producto que tengan que presupuestar la implementación leerán un marco de 640x468 como el alcance real del trabajo.
- Si hay que renunciar al movimiento, el diseño de landing page sigue leyéndose porque tipografía de 12px a 15px y secciones de 75vh se encargan de la jerarquía.
- Pensado para un fundador en solitario que saca un único diseño de landing page para una marca de educación o comunidad y no tiene ningún sistema de diseño detrás.
Qué incluye
- La barra sigue la cuadrícula. Una barra fina ocupa la parte superior de landing page, con la marca a la izquierda y los enlaces compuestos en Inter, de modo que la composición se lee antes como contenido que como interfaz. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Nada de la barra se anima al hacer scroll; está presente desde el primer fotograma y después se queda al margen.
- El brief nombra los pasos. La lista se mantiene corta (tipografía de 12px a 15px, secciones de 75vh, pasos de espaciado de 10px y transiciones de 2800ms), y por eso todo el sistema se puede comprobar a mano. El brief declara valores y no proporciones, así la composición conserva sus relaciones cuando el texto cambia de longitud.
- Un pie de página que sostiene la marca. Los enlaces se agrupan en columnas y la marca ocupa su propio bloque, lo que mantiene legible un pie de página largo en lugar de convertirlo en una lista. El acento se reutiliza en una sola acción del pie de página y no en toda la banda. La captura de la referencia es de 640x468.
- Los enlaces colapsan a un ancho. La barra es una fila de texto y una acción, medida en tipografía de 12px a 15px y secciones de 75vh, así que se lee como franja y no como banda.
Movimiento e interacción
Duraciones del brief
Los cambios de estado están fijados en 2800ms, así que la respuesta de los controles es un valor de diseño y no el que trae el navegador por defecto. Si cambia el easing, la duración tiene que revisarse con él.
Cifras que se cuentan solas
Las cifras cuentan hacia arriba al entrar en el viewport, compuestas en Inter al tamaño de display. La animación se ejecuta una vez y se detiene, así que las cifras se asientan en lugar de parpadear.
El reflujo de landing page
Donde una plantilla se pliega a una sola columna y confía en la suerte, este brief dice qué pasa (la sección se mantiene a 75vh y la navegación se pliega en un menú móvil) y mantiene el orden intacto. La escala cambia con el viewport; la secuencia, no.
El argumento de landing page
La contención te cuesta espacio para pruebas por encima de la primera pantalla. Este brief acepta ese coste y gasta la primera pantalla en la oferta, con las cifras ya fijadas (tipografía de 12px a 15px y secciones de 75vh) para poder añadir abajo una sección de prueba sin rehacer nada. Da a quien lee páginas de educación el camino más corto y honesto hasta la oferta.
Cómo ordena Neo Museum la primera lectura
Si tu página abre hoy con funciones, este es el orden que hay que copiar: navegación, el titular, la insignia de anuncio, la fila de cifras y el clip de fondo delante, el detalle de apoyo después y tipografía de 12px a 15px y secciones de 75vh marcando la distancia. Quien busca educación recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Neo Museum?
El brief capturado ocupa 15.036 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.
¿Qué puedo hacer con el brief de Neo Museum una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 15.036 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Puedo reconstruir este diseño de landing page de Neo Museum con otro stack?
Neo Museum 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.
