Consejo de diseño: creación de imágenes de encabezado eficaces

Las imágenes de encabezado son a menudo lo primero que los visitantes notan cuando llegan a su sitio web, página de destino o campaña de marketing. Esto los convierte en una de las herramientas más importantes para transmitir lo que desea que sus visitantes sepan sobre su sitio y su negocio. No dejes que te engañe, no soy un experto en diseño. Sin embargo, hablé con nuestra gurú del diseño gráfico residente para obtener más información sobre el proceso que utiliza para crear imágenes de encabezado efectivas. Ella compartió las mejores prácticas sobre cómo incorporar texto para diferentes casos de uso, qué tipos de imágenes funcionan mejor y dónde encontrar imágenes para sus campañas.

Texto en vivo vs texto gráfico

Para empezar, es importante pensar en el texto que desea utilizar con la imagen del encabezado, si corresponde. La mayoría de las imágenes de encabezado incluyen texto de una de estas dos formas, ya sea como texto en vivo o como texto gráfico incorporado a la imagen.

¿Qué es el texto en vivo?

El texto en vivo es texto agregado sobre una imagen de fondo. En ShortStack, puede agregar este texto usando un texto enriquecido o un widget de texto. Las ventajas de usar texto en vivo incluyen:

Capacidad de búsqueda : los navegadores pueden buscar el texto en vivo agregado a su campaña, lo que le da a su sitio un poder de SEO adicional;

Capacidad de respuesta del texto : el texto en vivo cambiará de tamaño automáticamente con el ancho del dispositivo desde el cual el espectador accede a su campaña; y

Editabilidad : el texto en vivo se puede editar fácilmente dentro de su ShortStack Campaign Builder.

INSIGHT : Usamos texto en vivo en nuestras plantillas debido a las ventajas que brinda esta opción.

¿Qué es el texto gráfico?

El texto gráfico es texto que forma parte de una imagen. Puede crear una imagen que incluya texto gráfico utilizando un programa de diseño como Photoshop o una herramienta en línea como Canva. Las ventajas de utilizar texto gráfico incluyen:

Mayor libertad creativa : el texto gráfico le permite utilizar las fuentes que desee y diseñar el texto como desee; y

Capacidad de respuesta de la imagen : Dependiendo de su diseño, el uso de texto gráfico puede permitirle más flexibilidad en términos de capacidad de respuesta de la imagen en diferentes tamaños de pantallas. Sin embargo, si tiene letra pequeña en su imagen, esto podría disminuir la legibilidad del texto cuando se reduce en dispositivos móviles.

Seleccionar una imagen

Después de determinar qué tipo de texto utilizará, es hora de decidir qué tipo de imagen utilizará para complementar su texto. Podría considerar usar:

Un patrón repetitivo : este tipo de imagen es excelente para la capacidad de respuesta, ya que no importa cuán ancha sea la imagen para que se muestre el mismo contenido;

Una imagen simple : una imagen que no está "ocupada" es mejor para superponer texto que una con demasiadas cosas;

Una imagen macro con efecto bokeh : una imagen macro es una toma de primer plano del sujeto, y agregar un efecto bokeh desenfocará el fondo de la imagen, lo que enfocará el sujeto de su encabezado;

Una imagen con el tema a un lado : al colocar el tema de una imagen a un lado, se deja espacio para el texto en pantallas anchas, lo que aumenta la legibilidad del texto; o

Una imagen que se combina con el color de fondo de su campaña : este tipo de imagen funciona bien para la capacidad de respuesta y la visualización de campañas en dispositivos móviles, ya que no necesita preocuparse por la altura de su campaña al crear su imagen.

Este encabezado tiene el tema de la imagen contenido a un lado dejando espacio para un bloque de texto en el otro.

¿No estás seguro de dónde encontrar imágenes? Sugerimos Shutterstock, Pixabay o Adobe Stock. De lo contrario, puede tomar sus propias fotos o crear sus propias imágenes y utilizarlas en su lugar.

Relación de aspecto de la imagen

Al seleccionar una imagen, es importante tener en cuenta la relación de aspecto de la imagen. Una imagen alta y estrecha puede funcionar bien en un dispositivo móvil, pero es posible que no se vea bien en una computadora de escritorio. Alternativamente, una imagen amplia con pequeños detalles perderá su impacto (y, potencialmente, parte del contenido) cuando se reduzca en dispositivos móviles. A veces es mejor tener dos imágenes, una para dispositivos móviles y otra para computadoras de escritorio. Puede usar nuestra configuración de visibilidad específica del dispositivo para mostrar contenido diferente en dispositivos móviles y en computadoras de escritorio.

Estilo de texto

Una vez que finalice la imagen para su encabezado, es hora de agregar su texto. Lo más importante a tener en cuenta al agregar texto es la legibilidad. Las siguientes técnicas pueden ayudar a mejorar la legibilidad del texto en su encabezado:

Agregue un bloque de color detrás del texto : un color sólido detrás de su texto proporcionará una barrera entre la imagen de fondo y el texto del encabezado;

Aumente la transparencia de la imagen : la aplicación de transparencia a la imagen de fondo permitirá que el texto sin transparencia se destaque sobre el fondo;

Aplicar una sombra de texto : usar una sombra alrededor de los caracteres de texto para darles más profundidad;

Utilice fuentes más atrevidas : las fuentes más atrevidas dan mayor peso a los caracteres de texto;

Contraste el color del texto con los colores de la imagen : el uso de colores contrastantes atraerá la atención de los espectadores hacia el texto del encabezado; y

Use diferentes tamaños de fuente para texto importante : dividir el texto con diferentes tamaños de fuente permite que se destaque la información más importante.

Sensibilidad

¿Crees que has terminado? No tan rapido. Debe asegurarse de que la imagen de su encabezado se vea bien tanto en el escritorio como en los dispositivos móviles. Tenga en cuenta las siguientes consideraciones al diseñar su encabezado para evitar cualquier problema:

Relación de aspecto : el ancho y la altura de la imagen afecta el aspecto que tiene en los dispositivos móviles (consulte la nota anterior);

Cambio de tamaño de la imagen : asegúrese de que el texto y los elementos importantes de la imagen sigan siendo legibles cuando se cambie el tamaño de una imagen en un dispositivo móvil; y

Desplazamiento de imágenes: las imágenes pueden aumentar la cantidad de desplazamiento que los visitantes deben hacer en dispositivos móviles, así que asegúrese de que la información importante no requiera mucho desplazamiento.

¡Ahí tienes! Los mejores consejos para diseñar una imagen de encabezado eficaz. ¿Tiene alguna pregunta sobre cómo diseñar su campaña? Envíe un mensaje a nuestro equipo de soporte: [email protected].

¿Quieres más ideas y consejos de diseño? Consulte los artículos de nuestra serie Diseño.