Las imágenes heroicas son lo que los creadores web utilizan a menudo para saludar a los visitantes de su sitio web en un formato atractivo.

Si alguna vez te has preguntado " ¿Qué es una imagen de héroe? ", Estás en el lugar correcto. En este artículo, veremos el tema y cómo puedes crear hermosas imágenes de héroes con poderosos efectos visuales.

Una imagen de héroe es el término utilizado por los creadores web para describir el contenido de gran tamaño en la parte superior de una página web.

El papel de una imagen de héroe es dar la bienvenida a su visitante tan pronto como se encuentre con su empresa o organización. La abundancia de tipos de imágenes destacadas en el kit de herramientas de creación web brinda muchas razones para incluir una imagen destacada en su sitio web.

Entendamos las principales ventajas de hacer esto y ¿por qué?

¿Qué es una imagen de héroe?

Adoptando la virtud de una "buena primera impresión", las imágenes de héroe suelen tener una o más de las siguientes características:

  • Una imagen de alta calidad
  • Un video cautivador
  • Un control deslizante de imagen o un carrusel multimedia
  • Ilustración animada o estática
  • Encabezados y descripciones al lado o delante del contenido visual

En términos de estilo, los detalles de diseño comunes que verá aplicados a las imágenes de héroes incluyen:

  • Imágenes de fondo o videos con superposiciones de fondo
  • Posicionamiento fijo o pegajoso
  • Apuntar afecta el cambio de transparencia o superposición
  • Elementos de contraste que diferencian la imagen del encabezado anterior o del contenido posterior

La novedad de las hero images en el diseño web es que por un lado estás trabajando con un espacio muy específico y definido en la página web. Por otro lado, las opciones de estilo, efectos y técnicas a utilizar al diseñar esta parte del contenido de su página son absolutamente infinitas.

¿Por qué debería usar una imagen de héroe?

Cuando el diseño y la funcionalidad de su imagen de héroe tienen un alto calibre, automáticamente logra la credibilidad y la confianza del usuario. Su imagen de héroe y el contenido de héroe que lo rodea a menudo representan su primera oportunidad de transmitir el punto de venta único de su organización y el principal punto de contacto del usuario para la conversión.

Cuando se busca desencadenar ciertos comportamientos de los usuarios, la mejor manera de comenzar es una imagen de héroe poderosa y de primer nivel que cause una fuerte primera impresión en sus visitantes.

Puede causar una primera impresión duradera

Las primeras impresiones son importantes en muchas áreas de la vida, pero especialmente cuando se trata de cómo los usuarios se relacionan con la estética del sitio web.

Los resultados de los expertos en interacción hombre-máquina (HCI) y visualización en Google Research dan fe de la influencia de las imágenes heroicas en el éxito de un sitio web:

Este estudio, " El papel de la complejidad visual y la prototípica en las primeras impresiones del sitio web : trabajar en la comprensión de los juicios estéticos ”, Estudia cómo la complejidad visual y la prototipicidad impactan el diseño de un sitio web y las primeras impresiones de sus usuarios.

Los autores mostraron 119 capturas de pantalla reales del sitio web a los participantes del estudio y encontraron que la complejidad visual y la prototípica afectan la percepción estética del usuario en las primeras 50 imágenes de la exhibición, y a veces incluso en 17 ms.

Como creadores web, nuestra conclusión es bastante simple: la imagen principal que elegimos y la forma en que la presentamos en nuestra página influye de manera importante en el sentimiento y el comportamiento del usuario.

Aprovecharás al máximo tu contenido en la mitad superior de la página.

diseño web sobre el pliegue
Tomado de: crazyegg.com

La sección "mitad superior de la página" de una página web se puede definir en términos simples: contenido que llena su pantalla / aparece sobre el borde inferior de la ventana del navegador web después de que se carga su página. Si el contenido requiere desplazamiento para ser visto, significa que está ubicado "debajo de la página".

El concepto de “arriba del pliegue” se originó en el diseño y la publicación impresos, mucho antes de la era de los medios digitales. Todos sabemos lo que es notar inmediatamente algo en la mitad superior de la primera página, e incluso es seguro decir que el contenido de la primera página es a menudo lo que nos hace decidir si comprar o no un periódico o simplemente dejar de en un quiosco.

Esta es exactamente la razón por la que su contenido en la mitad superior de la página puede ser un factor decisivo para el éxito de su sitio web.

¿A qué nos referimos?

Si un visitante del sitio web se confunde con su contenido y las imágenes en la mitad superior de la página, abandonará rápidamente su sitio web. Si su imagen de héroe y su entorno en la parte superior son claros, atractivos y bien representativos de su propuesta de valor, será más probable que se quede.

En última instancia, cuanto más invierta en la imagen y el contenido de su sección de héroe, es menos probable que los usuarios salgan rápidamente.

