WEB DESIGNVariantes de Hero
WEB DESIGN SYSTEM

Variantes de
Hero

Biblioteca visual de estructuras para la sección principal de sitios web. Cada variante puede adaptarse a la identidad, contenido y objetivo de cada proyecto.12 VARIANTES · RESPONSIVAS

01Split ProductProducto + contenido

Todo lo que
tu empresa necesita.

Una estructura equilibrada para presentar un producto o servicio principal.

Conoce más →
Ideal para productos, servicios y tecnología.
02EditorialFotografía inmersiva

Haz que tu
marca destaque.

La fotografía se convierte en el escenario del mensaje.

Descubrir →
Ideal para marcas, lifestyle, restaurantes y proyectos visuales.
03TypographyTipografía protagonista
BRAND

Tu marca,
tu lenguaje.

Explorar →
Ideal para branding, moda, agencias y marcas creativas.
04MosaicPortafolio visual

Ideas que
se hacen visibles.

Cuatro imágenes construyen una primera impresión dinámica.

Ver proyectos →
Ideal para portafolios, estudios, arquitectura y comunicación visual.
05VideoMovimiento + impacto

Muéstralo
en movimiento.

El producto, proceso o experiencia se convierte en el fondo del Hero.

Descubrir →
Ideal cuando el movimiento aporta valor a la historia.
06MinimalEspacio + mensaje

Menos ruido.
Más marca.

Una composición limpia donde el mensaje tiene todo el protagonismo.

Conocer proyecto →
Ideal para marcas premium, arquitectura, consultoría y tecnología.
07Product ShowcaseProducto protagonista

Diseñado para
hacer más.

El producto ocupa el centro visual mientras el contenido acompaña.

Ver producto →
Ideal para productos físicos, tecnología y lanzamientos.
08Before / AfterTransformación
ANTES
DESPUÉS

De una idea
a un resultado.

Ver transformación →
Ideal para remodelación, diseño, branding, rotulación y servicios.
09Services GridServicios destacados

Soluciones para
cada proyecto.

El Hero introduce varios servicios sin abandonar el mensaje principal.

01Diseño
02Producción
03Instalación
04Estrategia
Ideal para empresas con varias líneas de servicio.
10Asymmetric EditorialComposición dinámica

Rompe la
simetría.

Una composición editorial con diferentes escalas y pesos visuales.

Explorar →
Ideal para marcas creativas, cultura, diseño y editorial.
11Floating CardImagen + información

Una imagen
vale más.

La información aparece como una pieza independiente sobre la fotografía.

Ver proyecto →
Ideal para casos de éxito, hoteles, inmobiliarias y portfolios.
12CollageExperimental / creativo

Piensa
diferente.

Capas, fotografías y tipografía para una composición expresiva.

Descubrir →