Sobre esta plantilla
Transform Data conserva el rastro de sus decisiones: el brief que hay detrás de sección hero ocupa 3.605 caracteres. Abre con “Transform Data Quickly” y le da el marco a esa línea en lugar de encogerla en una tarjeta. La paleta se queda en gris #505050 de base y blanco #F8F8F8 para la tipografía, y el tipo es Inter. Se entrega como un único componente, y la captura se fija a 800x592 antes de escribir código. El presupuesto de movimiento se agota en transiciones de 250ms. Tenlo abierto mientras escribes: el brief de 3.605 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos que construyen su sección hero de un producto de IA o SaaS y necesitan dejar constancia de un único componente antes de que salga un presupuesto.
- La página sirve a desarrolladores front-end que rehacen su sección hero de un producto de IA o SaaS en un único componente y buscan los números que hay detrás del aspecto.
- Pensado para responsables de contenidos que reescriben un diseño de sección hero cuyo titular tiene que seguir siendo tan largo como el de Transform Data.
Qué incluye
- La barra sigue la cuadrícula. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Inter, para que la barra pertenezca a la página de abajo y no a un sistema aparte. Nada de la barra se anima al hacer scroll; está presente desde el primer fotograma y después se queda al margen. Mantén la fila en una sola línea.
- Medido contra el viewport. El brief declara sus tamaños en la captura (pasos de espaciado de 16px y transiciones de 250ms), así que un remontaje se puede verificar en lugar de aproximar. Las proporciones del marco se registran junto a los tamaños, así un remontaje también acierta con el formato. Verifica un remontaje contra los mismos números.
- La composición es el contenido. Todo lo que está por encima del pliegue se gana su sitio. El brief nombra el texto, el marco de 800x592 y los tamaños de tipo, y no deja nada decorativo compitiendo con ellos. La página es una sola composición a 800x592, y por eso se sostiene cuando cambia el texto. El brief es la especificación.
- Fila superior: marca, enlaces y acción. No des a la marca más espacio que el que pide su tipografía. La captura de la referencia es de 800x592.
Movimiento e interacción
El tiempo va en el brief
El movimiento de los controles es corto y repetible: 250ms en cada cambio de estado. La misma duración se reutiliza en todos los controles, lo que mantiene las interacciones como un solo sistema. Pasa las duraciones a tu implementación.
Estático a propósito
El brief deja fuera la animación y deja que la maquetación de 800x592 sostenga la página, con el hover y la pulsación como únicos cambios. El brief no incluye ninguna librería de animación, lo que mantiene pequeña la reconstrucción.
El reflujo de sección hero
Cuando el texto es largo, la maquetación estrecha es la primera que rompe. Aquí un clamp entre 24px y 16px absorbe el cambio, y la escala es fluida en lugar de escalonada. Los dos estados están descritos en el mismo brief.
Qué gana un producto de IA o SaaS aquí
Una pantalla significa una decisión para quien lee, y ese es el coste de esta maquetación: todo lo demás baja por debajo de la primera pantalla. El brief enuncia pasos de espaciado de 16px y transiciones de 250ms para que las secciones de abajo mantengan el mismo ritmo. Transform Data enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Las cifras detrás de sección hero
El brief es una especificación, no un moodboard. Fija pasos de espaciado de 16px y transiciones de 250ms y concreta el medio en 800x592. Ese nivel de detalle es lo que hace que el diseño sobreviva a una reconstrucción: cambia el texto y las relaciones se mantienen. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿Necesito un único componente para recrear Transform Data?
Transform Data se construyó en un único componente, 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é me llevo cuando copio el brief de Transform Data?
El brief capturado ocupa 3.605 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 quedarme con las transiciones de Transform Data y cambiar los tiempos?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 250ms. Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
