Diversos usos de las Hero Images en diseño web

Hero Image es un término que se emplea en el campo del diseño web para referirse a un banner de gran tamaño que se coloca de manera visible en una página web, a menudo en la página de inicio donde ocupa gran parte del layout.

Existen muchas variaciones de estas fotografías y no necesariamente siempre son imágenes estáticas. También es común agregar texto a estas imágenes para que generen un mayor impacto. Aunque actualmente el uso de las hero images es bastante común en muchos sitios web, tal vez estés dudando sobre su uso. En este artículo te indicamos los diversos usos que se les puede dar a las hero images.

Cabeceras llamativas

Se considera el uso de “hero images” en las cabeceras cuando éstas son de un tamaño mayor que el normal. Actualmente, uno de los mayores usos de las “hero images” es en las cabeceras, donde definitivamente son un elemento que capta la atención. Además, pueden darle a tu página ese toque de personalidad que necesitan. Si cada sección tiene una cabecera distinta, aunque siguiendo una misma línea gráfica romperás un poco la monotonía de tu sitio, sin mencionar que las secciones serán más fácilmente distinguidas.

No es necesario utilizar fotografías, muchos diseñadores han decidido utilizar emplear ilustraciones e incluso videos en las cabeceras de su sitio web. Sin embargo, en muchas ocasiones la fotografía suele ser más descriptiva y permite conectarte con tu audiencia de manera inmediata. Si tienes una fotografía con una buena composición, un buen manejo de la luz y, por sobre todo, una historia que contar no dudes en usarla en tu sitio. Seguramente captará la atención de tus visitantes.

Diseño de una sola página

Las imágenes que ocupan todo el ancho de pantalla suelen ser un elemento común en los diseños de una sola página. A menudo se combina con el efecto de parallax scrolling y se emplean diversos colores o fondos según la sección en la que el usuario se encuentre.

¿Por qué una imagen que ocupe toda la pantalla es más efectiva en estos casos? Simple, porque ayuda a romper con la monotonía de tu sitio. En los sitios de una sola página se suele intercalar imágenes y texto, de modo que las imágenes ofrecen cierto “descanso visual”. Ayuda a romper con la uniformidad de tu sitio, pero no sólo eso, sino que también pueden ayudar a reforzar el punto que has explicado mediante texto. Si añades efectos como parallax scrolling en la ecuación, tienes todos los ingredientes para contar una historia y conectar con tu audiencia.

Fondos de pantalla completa

Si se trata de impresionar y captar la atención de tu audiencia, nada como un fondo de pantalla completa. Si añadimos una tipografía legible y una frase que llame la atención, tenemos como resultado una muy buena página de destino.

Es una técnica común incluir fotografías de gran tamaño en el diseño de un sitio web. La razón de que se haya hecho muy popular es que es una excelente manera de dar la bienvenida al usuario. Una fotografía que vaya acorde al concepto del sitio o que cuente una historia es mucho más efectiva que una elaborada explicación. Es por ello que lo vemos en diversidad de sitios, particularmente en portafolios personales y agencias de diseño, donde se incluyen fotografías de los proyectos que han desarrollado, de ese modo tus clientes conocen la extensión de tus habilidades ni bien ingresan en el sitio web.

Pero usar fondos de pantalla completa no sólo es útil es portafolios, sino también en sitios enfocados en la moda, donde definitivamente tienen muchas fotografías de gran calidad para mostrar. Los fondos de pantalla completa son realmente efectivos en cualquier tipo de sitio si sabes elegir sabiamente tus imágenes, así como seleccionar tu tipografía y colocarla apropiadamente de modo que no oculte ninguna parte importante de tus fotografías.

Contenido destacado en la página principal

Esta es una característica propia de blogs y revistas online. Este tipo de sitios contiene ciertas particularidades en su layout como por ejemplo emplear una cuadrícula y varias columnas para poder distribuir mejor el gran contenido que suelen albergar estos sitios. Entonces, en la página de inicio de un blog o revista online es poco común encontrar fondos de pantalla completa, pero lo que sí encontramos es un slider o una imagen estática que nos muestra el contenido destacado, ya sea por qué es uno de los artículos más compartido o pertenece a la última edición, siempre encontramos al menos un artículo como destacado.

Aunque no es una técnica común, puedes usar “Hero Images” para el contenido destacado de tu revista. La lógica detrás de esto es bastante simple, ¿qué llama más la atención que una gran imagen acompañada de una tipografía de bastones gruesos? Definitivamente, puede ser mucho más efectivo usar “Hero Images” para destacar ciertas noticias pues debido al gran tamaño de las fotos ya estás llamando la atención y haciendo énfasis en la importancia del contenido.

Sliders y galerías de imágenes

Incluir sliders no es una práctica nueva o propia de un solo sitio web, de hecho muchos sitios aprovechan los sliders de imágenes y los emplean en toda la pantalla o en gran parte de ella. Esta técnica es bastante común en portafolios online, aunque los sliders también suelen usarse en revistas y tiendas online. Básicamente cualquier página puede hacer uso de los sliders, lo único que necesitas son varias imágenes igual de cautivantes para incluir en el slider.

El slider usualmente cambia de imagen al pasar cierto tiempo, pero puedes incluir flechas laterales para que los usuarios puedan pasar de imagen. También es común emplear círculos o números como elementos de navegación donde cada imagen corresponde a un círculo.