No te olvides del Responsive Design

Tenga en cuenta que la ubicación de una curva de la pantalla es subjetiva al tamaño de la pantalla del dispositivo. Esta es una consideración importante en el diseño receptivo, ya que el contenido de la mitad superior de la página debe personalizarse y configurarse de manera que sea aplicable a varios tamaños de dispositivos.

Los diseñadores y desarrolladores web suelen utilizar puntos de interrupción específicos del dispositivo para garantizar esta capacidad de respuesta. Esto le brinda un control total sobre la adaptabilidad del diseño de su sitio web a los tamaños de pantalla relevantes y evita la apariencia comprometida o el impacto de su imagen de héroe.

Exprese su propuesta de valor sin sobrecarga de información

cómo crear una imagen de héroe

Puede que esté familiarizado con el concepto de "sobrecarga de informaciónEn diseño de sitios web y la experiencia del usuario : Queremos evitar el uso de demasiado contenido, especialmente contenido escrito, al representar nuestra marca y nuestro valor comercial.

En este sentido, el uso de una imagen, ilustración o video vale mil palabras. El ajuste fino de las imágenes de marca efectivas capturará toda su historia en un medio visual. En lugar de verbalizar su historia y su propuesta de marca, es posible que pueda aliviar la carga cognitiva de su usuario de una manera simple y fácil de usar.

La captura de pantalla de arriba está tomada de Construcción Millbrook, una empresa de construcción con sede en Perth que se especializa en "construcción residencial con acabados de alta gama y atención al detalle". Para su sitio web Elementor, la imagen principal de la página de inicio hace un uso perfecto de su interfaz "por encima de la página". La llamativa y nítida fotografía de una feliz casa moderna y una piscina al aire libre genera vibraciones positivas y relajantes.

Yendo un paso más allá, las opciones de estilo de la imagen de fondo de altura completa y el tamaño de una 'manta' indican la habilidad robusta de la empresa para crear propiedades residenciales de lujo. La propuesta de valor es tan clara como el agua de una piscina y los usuarios absorben cómodamente toda la información necesaria.

Tus imágenes heroicas pueden ayudar a convertir clientes potenciales

cómo crear una imagen de héroe

Los puntos de contacto atractivos y visibles son un ingrediente básico para un flujo de usuarios de conversión-reproducción. Esta es la razón por la que la relación entre la llamada a la acción de la sección de héroes y su propia imagen de héroe puede hacer o deshacer los objetivos de creación de su sitio web.

Deja que tus mensajes de CTA digan " regístrese ahora "," MÁS INFORMACIÓN "," Contáctanos », Etc., su imagen de héroe debe coordinarse de forma transparente en todos los frentes: visibilidad, mensajes, combinación de colores, apariencia, etc.

Las conversaciones creíbles y efectivas con clientes potenciales se basan en una atmósfera cómoda y natural; Las imágenes visualmente agradables son la mejor manera de lograrlo.

Esto es exactamente lo que vemos en el sitio web de Elementor creado por Caricatura STL, un equipo de dibujantes que brindan servicios de entretenimiento para eventos. El título animado (texto del héroe) representa a los clientes felices en sus imágenes de héroe, mostrando lo que los artistas de dibujos animados brindan a cada persona.

Por lo tanto, una vez que se haya arremangado y haya comenzado a comprender los aspectos prácticos, ¿Qué implica el proceso de decidir qué tipo de imagen de héroe usar?

Exploremos los cuatro tipos diferentes de imágenes heroicas y cómo evaluar cuál será la mejor opción para su sitio web.

# 1 imagen de héroe del producto

cómo crear una imagen de héroe

Una imagen principal del producto es una imagen grande y alta definición del producto de la marca. Estas imágenes pueden presentarse en estático o en movimiento/en acción, siempre que permitan visualizar la propuesta de valor del producto.

Las formas populares entre los diseñadores web para mostrar y personalizar las imágenes de los héroes de sus productos pueden incluir:

  • Un ejemplo detallado / instantáneo de un producto individual, como vemos arriba en el sitio web de la empresa. suscripción australiana avo lover.
  • Captura de pantalla de una interfaz de producto digital, como un tablero.

Las imágenes de héroes de productos generalmente se encuentran en los sitios web dee-Commerce (pero no exclusivamente). Los compradores potenciales esperan ver ejemplos de productos reales, que respalden la toma de decisiones informadas sobre la idoneidad de la tienda para sus necesidades de compra.

Avo lover utilizó Elementor para crear su sitio web de comercio electrónico, que sus clientes utilizan para comprar suscripciones semanales de aguacates frescos entregados en la puerta de su casa.

