Guía definitiva de imágenes heroicas [Best Practices + Examples]
Ya sea que se dé cuenta o no, juzga cada sitio web por su atractivo visual. Y solo se necesitan unos 0,05 segundos para formarse una opinión. Eso significa que la imagen principal (la primera foto, gráfico o video que ve la gente) tiene que ser lo suficientemente llamativa para que la gente se desplace por el sitio.
Las imágenes heroicas de alta calidad son la clave para una excelente primera impresión. Si se hacen bien, representan la esencia de la identidad de su marca y el tema general de su página web.
Sí, tiene mucho peso para una sola pieza de contenido visual. Por eso es el más heroico de todos.
Esta guía le explicará cómo subir de nivel su sitio web con la imagen de héroe perfecta, desde elegir un gráfico inspirado en las últimas tendencias de diseño hasta asegurarse de que su imagen tenga el tamaño óptimo. También analizaremos ejemplos de imágenes heroicas para generar ideas para su propio sitio web. Prepárate para unos dulces ojos de diseño.
Imagen de héroe en diseño web
Si las imágenes atractivas son las chispas en la parte superior de cada gran sistema de diseño, una imagen de héroe es la brillante cereza roja. Atrae tu atención y te hace querer más.
En el diseño web, una imagen de héroe es la primera foto, gráfico, ilustración o video que la gente ve en una página web. Por lo general, incorpora tanto una imagen como un texto para transmitir el mensaje central de una empresa. Las imágenes de héroe se encuentran en la mitad superior de la página y, a menudo, cuentan con una llamada a la acción (CTA) que anima a las personas a sumergirse más en el sitio web. El objetivo de esta imagen es agregar energía y emoción a una página. Quiere que muestre el estilo de su marca, comparta el propósito de su sitio y haga que la gente se entusiasme por explorar.
Una buena imagen de héroe puede elevar su tráfico y conversiones al hacer que las personas quieran interactuar con su sitio. La animación, los carruseles y los efectos activados por desplazamiento son formas de flexionar su creatividad más allá de la fotografía de archivo típica. Pero una mala imagen puede arruinar un gran diseño. Los elementos visuales fuera de la marca, los archivos grandes que reducen la velocidad de carga y la copia sin sentido pueden arruinar la experiencia del usuario.
Un error común al diseñar una imagen de héroe es obtener el tamaño de archivo correcto. Demasiado grande, la velocidad de carga se desploma. Demasiado pequeño, todo parece pixelado. Analicemos los diferentes tamaños de imagen de héroe para que pueda crear una imagen impresionante en todo momento.
Dimensiones de la imagen de héroe
Encontrar la relación de aspecto y el recorte correctos puede resultar confuso al dimensionar una imagen de héroe. Las imágenes de banner hero no son lo mismo que las imágenes de pantalla completa, y cada imagen debe escalar para adaptarse al espacio. También hay que tener en cuenta que nadie navega exactamente de la misma forma. Personalmente, mi pantalla generalmente se amplía al 120%, pero otras pueden tener docenas de pestañas abiertas que son de diferentes tamaños.
Es probable que se produzcan algunos recortes de imagen a medida que la imagen principal se escala para adaptarse a una variedad de pantallas, por lo que es mejor pensar en las siguientes dimensiones como pautas, no como reglas rígidas.
1. Dimensiones de imagen de banner y pantalla completa
El tamaño ideal para una imagen de héroe a pantalla completa es de 1200 píxeles de ancho con una relación de aspecto de 16: 9. Para una imagen de héroe de banner, el tamaño ideal es 1600 x 500 píxeles.
Si necesita imágenes nítidas, o su público objetivo navega en pantallas grandes, es posible que tenga que medir hasta 1.800 píxeles. Tenga en cuenta que esto puede resultar en un tamaño de archivo grande que ralentiza su sitio.
Puede verificar su velocidad de carga para computadoras de escritorio y dispositivos móviles con PageSpeed Insights de Google. Ofrece una visión completa de qué contenido del sitio se carga primero y dónde hay margen de mejora. Apunta a un tiempo de carga de la página de uno a dos segundos porque probablemente perderás gente si es más de cinco segundos.
2. Dimensiones de la imagen de héroe móvil
El tamaño ideal para una imagen de héroe móvil es de 800 x 1200 píxeles.
Si bien es importante considerar cómo se ve su imagen de héroe en un escritorio, no puede ignorar la experiencia móvil. Casi el 55% del tráfico mundial del sitio web en 2021 se genera en un teléfono móvil.
El diseño de su imagen de héroe debe responder y ajustarse a una orientación vertical (teléfono) y horizontal (tableta). Las imágenes de héroe dinámicas, como los videos, funcionan bien en un escritorio, pero a menudo deben cambiarse por una imagen estática para dispositivos móviles. Los videos tardan más en cargarse y nadie quiere tener un impacto masivo en su plan de datos solo para ver su sitio.
3. Compresión de imagen de héroe
Desea comprimir su imagen principal si tiene un tamaño de archivo grande (cualquier cosa de más de 1 MB es demasiado grande). Puede utilizar sitios como TinyJPG, Compress JPG o Photoshop Compressor de Adobe para reducir el tamaño sin reducir la calidad. Solo asegúrese de obtener las dimensiones correctas de antemano o la imagen puede aparecer borrosa o estirada.
Al dimensionar una imagen de héroe, verifique sus análisis de Google para ver la resolución de pantalla típica de los visitantes de su sitio web. Luego, diseñe con ese público objetivo en mente. Solo recuerde probar su imagen principal en varios navegadores, pantallas y teléfonos para ver cómo se escala. Una vez que tenga las dimensiones correctas, es hora de incorporarlas a su página web utilizando HTML y CSS.
HTML de imagen de héroe
HTML es un lenguaje de codificación compuesto por elementos que se utilizan para estructurar una página web. Crea orden y le permite incrustar contenido (como imágenes de héroe) en un sitio.
La creación de una imagen principal con HTML garantiza que su imagen aparezca en una página web, mientras que CSS hace que se vea bien en una pantalla. Ambos requieren habilidades de codificación, por lo que es posible que deba actualizar sus conocimientos de HTML y CSS o solicitar la ayuda de un desarrollador.
Las principales cosas a tener en cuenta son:
- La imagen del héroe debe estar centrada.
- El texto debe ser fácil de leer.
- Tiene que verse bien en todos los tamaños de pantalla.
- La imagen debe cubrir toda la ventana gráfica.
Siga estos pasos para configurar una imagen de héroe llamativa. Nota: Los ejemplos siguientes incluyen elementos HTML y reglas CSS, pero explicaré la diferencia entre los dos más adelante.
1. Cree la estructura.
Configure dos contenedores para su imagen principal utilizando las convenciones de codificación de su sitio web. Por ejemplo, el primer ejemplo a continuación usa .héroe para la estructura y .hero-contenido para la imagen, el texto y el botón, mientras que el segundo usa .imagen-contenedor y .inner-container.
Fuente de imagen
Fuente de imagen
2. Agregue su contenido.
Una vez que la estructura está en su lugar, es hora de personalizar su imagen. Agregue una imagen, elija una fuente personalizada, elabore un encabezado y un subtítulo, y cree un botón con un CTA atractivo. Si desea agregar un filtro a su imagen de fondo (sin aplicarlo al texto), DeveloperDrive recomienda incluir el filtro antes de su .hero-contenido código.
Fuente de imagen
Observe cómo el ancho y la altura debajo del .héroe las secciones están configuradas en 100vw y 100vh. Esto garantiza que la imagen se ajuste a toda la ventana gráfica, tanto vertical como horizontalmente, de modo que abarque toda la pantalla.
Ninguna imagen de héroe está completa sin un botón que impulse a las personas a actuar. Incorpora uno a tu imagen con el elemento. Solo asegúrate de incluir el Familia tipográfica ya que el texto no se traduce automáticamente del .hero-contenido elemento.
3. Centre el contenido.
No todas las imágenes de héroe tienen texto centrado, pero la mayoría tiene una imagen centrada. Para alinear su imagen de fondo, puede hacer un contenedor flexible incorporando monitor, justificar el contenido y alinear-elementos debajo de tu .héroe elemento.
Fuente de imagen
Para texto centrado, incluya un .text-align: centro gobernar bajo su elemento de contenido principal. En el siguiente ejemplo, el texto está anidado bajo el .hero-contenido código.
Fuente de imagen
4. Hágalo receptivo.
Quieres que tu imagen principal se vea bien sin importar el tamaño de la pantalla. La configuración de consultas de medios le permite crear parámetros para que su imagen responda a un ancho de pantalla particular.
Fuente de imagen
5. Pruebe la vista.
¡Felicitaciones, su estructura HTML está configurada! Pruebe cómo se ven la imagen, el texto, el botón, los márgenes, el relleno y el centrado en diferentes tamaños de pantalla. Si algo parece estar mal, revise su código para ver si puede encontrar problemas. Para obtener instrucciones detalladas sobre cómo crear y solucionar problemas con HTML, consulte este artículo de DeveloperDrive. ¿Todos lucen bien? Es hora de agregar estilo con CSS.
Hero Image CSS
Mientras que HTML crea orden, CSS (hojas de estilo en cascada) agrega estilo. Es un lenguaje basado en reglas que complementa los elementos HTML aplicando efectos estilísticos. Por ejemplo, CSS te permite convertir el texto en una imagen de héroe encabezado amarillo brillante para que resalte sobre el fondo púrpura.
Si no incluye CSS dentro de su imagen principal, los elementos HTML predeterminados a las propiedades básicas del navegador, como el siguiente ejemplo.
Fuente de imagen
Esa no es la página web más atractiva, ¿verdad?
Al incluir reglas de CSS, puede desarrollar una imagen que atraiga a los visitantes en lugar de asustarlos. Los ejemplos de HTML anteriores incluyen reglas CSS, pero veamos un diseño básico para que pueda trabajarlo en su propia imagen.
La siguiente plantilla describe el HTML y CSS básicos necesarios para crear una imagen de héroe a pantalla completa. Puede ajustar el estilo cambiando las reglas debajo del .héroe o .hero-texto elementos, como Familia tipográfica, color, frontera, o acolchado superior.
Fuente de imagen
Para obtener más información e inspiración sobre las formas de usar CSS para imágenes, consulte el foro de hero-image en GitHub. Ahora es el momento de comprobar lo que puede hacer una buena codificación de imagen de héroe para la página web de una empresa.
Ejemplos de imágenes de héroes
Como todos los medios creativos, las imágenes de héroes están influenciadas por las tendencias. ¿Recuerdas cuando las imágenes prediseñadas eran geniales? ¿Qué tal cuando cada sitio de noticias te golpea con una página de bienvenida?
Para crear una imagen de héroe relevante hoy, observe estas tendencias de diseño.
1. Paralaje y animación de desplazamiento
Experimentamos paralaje todos los días cuando vemos pasar autos o caminar por la calle. Es la ilusión óptica que hace que los objetos cercanos a nosotros parezcan moverse más rápido que los objetos más lejanos. En el diseño web, el paralaje utiliza el primer plano y el fondo para recrear este efecto. El resultado parece mágico. Solo asegúrese de no abrumar a los visitantes incorporando demasiados elementos móviles. La simplicidad es clave aquí.
La animación de desplazamiento hace que la participación sea el objetivo. Una buena animación de desplazamiento anima a las personas a seguir desplazándose antes de ofrecer una experiencia única y atractiva. Las animaciones de desplazamiento vienen en una variedad de paquetes y funcionan bien en varias industrias, como venta minorista, servicios creativos, publicaciones de noticias, educación y más.
2. Composiciones abstractas
Los círculos, triángulos, rayas y bloques de colores vuelven a estar de moda. En lugar de restringir el espacio y asegurarse de que todo esté en su lugar, las imágenes heroicas abstractas evocan una sensación de libertad y creatividad. Puede encontrar que esta tendencia se apodera de las empresas de tecnología y las nuevas empresas, como este ejemplo de Zendesk que incorpora video dentro de un semicírculo abstracto para mantener el diseño divertido.
3. Esquemas de colores suaves
El adulto promedio pasa casi ocho horas al día con los medios digitales, y eso puede generar mucha fatiga visual. Los diseñadores web han tomado nota y están empezando a inclinarse por las imágenes heroicas con paletas de colores neutrales y agradables. Esta tendencia está apareciendo en los sitios web de venta minorista, de bienestar y médicos para ofrecer una experiencia más cómoda y agradable a la vista.
Fuente de imagen
4. Productos como elementos de diseño
Los productos son la estrella del espectáculo cuando se trata de imágenes heroicas. Las empresas quieren mostrar sus ofertas y atraer a los visitantes para que aprendan más sobre las funciones. Para las imágenes de héroe, es común ver productos que se utilizan como elementos gráficos o se deconstruyen para que los visitantes puedan profundizar en los detalles. Las empresas de tecnología y minoristas a menudo usan este tipo de imagen de héroe, pero puede funcionar para cualquier marca que busque poner su producto a la vanguardia.
Fuente de imagen
Fuente de imagen
5. Color realista
Hasta luego colores planos, hola fino sombreado 3-D. Esta tendencia en el diseño web de imágenes heroicas se trata de hacer que las personas se sientan como si estuvieran dentro de la pantalla. Los diseñadores crean estas experiencias realistas utilizando degradados, sombras y colores mezclados. Si bien esta tendencia probablemente se mantendrá en la tecnología y las aplicaciones, es excelente para atraer a las personas al mundo de su sitio web.
Fuente de imagen
6. Videos
La investigación de Wyzowl encontró que el 84% de las personas se han convencido de comprar un producto o servicio al ver el video de una marca. Esto convierte al video en el contenido visual perfecto para una imagen de héroe que llame la atención. Si decide usar un video, es mejor mantenerlo en menos de 30 segundos y en un bucle. Como se mencionó anteriormente, querrá cambiar el video por una imagen de héroe estática para su sitio móvil para que no consuma datos o tarde en cargarse.
Mejores prácticas de Hero Image
Las tendencias son solo una parte de la creación de una gran imagen de héroe. El resto de la magia se basa en estándares de diseño probados y verdaderos. Incluso si no es un diseñador capacitado, puede seguir estas mejores prácticas para obtener una imagen de héroe que llegue a casa con su audiencia.
1. Tamaño
Ya hablamos sobre las mejores dimensiones para las imágenes heroicas anteriores (1200 píxeles y una relación de aspecto de 16: 9), así que considere esto como un recordatorio de lo importante que es tener el tamaño correcto. No desea que los navegadores cambien el tamaño de una imagen por usted o podría terminar con una imagen estirada y original que desanime a los visitantes.
Consejo profesional: Experimente con archivos PNG y JPG para descubrir cuál da como resultado una velocidad de carga de la página más rápida.
2. Armonía
Las personas se distraen instantáneamente con un mal diseño y harán clic fuera de su sitio si su imagen principal no armoniza con el resto de su diseño. Mantenga su estética sincronizada seleccionando cuidadosamente las fuentes, tamaños, colores, navegación, imágenes y texto.
Es útil hacer referencia a la identidad y las pautas de su marca al crear un concepto de imagen de héroe. No querrás que la gente pierda interés antes de empezar con las cosas buenas.
3. Organización
Parte de crear un diseño armonioso es tener una excelente organización. El contenido de la imagen principal debe tener una jerarquía y un flujo lógicos, por lo que cada pieza se basa en lo que vino antes. Esto es increíblemente importante para emparejar imágenes con copia.
Cuando una imagen relevante se combina con información, las personas pueden recordar el 65% de la información tres días después. Pero solo el 10% se recuerda solo a partir de la información. Asegúrese de que su mensaje sea claro y se conecte con sus imágenes. Es útil configurar una estructura alámbrica simple para la forma en que se organizará su imagen principal en la página.
4. Originalidad
Las fotos de archivo son una parte fundamental del marketing de contenidos, pero pueden ser más perjudiciales que útiles cuando se trata de imágenes heroicas. Si bien el 40% de los especialistas en marketing de contenido dijo que los gráficos originales los ayudaron a alcanzar sus objetivos de marketing, solo el 13% de los especialistas en marketing de contenido dijo lo mismo sobre las fotos de archivo.
Puedes dar rienda suelta a tu creatividad creando imágenes heroicas originales con Canva o inspirarte en Behance. ¿Le faltan fotos de calidad? Explore Unsplash o Pexels en busca de una variedad de fotos de alta calidad que se pueden utilizar con fines comerciales y no comerciales.
5. Coherencia
¿La mayor lucha para crear imágenes atractivas? El 43% de los especialistas en marketing dicen que los está produciendo de manera constante. Para tener un horario establecido, reserve el tiempo y los recursos que necesita para crear imágenes, incluso agréguelas a su presupuesto de marketing.
Si tiene poco tiempo, considere renovar sus gráficos antiguos. Es una forma inteligente de ahorrar tiempo y el 51% de las empresas la ha encontrado eficiente y eficaz.
No hay nada peor que aterrizar en una página web que parece haber sido creada en la burbuja de las puntocom. Parece incompleto y tienes miedo de hacer clic en cualquier cosa en caso de que te redirija a algún tipo de virus. Por otro lado, ser recibido por una hermosa imagen de héroe hace que quieras quedarte y explorar la página.
Como el primer punto de contacto que las personas tienen con su marca, las imágenes de héroe tienen un gran impacto en la percepción de su marca, el tráfico del sitio web y la conversión. Así que es hora de poner en práctica sus nuevos conocimientos y diseñar uno que atraiga a las personas desde el primer vistazo.
