Crea la imagen perfecta de héroe usando contraste
¿Quieres hacer una gran primera impresión? Comienza con el encabezado de su sitio web. La imagen que ve el usuario dejará una impresión, buena o mala, y determinará si ese usuario hace clic y continúa, o abandona el sitio por completo.
Es una tarea difícil para una sola imagen.
El elemento clave para crear una imagen de héroe que atraerá a los usuarios y los mantendrá moviéndose alrededor del diseño es el contraste. (En serio, todo se remonta a la teoría de diseño 101.) Una cabeza que presenta elementos contrastantes en tamaño, color y escala proporciona la combinación correcta de interés visual y les dice a los usuarios cómo interactuar con el diseño. Aquí hay algunas maneras de maximizar el contraste en el camino hacia la creación de una imagen de héroe perfecta.
Cultivar estratégicamente
La imagen del héroe no tiene que llenar la "primera" pantalla en los dispositivos. No te dejes atrapar en esa trampa.
Recorta la imagen según el impacto en el contenido. Considere los otros elementos que son importantes para los usuarios cuando llegan a la página y también los adapta para ellos. Dependiendo de este marco, eso podría significar que la imagen del héroe se escala para ser más grande o más pequeña que la ventana del navegador (consideremos más resoluciones estándar por razones de argumento).
Antes de que te niegues con la idea, considérala por un momento.
- Una imagen superficial ayudará a obtener una vista previa de otro contenido.
- Una imagen inusualmente profunda alentará a los usuarios a desplazarse por más.
- Cualquier forma inusual llamará la atención.
Considera la animación
No es necesario crear una experiencia cinematográfica completa para agregar imágenes en movimiento al encabezado del héroe. Los toques de movimiento más pequeños crean el contraste suficiente para atrapar el ojo.
Los movimientos sutiles, como el avión que vuela sobre la imagen de Bar Z Winery, proporcionan ese elemento de contraste sin ser abrumadores. Es una alternativa simple a algunos de los encabezados de video más llamativos que se han vuelto populares. El elemento de contraste es doble: el diseño es diferente al de muchos otros usuarios a los que los usuarios están expuestos y el movimiento sutil es delicioso e inesperado.
Por otro lado, puedes incluir todo con animación o video para una imagen de héroe. El movimiento puede ser particularmente atractivo y es una opción popular. Úselo de la misma manera que lo haría con una imagen fija cuando se trata de agregar efectos como tipografía y llamadas a la acción.
Think Bold Typography
La tipografía en la imagen del héroe debería sorprender al usuario. Debe ser audaz, impactante y memorable.
Puede crear esto con la selección de tipo de letra y las palabras en la pantalla. (No hay encabezados Arial que digan "Hola" aquí).
La combinación de estilo de letras y mensajería debe tener un impacto directo y atractivo para el usuario. Has oído que las personas tienen períodos de atención más cortos que los peces dorados; es su trabajo atraparlos con bellas letras y lenguaje.
Cuando se trata de tipo negrita, los elementos clave del contraste son el color y el tamaño.
- El tipo debe ser un color que sobresalga del fondo. La luz sobre la oscuridad o la oscuridad sobre la luz son las mejores opciones cuando se trata de legibilidad.
- Negrita es una digresión de la norma. Considera la tipografía excesiva o insuficiente en el encabezado del héroe para el impacto.
- Elija palabras con significado. A menos que sea clave para su mensaje, no necesita un párrafo en el encabezado. Elija algunas palabras clave que atraigan a los usuarios a obtener más información. (El número de palabras afectará el tamaño de las letras grandes o pequeñas).
Elija el color con cuidado
Una imagen de héroe puede no ser una imagen en absoluto. Podría ser un bloque de color o una textura fresca.
Elija cuidadosamente un color que represente el significado exacto que pretende. Un encabezado de héroe de color llamativo puede impresionar a los usuarios, pero el color incorrecto puede ser un apagado.
Las opciones brillantes y modernas son una buena alternativa. Lo bueno de esta opción es que puedes mezclarla de vez en cuando simplemente cambiando el color de fondo. Un gran fondo de color también puede ayudar a reforzar la identidad de marca, especialmente si tiene una fuerte asociación de colores, y se presta a legibilidad debido a la naturaleza simple del diseño.
El color también es una consideración importante cuando se utiliza con otra imagen o video. Desde la tipografía coloreada hasta los elementos de la interfaz de usuario coloreados, es importante asegurarse de que las elecciones de color en la imagen coincidan con el resto del diseño. Gran parte de esto se remonta a la teoría del color y a la comprensión de la rueda de colores para que las elecciones de imagen y color funcionen juntas en el diseño.
Pero, ¿y si la imagen del héroe y los colores de la marca no encajan? Piensa creativamente sobre cómo usar las partes en la imagen del héroe juntas. Prueba una superposición de color en la foto; Considere blanco y negro para la imagen o el texto. Mueva elementos de color alto a una barra de navegación que sea blanca o negra para mantenerlos alejados de la imagen real. Cuando la imagen y los colores obligatorios no funcionan bien, la mejor opción es eliminar o separar el color.
Piensa en la luz y los espacios oscuros
Tener en cuenta los espacios oscuros y claros en una imagen puede ser la tarea más difícil al agregar elementos para crear contraste en una imagen de héroe. Particularmente con formatos receptivos y puntos de interrupción, la colocación de texto o botones en una imagen puede cambiar y no siempre se puede encontrar una excelente ubicación.
¿Qué debe hacer un diseñador?
- Elige otra imagen;
- opta por un tipo diferente de familia, tamaño o color;
- agregar una superposición de color;
- hacer lo mejor posible.
Cada uno de los anteriores es una opción viable. La mejor opción puede variar según el proyecto.
The Society Inc. La solución en el control deslizante de la imagen del héroe, con mucha variación entre espacios claros y oscuros, era incluir una superposición del logotipo con texto blanco en una forma negra. No resta valor a las imágenes y es mucho menos intrusivo de lo que podría pensar al escuchar la idea. El logotipo en el centro también ayuda a establecer la marca y la identidad visual.
Incluir un llamado a la acción distintivo
No te olvides de la CTA!
¿Qué quieres que hagan los usuarios después de ver su genial imagen de héroe? Dígales.
El llamado a la acción debe ser claro, ya sea para completar un formulario, desplazarse por más contenido o hacer clic en un enlace a otra página. Debe incluir suficiente definición y contraste para que se vea fácilmente en el fondo de la imagen. (¿Cuál es el punto en una CTA si nadie lo ve?)
El color y el tamaño son de particular importancia aquí. El color del botón (una señal de CTA común) debe destacarse del resto de la imagen. Las palabras que dicen a los usuarios qué hacer deben ser excepcionalmente legibles, simples y claras.
Conclusión
El contraste es una de las técnicas clave para cualquier buen diseño. Crea separación entre los elementos y ayuda a guiar a los usuarios hacia la acción deseada.
Tenga especial cuidado para crear el contraste suficiente cuando diseñe una imagen de héroe para que los usuarios sepan exactamente qué acciones tomar en la página. Eche un vistazo a sus métricas y si esas conversiones no están sucediendo, vuelva a pensar la cantidad de contraste en el diseño. Puede ser hora de amplificarlo aún más.