La base de clientes de Avo lover es un nicho de mercado en un área de interés estrechamente definida, por lo que su elección de la imagen de héroe del producto tiene mucho sentido. Los suscriptores potenciales son entusiastas del aguacate; Ver una fotografía de cerca e intrincada de los productos es exactamente lo que buscan ver.

Mejores prácticas:

  • Invierta en la calidad de las imágenes de fondo

Ya sea que su imagen de fondo sea una fotografía, video, ilustración, etc., el archivo de imagen debe ser lo más claro posible, con una resolución nítida.

  • Presta atención a los niveles de contraste

Si agrega texto delante de la imagen de la sección principal (o componente de cualquier tipo), asegúrese de que el contraste entre los elementos del sitio web sea fuerte y se vea fácilmente. Aquí es donde las superposiciones de fondo y los efectos de filtro pueden resultar extremadamente útiles.

# 2 Imagen del héroe del cliente

El siguiente tipo de imagen de héroe utilizada por las empresas en línea adopta un enfoque alternativo para mostrar su valor agregado: mostrar al cliente que usa el producto. Esta perspectiva es una forma estratégica de empatizar con sus visitantes, demostrando sucintamente que comprende su punto de dolor y puede satisfacer sus necesidades.

El videoclip anterior está tomado del sitio Elementor creado por Alejandro Fischer, un entrenador personal basado en Stuggart que brinda una variedad de servicios relacionados con la salud y el estado físico.

La imagen de héroe del cliente de Alexander muestra más que un cliente satisfecho que disfruta de un estilo de vida saludable y en forma. La imagen del héroe va un paso más allá al presentar un video que muestra a su cliente vinculándose y conectándose con sus seres queridos.

Mejores prácticas:

  • Comparta sus casos de uso y la experiencia del cliente

Diferencie su producto mostrando su caso de uso más dominante. Una imagen que transmita los objetivos y el valor de su negocio muestra cómo el visitante se beneficiará de su oferta única.

  • Relacionarse con su público objetivo

Asegúrese de que se tenga en cuenta su público objetivo al seleccionar el tipo de persona que se incluirá en su imagen. Elija una imagen que comunique su comprensión del campo y su capacidad para deleitar a sus clientes.

# 3 Imagen del héroe fundador

cómo crear una imagen de héroe

Una imagen de héroe fundador es una imagen grande del fundador del propietario de la empresa, colocada en la sección de héroe para saludar al visitante del sitio web.

Las imágenes de héroes fundadores se utilizan a menudo en sitios web de portafolios para autónomos, propietarios de negocios como un psicólogo, maquillador o músico, como se muestra en la Sitio web de Elementor por Jasmine Cain arriba.

La mayor virtud de una imagen de héroe fundador es que pone rostro a un nombre; conecta al visitante del sitio web con el proveedor de servicios, creando una dinámica agradable entre los dos individuos.

La elección de imágenes para su imagen de héroe fundador debe manejarse con cuidado. Con muchas opciones para elegir, que se reduce a:

¿Qué transmitirá el mensaje de su marca de la manera más contundente posible?

¿Es esta una foto del fundador mirando directamente a la cámara y sonriendo, o tal vez mirando en una dirección diferente?

¿O sería más adecuada una foto sincera del empresario trabajador?

Mejores prácticas:

  • Preste atención al tamaño y las dimensiones.

Use una imagen (o video) clara y de buen tamaño que muestre a los visitantes los detalles exactos que necesitan ver. Si es necesario, puede enfocarse en áreas más grandes de sus imágenes recortándolas y eliminando el contenido menos importante.

  • Concéntrese en lo que debe transmitir su imagen

El papel del fondo debe ser enfocarse en la persona que está frente a él, no al revés. Las imágenes del héroe fundador más impactantes mostrarán al dueño de la empresa sonriente, lo que implica su pasión por mantener contentos a los clientes.

# 4 imagen de héroe no contextual

cómo crear una imagen de héroe

Las imágenes heroicas no contextuales son, como su nombre indica, secuencias que muestran algo aparentemente "no relacionado" con el propietario del producto o negocio. El propósito de una imagen de héroe no contextual es causar una impresión en el visitante a través de una asociación visual o un mensaje subliminal. Ver la imagen no contextual muestra al usuario cuál es el producto o la marca, pero de forma indirecta.

Esta técnica se utiliza, por ejemplo, en el ejemplo anterior del sitio web de Elementor creado por la empresa de marketing digital. Tecnología AP, con sede en Oklahoma. El sitio web de la empresa utiliza una imagen de fondo amplia y clara que muestra un ángulo único de los rascacielos de Oklahoma City.

Esta fotografía representa la propuesta de valor de la empresa, como se indica en el texto principal del sitio web: Construye tu negocio y míralo crecer, tan alto como las torres de oficinas más altas de la ciudad.

