Todo lo que necesita saber sobre el diseño de imágenes de héroes

Las imágenes destacadas son las imágenes grandes, o una serie de imágenes que se muestran de forma destacada en una página de inicio y, a veces, se utilizan en diseños de correo electrónico. En realidad, juegan un papel muy importante para todas las empresas, por lo que es importante saber un par de cosas sobre el diseño de imágenes de héroes.

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

• Puede ayudarlo a desarrollar su marca y contar la historia de su marca. Puede usar estas imágenes para brindar información sobre la historia detrás de su marca.
• También puede usarlo para responder a las preguntas más frecuentes que tienen sus clientes o abordar un problema que es urgente.
• Las imágenes destacadas también se pueden utilizar para que sus clientes conozcan la propuesta de valor de su marca.
• Si tiene un anuncio importante que hacer, como por ejemplo, una venta que se realizará pronto, esto puede ayudar. Esta es una gran idea para los correos electrónicos que enviarás también.
• Las imágenes destacadas se pueden utilizar para presentar un producto o una línea completa de productos.

¿Qué debe incluirse en un diseño de imagen de héroe?

Hay tres elementos principales que debe tener en su diseño de imagen de héroe para que sea perfecto para su marca. De hecho, actuará como una imagen de llamada a la acción si se ejecuta correctamente.

• La imagen en sí debe presentar una fotografía de alta resolución, un diseño gráfico llamativo o imágenes. La resolución de la imagen aparecerá en la lista para que sepa qué tamaño deben tener las imágenes.
• También debe tener un contenido breve, conciso y poderoso que se pueda agregar a la imagen. Esto debería llevar inmediatamente el mensaje a casa.
• Todas las imágenes destacadas deben presentar un texto o botón de llamado a la acción muy potente. Algunos buenos ejemplos serían "Comprar ahora", "Más información", "Leer nuestra historia" o "Comprar ahora".

Prácticas recomendadas para crear imágenes destacadas

Usa imágenes de alta calidad

Es muy importante que sus imágenes sean de alta calidad, ya sea que estén en un sitio web o en un correo electrónico. Debido al tamaño de las pantallas de las computadoras y los teléfonos inteligentes en la actualidad, los clientes pueden saber fácilmente si el diseño de la imagen principal se ve borroso o pixelado. Si desea evitar estos problemas, siempre puede cambiar el tamaño de sus imágenes reduciéndolas en tamaño. Pero nunca aumente el tamaño. Tan pronto como lo haga, su imagen se pixelará.

Cuando se trata de la altura y el ancho de la imagen del héroe, dependerá del diseño particular que tenga. ¿Quizás quieras que tu imagen de héroe ocupe todo el ancho de la página? Si es así, use VW o VH (lo que significa el ancho o alto completo del área de la ventana gráfica).

También debe asegurarse de personalizar cualquier imagen de archivo que use y de que el fondo no esté demasiado ocupado, especialmente si está agregando texto. El uso de contraste de color a través de superposiciones y mallas también es una excelente manera de aportar claridad al texto y al fondo. Por ejemplo, tenga en cuenta el texto blanco en la imagen que se muestra a continuación.

Tiempos de carga de las imágenes.

Cuando utiliza imágenes de alta calidad, los tiempos de carga juegan un papel fundamental. Cuando el tiempo de carga sube de 0,4 a 0,9 segundos, reduce el tráfico en un 20 %. Entonces, algunas de las mejores prácticas que debe seguir para evitar esto son:

• Cambiar el tamaño de la imagen usted mismo y no dejar que el navegador lo haga automáticamente.
• Comprimiendo la imagen que elegiste usando Photoshop. También puede usar herramientas de compresión diseñadas específicamente para esto.
• Pruebe y trabaje con imágenes PNG y JPG para ver qué tipo funciona mejor sin aumentar el tiempo de carga.

Demostración para impulsar la apelación

El diseño de tus imágenes destacadas debe mostrar a la audiencia lo que estás vendiendo exactamente como es. Por ejemplo, si desea vender paraguas personalizados, puede exhibir una imagen de personas bajo la lluvia usándolos.

Si su imagen indica un eslogan o informa a los clientes sobre una venta, asegúrese de que solo se utilice una pequeña cantidad de texto. Otra cosa importante a tener en cuenta es que los subtítulos debajo de las imágenes se leerán un 300 % más que el cuerpo del texto. Deje que eso le dé una idea de qué tan preciso, compatible y específico debe ser su pie de foto con la imagen del héroe.

Otra táctica que puede probar es usar una serie de banners de héroes, en lugar de una sola imagen, que combine imágenes de alta calidad con un llamado a la acción fuerte y convincente.

Mantener la relevancia

Su imagen de héroe es como una introducción a su mensaje. Ayudará a sus clientes a comprender lo que pueden esperar del resto de su correo electrónico o su sitio web. Si la imagen no logra transmitir claramente su mensaje, tampoco entrega valor al cliente.

También sería una completa pérdida del espacio que ha utilizado para el diseño. Aún más peligroso es, si la imagen no se corresponde con la idea preconcebida del cliente sobre el producto o el servicio. Entonces solo será confuso.

