Sobre esta plantilla
Aquí no hay una captura sino un caso de sección hero de GlobalBank, con el brief original al lado. “Think Ahead. Move Fast. Exceed Expectations” es la línea que la maquetación está pensada para sostener. El esquema de color es blanco #FFFFFF de base, verde intenso #1A2E24 para la tipografía y verde #22C55E para los acentos, y la página está compuesta en Inter. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1468x1080 antes de escribir código. El movimiento se queda en transiciones de 4.1s y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 31.093 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Si la referencia solo es un punto de partida, los diseñadores pueden conservar un único archivo HTML autocontenido y rehacer el resto del diseño de sección hero.
- Si la maquetación parte de un único archivo HTML autocontenido, llévate primero tipografía de 14px a 46px y pasos de espaciado de 14px y no toques la paleta hasta que se asiente la cuadrícula.
- Equipos que rehacen su sección hero de SaaS a partir de la referencia de un competidor y quieren dejar claro un único archivo HTML autocontenido antes de que nadie se comprometa con un framework.
Qué incluye
- Una fila, sin desplegables. La fila gasta el contraste en un solo punto: la acción #22C55E, con la marca y los enlaces retenidos sobre el color del texto. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Los enlaces se componen a un tamaño menor que la marca, y la acción en #22C55E es el único elemento de la barra con peso. Mantén la fila en una sola línea.
- Los tamaños están en el brief, no en una escala. La maquetación se resuelve con valores fijos (tipografía de 14px a 46px, pasos de espaciado de 14px y transiciones de 4.1s), y eso es lo que mantiene compuesta la primera pantalla a cualquier ancho. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente.
- Un clip, no una ilustración. La primera pantalla es un único clip a 1468x1080, y todo lo demás se dispone encima. El bucle es lo bastante corto (4,9s) para que el ojo lo lea como textura y no como una línea de tiempo.
- La navegación es fina a propósito. No des a la marca más espacio que el que pide su tipografía. La captura de la referencia es de 1468x1080.
Movimiento e interacción
Tiempos cortos y parejos
El movimiento de los controles es corto y repetible: 4.1s en cada cambio de estado. El easing se especifica junto a la duración (4.1s), así que una reconstrucción no puede colar otra sensación sin avisar.
Movimiento ambiente sin librería de scroll
Un clip de 4,9s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco.
Cómo ordena GlobalBank la primera lectura
Donde una página de marketing apila pruebas por debajo y cruza los dedos, este tipo de sección hero pone navegación, el titular y el clip de fondo delante de quien lee y retiene el resto. Quien busca SaaS recibe la oferta antes que las opciones.
Leer GlobalBank como especificación
El brief es una especificación, no un moodboard. Fija tipografía de 14px a 46px, pasos de espaciado de 14px y transiciones de 4.1s y concreta el medio en 1468x1080 y un bucle de 4,9s. 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.
El argumento de sección hero
El diseño defiende su argumento en una sola pantalla. El medio es un bucle de 4,9s en 1468x1080. El material pone la atmósfera, el texto pone la oferta, y tipografía de 14px a 46px y pasos de espaciado de 14px mantienen ambas cosas separadas. GlobalBank enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Por qué la ficha nombra un único archivo HTML autocontenido?
GlobalBank 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é contiene en realidad el brief que hay detrás de GlobalBank?
El brief capturado ocupa 31.093 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.
¿Cómo se comportan las transiciones de 4.1s en GlobalBank?
Las transiciones van asociadas a estados de la interfaz y no a una línea de tiempo de scroll, y se resuelven en el rango de 4.1s. El brief anota los valores para que un port no tenga que adivinarlos.