Tan pronto como el ojo humano ve las estructuras físicas que dominan el cielo, comprende que estos profesionales del marketing están trabajando para que los negocios despeguen a la altura.

Mejores prácticas:

  • Asegúrese de que los visitantes comprendan por qué la imagen es relevante

Si bien no muestra una imagen directa de su producto en sí, asegúrese de que conectar el valor de su producto con su imagen de héroe no contextual sea aún fácil de identificar. Los usuarios no deberían tener que perder tiempo pensando en su relevancia.

  • Establezca un vínculo claro entre la imagen del héroe y el texto del héroe

El texto de héroe que coloque junto con su imagen debe relacionarse directamente con su contenido visual. Es una necesidad, incluso si requiere varias iteraciones de su texto y la elección de la redacción.

  • Crea un esquema de diseño cohesivo

Los colores que elija para los textos y fondos de los botones, los encabezados o las descripciones deben coordinarse con la imagen principal o la obra de arte. Esto también se aplica a los acentos en los que se puede hacer clic en su sitio web:

los elementos del menú de navegación, el logo, etc ...

Todos sabemos lo importante que es un lenguaje visual coherente para el prestigio de nuestro sitio web, la presencia de marca y la credibilidad profesional. Aquí es donde las guías de estilo de diseño pueden ser realmente útiles, especialmente para asegurarse de que sus imágenes heroicas estén alineadas con el diseño de su sitio web.

Cómo probar tu imagen de héroe: los métodos que nos gustan

Una vez que comience a experimentar con varias opciones para su imagen principal, puede evaluar inmediatamente qué opción genera el mayor compromiso y obtener información sobre el diseño más efectivo y, en última instancia, seguir con esa.

Aquí hay algunos métodos de prueba imprescindibles que son fáciles de configurar y brindan una gran cantidad de conocimientos para asegurarse de que está utilizando la mejor imagen de héroe posible.

Prueba A / B tu imagen de héroe

Las pruebas A / B requieren que el diseñador cree dos o más opciones para la sección del héroe (ya sean dos versiones de los títulos y su copia, la imagen del héroe en sí, la sección de diseño, el tamaño de la fuente o cualquier otra cosa que se te ocurra) - depende completamente de ti.

Imagina que decides usar un modo de mezcla cuando los usuarios se desplazan sobre tu imagen principal, pero no sabes qué modo mejorará más la experiencia del usuario.

Realizar un Prueba A / B entre dos opciones de modo diferentes (después de todo, hay 13 opciones de modo de combinación), le permite probar más de un modo para ver cuál obtiene la mayor cantidad de desplazamientos, clics y, en última instancia, más participación.

Uno de los pasos más comunes e importantes en la prueba A / B de su sección de héroe es probar también al menos dos opciones de botones de CTA, para identificar qué botón obtiene la mayor cantidad de conversiones.

Específicamente, probar el color de un botón de CTA siempre es una experiencia útil que le permite comprender qué color de botón atrae y atrae más a los usuarios. La prueba A / B de color de los botones es muy popular entre los diseñadores web porque es rápida y fácil de realizar y apenas requiere recursos de diseño adicionales.

Utilice herramientas de mapas de calor para descubrir el comportamiento del usuario

Las herramientas de mapa de calor identifican y analizan los lugares donde los usuarios hacen clic en una página web. Estas herramientas permiten a los propietarios de sitios web y páginas de destino ver exactamente cómo los usuarios navegan activamente por el contenido. Esto se logra una vez que la herramienta identifica si los usuarios están interactuando o no con elementos clave (y cómo), como enlaces, botones, opciones y, por supuesto, CTA.

A continuación, se incluye información que los propietarios de sitios web pueden obtener mediante el uso de herramientas de mapas de calor:

  • Los elementos en los que no se puede hacer clic distraen a los usuarios.
  • Los tamaños de los botones son demasiado grandes o demasiado pequeños.
  • Los colores de los botones no son visibles.

Sea el héroe de su sitio web

Diseñar su sección de héroe y su imagen de héroe es una de las decisiones más cruciales e influyentes en su proceso de diseño web. Los creadores web a menudo se refieren a la sección de héroe de un sitio web como el "acto de apertura" de la presentación de su sitio web, esencialmente su gesto de bienvenida.

Las tendencias de los sitios web están en constante evolución, agregando nuevas funciones a las posibilidades de diseño web. Siempre es importante mantener su sección de héroe a la vanguardia de sus consideraciones de diseño, asegurándose de que siempre alcance su potencial al presentar su sitio web a las multitudes.

¡Obtenga Elementor Pro ahora!

Conclusión

Listo ! Eso es todo por este artículo que le muestra cómo hacer una imagen de héroe. Si tiene alguna duda sobre cómo llegar favísanos en el comentarios.

Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...