Para mantener la relevancia, deberá considerar lo siguiente:

• ¿La imagen utilizada es una visualización de su palabra clave objetivo?
• ¿Su imagen da claridad sobre el propósito de su sitio web o correo electrónico?
• ¿El flujo de la página o el correo electrónico, que conduce hasta la llamada a la acción, está respaldado por la imagen utilizada?
• ¿Cuánta credibilidad y autenticidad aporta la imagen a tu marca?
• ¿Los beneficios y la relevancia son realzados por la imagen?
• ¿La imagen desencadena emociones que obligarán a los clientes a tomar esa llamada a la acción?
• ¿Puede su imagen retratar al cliente como el héroe después de haber adquirido el producto o el servicio?

Poner énfasis en la llamada a la acción

Anteriormente, señalamos que es importante tener la llamada a la acción en el diseño de la imagen de su héroe. Ahora, veamos qué puede hacer para llamar la atención de inmediato. Por ejemplo, su llamado a la acción no debe competir con la imagen. Sin embargo, realmente debería destacarse. El siguiente ejemplo es la combinación perfecta para entregar un mensaje relevante y emotivo mientras se mantiene el peso del botón de llamada a la acción en proporción a la imagen general. El uso del color aquí también es muy importante.

Para asegurarse de que el CTA se destaque, puede realizar una prueba de desenfoque en la imagen. Esto lo ayudará a ver si la atención del cliente se dirigirá o no hacia donde necesita que vaya. Simplemente necesita tomar una captura de pantalla del sitio o del diseño del correo electrónico y luego aplicarle un efecto de desenfoque usando Adobe XD. Una vez que la imagen esté borrosa, vea qué llama su atención. ¿No te gusta lo que ves? Es hora de revisar entonces.

Mostrar personas reales, no personas 'reales falsas'

Si va a incluir personas en el diseño de su imagen principal, muestre imágenes de personas reales que representen su marca. Manténgase alejado de las imágenes de stock que solo muestran a una persona de aspecto profesional con una amplia sonrisa mirando la pantalla. Estas imágenes son una moneda de diez centavos por docena y simplemente parecen falsas y sin sentido. Las pruebas de usabilidad que se han llevado a cabo muestran que este tipo de imágenes son solo decorativas y que no agregan ningún valor real. También podría quitarle aspectos positivos a la experiencia del usuario.

Considere usar ilustraciones que tengan un toque personal.

Las ilustraciones también se están convirtiendo en una opción popular para el diseño de imágenes de héroes. Si puede agregar ese toque personal a una ilustración, en realidad puede aportar mucha personalidad a su imagen. El uso de ilustraciones le dará un mejor control sobre los aspectos técnicos y relacionados con el contenido de la imagen, ya que puede personalizarlos tanto como desee. De hecho, si desea tener un mejor recuerdo de la marca, considere ilustraciones personalizadas para su imagen de héroe.

Para que una ilustración sea funcional, debe ser fácilmente reconocible. El mensaje que envía debe verse de manera similar sin importar quién sea el usuario. Si hay más de una ilustración, todas deben tener consistencia. En otras palabras, debe parecer que la misma persona creó todas las ilustraciones.

Si necesita ayuda con los diseños de su imagen de héroe, un equipo dedicado de Kimp siempre está listo para ayudarlo.

Impresionantes imágenes de héroes para inspirarte.

Ahora que conoce los conceptos básicos, aquí hay algunos excelentes ejemplos de imágenes de Hero que funcionan muy bien.

Esta imagen utiliza un concepto 3D. También tiene un fondo nítido y atractivo con una gran funcionalidad.

Apple, como todos sabemos, es una marca que tiene que ver con su diseño. Como tal, tiene mucho sentido que muestren sus productos en sus imágenes de héroes, con estilo.

Spotify realmente tiene un impacto aquí a través de su uso de un hermoso contraste de color que juega bien para hacer que la oferta realmente destaque. Además, los usuarios también pueden desplazarse por varias imágenes de héroes en lugar de solo una.

Este diseño de imagen de héroe de la marca Fivefootsix es una pantalla completamente negra que tiene un eslogan resaltado que se coloca justo en el centro. La naturaleza de este diseño y la ubicación del texto atraen la atención de inmediato.

Conviértase en un héroe y obtenga el diseño correcto de su imagen de héroe

Crear un gran diseño de imagen de héroe es muy importante. ¡No solo lo ayudará a proyectar la personalidad de su marca y crear conciencia, sino que también lo ayudará a aumentar las ventas! También debe pensar en la frecuencia con la que le gustaría cambiar el diseño de su imagen principal para que las personas que visitan repetidamente la página de su sitio web sientan que hay algo nuevo para ellos. Con los correos electrónicos, asegúrese de que sus imágenes sean lo suficientemente atractivas para que el lector navegue y no presione el botón de eliminar.

Cuando se trata de su diseño, haga que su imagen sea clara, poderosa, cuidadosamente pensada y única. El objetivo principal aquí es que su cliente se sienta atraído por la imagen y se sienta obligado a leer lo que tiene que decir.