Si deseas hacer una buena impresión en tu sitio web debes empezar por evaluar el pantallazo inicial de tu sitio web su totalidad, desde la ubicación del logo y la barra de menú hasta los efectos que has decidido aplicar a la imagen de fondo y la ubicación de los textos. Cada elementos es importante y el pantallazo inicial puede ser crucial para muchos usuarios pues tan solo en unos segundos deciden si el sitio les interesa o no.
Uno de los elementos que suelen componer una gran cantidad de sitios web es la denominada “hero image”. Este término hace referencia a la imagen principal que se ve al inicio de toda página web o publicidad por correo electrónico. Ya que la mayoría de sitios web decide emplear imágenes, entonces te imaginarás la importancia que pueden tener las hero images. En este artículo te mencionamos algunos consejos para poder diseñar una hero image para tu sitio web.
Elige una imagen que comunique acorde a la marca
Ya que la Hero Image es la imagen principal y el primero que ven los usuarios al ingresar a tu sitio es esencial que elijas una fotografía o ilustración que realmente logre impactar a tus usuarios. Peor no sólo basta con elegir una fotografía que tenga una perspectiva interesante o que sea visualmente atractiva, sino que debes preguntarte si dicha fotografía realmente logra comunicar un mensaje que va acorde con la marca.
Es realmente importante que el proceso de selección fotografía sea tomado seriamente y consideres tanto al público objetivo como el mensaje que se desea transmitir. Todo elemento que forma parte de la composición debe tener un propósito dentro del diseño, ya que las fotografía o ilustraciones pueden comunicar por sí solas es esencial que elijas una fotografía apropiada.
Realiza modificaciones a la imagen elegida
Una vez que has seleccionado la imagen adecuada para tu diseño, es probable que debas realizar modificaciones a la misma, incluso si has decidido realizar una sesión de fotos. En este caso, tal vez las modificaciones sean mínimas, pero de igual manera deberás cambiar la resolución y dimensiones de la imagen para que sea apropiada para web. Por otro lado, si empleas mercados o librerías fotográficas gratuitas, es recomendable que realices modificaciones a las fotografías, de lo contrario, otras empresas podrían elegir la misma fotografía para su sitio web. Así que para diferenciarte del resto, debes aplicar algún tipo de edición a la fotografía elegida.
Dependiendo del resultado específico que tengas en mente y del propio diseño de la marca, puedes hacer una edición fotográfica que requiera de muchos pasos y capas en Photoshop o aplicar una alteración mínima como un recorte o la saturación de colores.
Considera las fuentes a utilizar y ubicación del texto
Una hero image usualmente contiene una frase, un título que impacte a los usuarios o que les informe sobre el servicio o aplicación que se está ofreciendo en el sitio. Debes considerar este hecho al momento de editar una fotografía pues en ciertos casos será necesario no solo aplicar un filtro de color, modificar el contraste, girar la fotografía a otro color, etc. sino también realizar ediciones específicas que maximicen la legibilidad de la frase que se va a colocar.
Ya que debes colocar una frase en alguna zona particular de la fotografías, debes considerar este hecho al seleccionar y editar imágenes. Particularmente en la edición, existen ciertas modificaciones que puedes realizar para mejorar el contraste como, por ejemplo, utilizar un desenfoque en el fondo.
La hero image no siempre es una fotografía
Una hero image no debe ser necesariamente una ilustración o fotografía. Bien podría ser un fondo de color, una textura o un patrón. Aunque es bastante común encontrar fotografías, no siempre es el caso y de hecho puede ser positivo para tu sitio hacer uso sólo de un color de fondo ya que maximiza la legibilidad. Si realmente este diseño va acorde con la marca, entonces te animamos a que vayas por ello. Haciendo uso de colores, una poderosa frase con una tipografía legible y en buen puntaje puede captar la atención de tus usuarios.
Al elegir el color considera el diseño de la marca y también el público objetivo, además de tener en cuenta en contraste entre el color de fuente y el fondo. Asimismo, ten en cuenta que existen algunos colores específicos que pueden causar cierto grado de “estrés” en la vista de los usuarios, así que realizar pruebas de color antes de tomar una decisión definitiva.
La hero image puede tener tamaños diversos
La hero image no siempre ocupa todo el largo o ancho de la pantalla. Todo depende del layout que utilices. Aunque es común ver sitios web en donde esta imagen ocupe todo el largo de la pantalla, puede llegar a ocupar sólo la tercera parte del primer pantallazo. Tienes que evaluar el diseño y si es realmente necesario que la imagen ocupe todo este espacio o si la composición es más efectiva al realizar un recorte.
Aplica técnicas efectivas al colocar botones CTA
Es común colocar, además de una poderosa y atractiva frase, un botón de llamada a la acción. Este botón es el que les indica cuál es la acción que deben realizar.
Para crear botones de llamada a la acción en Hero Image se siguen los mismos principios y técnicas que ya conoces: generar contraste entre el fondo y el color de botón, indicar la acción a realizar de forma clara y precisa, utilizar una fuente legible y ubicar el botón en una zona estratégica.
No en todas las Hero Image se colocará un botón de llamada a la acción, en algunos casos con el título basta pues no se espera que el usuario tome una acción e n particular aparte de seguir navegando por el sitio web.
En conclusión…
La hero image es un elemento bastante común en cualquier sitio web, se utiliza tanto en páginas de lanzamiento y aterrizaje como en sitios web corporativos que ya cuentan con un grupo de usuarios que visitan el sitio de forma continua.
Crear una buena hero images es un proceso que empieza desde la misma selección de la fotografía, texturas, patrones o colores que emplearás hasta la ubicación de todos los elementos que forman parte de dicha composición. Son varios elementos a los que debes prestarle atención, pero ser detallista permitirá que puedas logran un gran diseño.
