Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Cómo encontrar la imagen «hero» perfecta  para tu sitio web

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Un sitio web exitoso está formado por muchos componentes, pero quizá ninguno más importante que aquel que brinda una primera buena impresión. Por ejemplo, sin duda deseas que tu sitio web tenga un área de pie de página limpia y útil, pero ¿de qué sirve si nadie se molesta en desplazarse hacia abajo?

Por esta razón, los diseñadores a menudo ponen bastante atención y energía en el «área hero» (también conocida como «sección hero»). Este es el espacio principal en la parte superior de la página, que frecuentemente contiene mensajes clave o llamadas a la acción. Es una de las primeras cosas que los visitantes encontrarán y, por lo tanto, establece el escenario para todo lo que sigue.

¿Por qué se conoce como «sección hero»?

Probablemente el término tiene su origen en el teatro y el cine, donde la «utilería héroe» (a veces llamada simplemente el «héroe») como una lámpara o una botella de vino, por ejemplo, desempeñaría un papel fundamental. La conexión es bastante clara:

«La utilería “héroe” son las piezas más detalladas destinadas a ser inspeccionadas de cerca por la cámara o el público». –

Wikipedia
httpsparavelinccom
paravelinc.com utiliza su sección hero para atraer visitantes

Una manera de aprovechar al máximo esta área es usar una  imagen hero de fondo atractiva. La imagen adecuada puede captar la atención del usuario y transmitir un mensaje claro incluso antes de que haya leído una sola palabra del texto. La imagen hero ilustrada de Paravel (ver arriba) hace exactamente eso; mostrar la personalidad y demostrar el estilo, mientras permite que el texto y la información pertinente se coloquen en la parte superior.

Teniendo esto en cuenta, exploremos lo que hace que una imagen de fondo hero sea buena y los distintos enfoques que podrías adoptar. Durante el proceso, te mostraremos algunas estupendas imágenes disponibles con tu suscripción a Envato Elements. Su creciente biblioteca de recursos de diseño incluye más de 4,000 imágenes de fondo y texturas para mejorar tus proyectos.

1. Mantén el contenido en primer plano

Ante todo, una imagen de fondo hero debe permitir a los usuarios leer fácilmente el contenido que se coloca encima. Este es un equilibrio delicado, ya que requieres algo que se vea llamativo y que a la vez conserve la legibilidad del texto.

Una manera sencilla de lograrlo es usando fondos con efecto bokeh (efecto desenfocado). City Lights | Bokeh Backgrounds | Vol. 01 (Luces de la ciudad | Fondos de Bokeh | Vol. 01) ofrece doce imágenes urbanas distintas que están difuminadas a la perfección. Cada imagen ofrece un aspecto único e interesante, mientras se mantiene la atención en tu contenido.

City Lights Bokeh Backgrounds Vol 01
Luces de la ciudad | Fondos de Bokeh | Vol. 01

2. Preséntate

Mientras que utilizar una imagen de fondo solo por su aspecto elegante está muy bien, encontrar una que sea relevante para la misión de tu sitio es aún mejor. Es una oportunidad para presentar a los visitantes lo que haces. No obstante, tienes cierta flexibilidad en cuanto a la manera de abordar las cosas. Puedes implementar algo genérico (imágenes de alta tecnología, por ejemplo) o muy específico (como una foto del edificio de tu oficina).

Ahí es donde un paquete de nicho como Foodie puede resultar útil. Incluye más de 65 imágenes de alta resolución de alimentos y bebidas que se adaptarían perfectamente a un restaurante o a una empresa de servicio de alimentos. Funcionan perfectamente como una imagen hero y te ayudarán a causar una impresión inmediata en los usuarios, que se conectarán más fácilmente con tu contenido.

Foodie
Foodie

3. Crea el estado de ánimo apropiado

Si buscas crear una cierta atmósfera en tu sitio web, una imagen más intrincada puede ser justo lo que necesitas para que tu sección hero sobresalga. Las imágenes vectoriales altamente conceptuales son a menudo una excelente opción en esta situación. Brindan un atractivo visual a los usuarios y suelen funcionar mejor con cantidades mínimas de texto grande.

50 Abstract Grid Backgrounds (50 fondos de cuadrículas abstractas) es un gran ejemplo de esta técnica. Estos paisajes en 3D se ven increíbles y podrían ser usados para mejorar una aplicación basada en geografía o incluso un sitio web que ofrezca estadísticas complejas. Seguramente llamarán la atención y establecerán el tono de lo que viene.

50 Abstract Grid Backgrounds
50 fondos de cuadrículas abstractas

4. Mostrar productos y servicios

Los sitios web que venden productos o servicios pueden utilizar el área hero con un gran efecto. Es parecido a visitar la sala de exposición de un concesionario de automóviles, donde los artículos costosos están al frente y en el centro. En este caso, busca una imagen de fondo simple que te ayude a poner las cosas importantes bajo una luz más positiva.

Utilizando una de las seis opciones disponibles en Abstract Spotlight Backgrounds (Fondos de Foco Abstracto) te asegurarás de que tus productos sean la estrella del espectáculo. Su ingenioso uso del sombreado ayuda a establecer el punto focal, donde la imagen de tu producto o tu mensaje pueden brillar.

Abstract Spotlight Backgrounds
Fondos de Foco Abstracto

5. Añade algo de personalidad

A veces solamente deseas añadir un poco de color y alegría a tu sección hero. Por ejemplo, una tienda minorista local o un blog personal con frecuencia puede beneficiarse al mostrar alguna personalidad única. Utiliza las ilustraciones para crear un estado de ánimo no demasiado serio y, al mismo tiempo, añadiendo algunos paisajes interesantes.

Existe una cantidad de buenas opciones para adaptarse a casi cualquier tema y tipo de personalidad. Ya sea que quieras añadir un horizonte de la ciudad (city skyline), un paisaje de verano (summer landscape) o algo de diversión en la granja (fun on the farm), en consecuencia, la ilustración adecuada puede decorar tu área hero.

Summer Landscape
Paisaje de verano

Tomando la decisión correcta

La sección hero de tu sitio web es vital para causar una primera buena impresión. Por consiguiente, vale la pena pensar en cada detalle, incluyendo el fondo. Pero puede ser difícil decidir qué dirección tomar.

A fin de cuentas, se trata de conocer tanto la misión de tu sitio web como tu audiencia deseada. Piensa en lo que quieres lograr dentro de este espacio y elige una imagen que lo complemente.

Si, por ejemplo, planeas incluir un buen fragmento de texto, busca un fondo que no distraiga de la lectura. Para los sitios con un enfoque más minimalista, una imagen compleja que resalte podría ser una buena elección.

Independientemente de tu elección, ten en cuenta que el enfoque correcto es vital para lograr el interés del usuario y animarlo a explorar el resto de tu sitio.

Sigue leyendo...

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.