Cómo crear una hero image eficaz

‍Una hero image es, esencialmente, una imagen de banner grande, que a menudo se usa junto con gráficos superpuestos, para funcionar como una experiencia introductoria y un generador de ambiente para el sitio.

‍“Hero image” es en cierto modo un término paraguas para combinaciones de patrón de fondo, imagen, video o animación con tintes o efectos de desenfoque. Mientras lo visual define el ambiente y guía la mirada, la información relevante y los elementos accionables se colocan en el área circundante. Más que un simple ejercicio gráfico, una hero image es una excelente forma de iniciar tu sitio web, explorar tu creatividad a través de ella, con el objetivo final de causar una impresión impactante y duradera.

‍La elección de la imagen depende claramente del contexto. Por ejemplo, un sitio web sobre ejercicio y entrenamiento intenso se centraría en la postura del cuerpo, el movimiento y la tensión del momento. Un blog personal melancólico se enfocaría en colores y detalles que construyen el ambiente, como un cigarrillo consumiéndose en las manos sucias y encallecidas de un solitario distraído. 

‍Las palabras usadas son las mismas para ilustrar mejor la diferencia en la estimulación emocional del espectador. Del mismo modo que con la imagen, el tipo de fuente y el contraste de color contribuyen al efecto deseado. A partir de aquí, las imágenes divergirían aún más.

‍Añadamos algunos efectos de superposición. El efecto más usado es un tinte de color sobre la imagen, pero detrás de cualquier texto:

‍Podemos ver de inmediato que las imágenes adquieren una cualidad sobrenatural. Ya no hablan de una situación realista, sino de una idealización de sus conceptos originales.

‍Aunque interesantes, sin embargo, hay algo que no funciona en el diseño. Como ambas imágenes perdieron su realismo así como su claridad visual (principalmente debido a sombras y colores fuertes y sombríos), el hecho de que sean el centro de atención del espectador provoca una incomodidad visual.

‍Aunque lejos de estar completo, el resultado visual mejora mucho. Nuestros ojos ya se dirigen de forma natural a los títulos y al encabezado. Por supuesto, no habría una hero image sin al menos un encabezado, pero es importante darse cuenta de cómo cada componente es un bloque de construcción que da lugar a posibilidades, y cómo cada nivel al introducir nuevos elementos redefine el terreno de juego. 

‍Otro efecto popular para las hero images es el desenfoque:

‍Aquí puedes notar de inmediato un gran problema. Los modelos en la imagen miran directamente al espectador, pero debido al desenfoque ese efecto emocional intenso ahora va de lo incómodo a lo cómico, lo que hace que el efecto sea inapropiado para esta imagen.

‍Si dejáramos de lado este problema, sin embargo, podemos notar varias ventajas. La imagen ya tenía la mayor parte de las zonas cubierta por colores muy oscuros, lo que hacía que letras blancas en negrita fueran una opción obvia. Sin embargo, algunas partes, como la palabra Diary sobre el codo de la mujer y la N de tension encontrándose con las rayas blancas de la camisa del hombre, aunque no reducían la claridad del texto, se sentían extrañas. Todo el texto está centrado en el encuadre, así que moverlo no es una opción deseable. Gracias al desenfoque, esto ya no es así.

‍Para cerrar el capítulo, recuerda que la hero image es la primera impresión de tu página: merece mucha atención y tiempo por tu parte. Sé espontáneo y experimenta mucho para descubrir todo tipo de ideas creativas.

‍Aquí tienes una prueba rápida con una superposición en degradado.

‍