Sobre esta plantilla
Aquí no hay una captura sino un caso de sección de funciones de Vela Ul, con el brief original al lado. La paleta se queda en #16120C de base y #F7F5F2 para la tipografía, y el tipo es Arial, Helvetica. Se entrega como un único archivo HTML autocontenido, así que el conjunto de sección de funciones se puede trasladar a un proyecto sin traspaso de diseño. Todo el movimiento cabe en transiciones de 720ms, cubic-bezier(.22,1.36,1) y un vídeo en bucle de fondo. Sirve de referencia cuando construyas este tipo de sección de funciones para un producto de IA o SaaS y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Pasa un único archivo HTML autocontenido al desarrollador con el recorte de 1920x1418 adjunto y deja que lo reconstruya.
- Este diseño de sección de funciones va dirigido a equipos que ya conocen un único archivo HTML autocontenido y solo necesitan dejar un único archivo HTML autocontenido por escrito.
- Pensado para agencias que presentan propuestas de SaaS y necesitan incluir un breakpoint de 410px en la primera respuesta al cliente.
Qué incluye
- Enlaces antes de la acción. Una barra fina ocupa la parte superior de sección de funciones, con la marca a la izquierda y los enlaces compuestos en Arial, Helvetica, de modo que la composición se lee antes como contenido que como interfaz. Por debajo de 410px los enlaces se pliegan en una superposición a pantalla completa. Las etiquetas son lo bastante cortas para caber en una línea a 410px, y el elemento activo se marca con peso y no con una píldora.
- Vídeo en la capa inferior. El fondo es un único bucle de 4,7s a 1920x1418, recortado para cubrir y sin teñir. Todo lo demás flota encima, en una capa superior. El bucle es lo bastante corto (4,7s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Fluido donde hace falta. El tamaño del tipo se resuelve con un clamp entre 14px y 20px y no con pasos fijos, así la línea display se mantiene proporcionada entre breakpoints en lugar de dar saltos. Los controles siguen siendo lo bastante grandes para pulsarlos y el texto conserva su orden de lectura en cualquier ancho.
- Una barra de navegación que no estorba. No des a la marca más espacio que el que pide su tipografía. La captura de la referencia es de 1920x1418.
Movimiento e interacción
Una duración para los controles
Cada cambio de estado de la especificación lleva una duración: las transiciones se resuelven en torno a 720ms con la curva cubic-bezier(.22,1.36,1). Nada queda en el valor por defecto del navegador, y por eso la página se siente diseñada y no animada. Un mismo valor se reutiliza en todos los controles, así que sus tiempos no se separan. Mantén las duraciones cuando rehagas la piel de la página.
Un bucle, no una secuencia
El movimiento ambiente es un clip de 4,7s en 1920x1418, en bucle discreto detrás del texto y sin reaccionar al puntero. Un fotograma de portada hace de suplente cuando la reproducción automática está bloqueada, así que el movimiento suma y no es obligatorio.
Qué cambiar primero en Vela Ul
Cambiar la paleta de entrada es el error habitual. Altera el tono sin tocar la composición, y la maquetación sigue apoyada en un tamaño de display fijo de 25px y secciones de 100vh; haz primero el texto y el material, y la paleta al final. La composición es la parte reutilizable, y sobrevive a una marca distinta.
Qué gana un producto de IA o SaaS aquí
La contrapartida es la densidad: este tipo de sección de funciones dice menos en la primera pantalla de lo que diría una maquetación centrada en funciones. Lo que conserva es el orden de lectura, y navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas hacen el trabajo que una página más larga repartiría. Vela Ul enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
El reflujo de sección de funciones
Prueba este tipo de sección de funciones a 1920x1418 y luego a ancho de móvil: el mismo orden aguanta, con la escala es fluida en lugar de escalonada, la maquetación cambia a 410px y la sección se mantiene a 100vh. La reproducción automática y el movimiento se tratan con honestidad, así que la página sigue comunicando cuando no están disponibles.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Vela Ul?
El brief capturado ocupa 25.889 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 sección de funciones de Vela Ul con otro stack?
Vela Ul se construyó en un único archivo HTML autocontenido, 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é puedo hacer con el brief de Vela Ul una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 25.889 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
