10 imágenes principales del héroe del sitio y las mejores prácticas para crear las suyas propias

La sección Hero juega un papel clave en el diseño de un sitio web. Las imágenes de héroes del sitio web pueden tener un gran impacto en los usuarios. Es lo primero que veo en un sitio que obtengo. Es el punto de partida de una curiosa exploración o una fuga rápida de un sitio web. Pero, ¿qué le da a Hero Image un poder para crear o romper un sitio web? ¿Cuál es el papel de tal imagen en un sitio web? La imagen del héroe es el primer elemento (y prominente) que los usuarios ven cuando llegan a un sitio web. Entonces, debido a su posicionamiento y tamaño, la imagen del héroe es más que un elemento de diseño, entre otros, es una poderosa herramienta de comunicación.
Veremos algunos ejemplos de sitios web donde Hero Image hace que ese sitio sea un éxito. Y conduciendo a los objetivos deseados. Entonces, en pocas palabras, fotos del sitio del héroe:
Captura la atención de los usuarios
Implica elementos emocionalmente convincentes para que las personas interactúen con el contenido del sitio web
Bienvenido a los visitantes con un mensaje que está estrechamente vinculado a la personalidad de la marca
Resume de qué se trata el sitio web
Las imágenes anuncian qué contenido verá a los visitantes en las secciones a continuación.
Presentan la propuesta de valor única de la compañía
¿Qué es exactamente un héroe? Veamos qué es exactamente un héroe y qué contiene. Un héroe del sitio web es la imagen introductoria en la parte superior de las páginas de un sitio web. Por lo general, se refiere a una imagen, pero también está relacionado con el texto (título, subtítulos y urgencias). Para organizar los elementos en esta parte de las páginas del sitio web, debe considerar algunas buenas prácticas para las imágenes de héroes del sitio web. Las 10 imágenes principales con héroes de sitios web en proyectos exitosos en las próximas filas, haremos una lista de las primeras 15 secciones de héroes más atractivas en los sitios web: 66nord
Este héroe está de acuerdo con el tema del sitio web: destinos nórdicos. Muestra imágenes en un carrusel, una diapositiva para cada destino incluida en las ofertas de 66nord. Las imágenes son relevantes y expresivas e invitan a continuar explorando el sitio web. Soy un resumen rápido de la selección de la compañía de la compañía que vale la pena considerar para un viaje. El texto (título y subtítulo) se centra, centrándose en el mensaje principal. Además, en la parte inferior de estas imágenes de héroes, una barra de búsqueda invita a los lectores a lanzar una búsqueda del tipo de viaje que desean.

Gente de Poco
Este es un héroe más inusual, con poco o ningún texto aplicado sobre él. Todo el texto está representado por un menú corto y un logotipo de la empresa. En la parte inferior del héroe, la lista de íconos de intercambio social hace posible correr la voz sobre las personas de Poco. El héroe es simple, pero fuerte y deja una impresión duradera en los lectores. Da la bienvenida a los usuarios con una imagen inusual, al tiempo que involucra una personalidad de la marca que es difícil de olvidar. Los colores están de acuerdo con la marca y el logotipo y crean el contraste perfecto entre la imagen y el bit de texto colocado en ella.

Este héroe sugiere el sitio web del restaurante. También incluye la textura, que ofrece una aparición especial a esta sección superior en la página. Parece haber sido creado expresamente para aumentar los pedidos y reservas en el restaurante. Todos los demás contenidos del sitio web se desarrollan de acuerdo con la imagen del héroe y se considera que aumenta las conversiones. El texto incluye la marca y un breve subtítulo informativo, útil para las personas que desean probar la experiencia de Michi Ramen.
Bóveda de pizza

Esta pizzería “muestra” sus productos: Pizza on Wood, que se presenta elocuentemente en el héroe del sitio web, por un incendio en el fondo. El texto crea un buen contraste con la imagen de fondo, y CTA está claramente definido en la página, como invitada a hacer clic en el enlace.
Arquitecto Tom Cole

Otra imagen sorprendente del héroe es la del sitio web de Tom Cole Architect. Se juega como una ventana a un paisaje específico, todo al hacer frente a la arquitectura y el diseño. El esquema de color se crea de tal manera que proporciona contraste con el texto. El texto es el que llama la atención de los usuarios al mensaje del sitio web y a otras secciones de las páginas del sitio web. La imagen de Tom Cole Architect Hero es impresionante, con una gran fuerza de convicción. El logotipo ocupa la parte central de Hero, centrándose en su icónica marca y representación.
Esta imagen de héroe presenta un ramo de flores en colores brillantes. Aporta regalos especiales a la atención de los compradores potenciales, de manera atractiva. Cuando te reciban en un sitio web con un ramo de este tipo, solo puedes comprar algunas flores. Con entrega en línea. El texto que acompaña a la imagen es solo un resumen simple de las ofertas de la compañía. Está acompañado por una CTA que lo invita a comprar desde el sitio. Tiene colores visibles fuertes, fácil de ver desde el principio, desde la primera visita al sitio. Un solo clic y convierta la imagen principal en un verdadero ramo …

Construcción de Harper
Esta imagen de héroe pertenece a un sitio de construcción, como se esperaba. Habla relevante sobre los edificios residenciales y cómo se construyen de acuerdo con un plan. El texto en el centro de la imagen de héroe enfoca la atención en un mensaje llamativo: el complejo residencial está construido con compradores, no para ellos. De esta manera, los servicios de construcción son personalizados de acuerdo con las necesidades de las personas. La casa de sus sueños se convierte en realidad una vez que se ha construido con Harper Construction Company. Prince’s Hotel

Este héroe involucra un carrusel de imagen, todo relacionado con Prince Hotels and Resorts. Los esquemas de color colocan la marca como de lujo, desde el principio. Transmiten salud y comodidad y transmiten el poder de la marca. Algunas diapositivas implican un cierto brillo, aún más refinado a medida que cae en un aspecto de lujo del hotel en la foto. El texto está marcado en blanco, creando un claro contraste con el marrón brillante en el fondo de la imagen. Ver esta imagen de héroe ofrece una impresión duradera de comodidad, lujo y bien a la que es difícil resistirlo.
Dra. Laura Petvet

Otra imagen de héroe que pertenece a una clínica de mascotas: la imagen inspira confianza en su cuidado por los animales y la profesionalidad de los servicios de la clínica de mascotas. Pero el mensaje central no es lo suficientemente visible como para crear el efecto deseado en los lectores. Sin embargo, el mensaje continúa en la parte inferior de la imagen del héroe, donde los visitantes tienen detalles sobre los servicios clínicos. El esquema de color usa tonos neutros, en comparación con los de la imagen de héroe. Por lo tanto, la imagen del héroe juega su papel y conecta emocionalmente a los usuarios con la compañía (clínica de mascotas) .Woorank
En comparación con ejemplos anteriores, se centra más en el texto que en la imagen en el sitio web de Hero. Es un sitio de negocios (una empresa de SEO, para ser más claros), por lo que aborda la lógica de más usuarios que sus sentimientos. Debe convencer, tanto por la imagen como por el texto, que explica en gran medida por qué es una buena idea elegir Woorank. En la sección Hero del sitio web, el texto está en blanco, que contrasta con el azul del fondo. El diseño es minimalista, lo que significa que el análisis con Woorank se centra en el láser para superar la competencia de las empresas. ¿Qué hace que los ejemplos anteriores sean una buena base para crear sus propias imágenes de héroes del sitio web?

Hay 4 tipos distintos de imágenes con héroes:
Imágenes de productos

Imágenes contextuales
Imágenes no contenciosas

Autores / fundadores

Ejemplo no. 1 tiene una imagen contextual como imagen de héroe para el sitio web. Ejemplo no. 6 tiene una imagen de producto como una imagen de héroe para Florists.com. Ejemplo no. 2 usa una imagen no contextual para el sitio web de Hero. También puede ser relevante para un héroe que presenta a su autor en la primera imagen del sitio web. Dependiendo del tipo de imagen de héroe se considera adecuada para su sitio web, puede continuar buscando las mejores prácticas relacionadas con ese tipo de héroe. Las mejores prácticas para las imágenes de productos en el héroe de un sitio web Si decide que la imagen de un producto funciona mejor en el héroe de su sitio web, aquí hay una lista de qué considerar para esa imagen: la imagen debe ser lo suficientemente clara como para que las personas sean capaz de ver el producto en sus detalles
Debería sacar a la luz la alta calidad del producto (en nuestro ejemplo anterior, las flores son frescas y en colores brillantes)
La foto / imagen debe ser clara (no tiene que ser poco clara o pixelada)
Esta imagen debe tener un CTA visible al lado (si presenta el producto del producto en el sitio web de Hero, es inútil decir que desea que la gente lo compre)
La presentación del producto debe deducir que los usuarios no pueden perder los beneficios de
La imagen del producto debe representar a su empresa (debe usar una imagen única de usted)
Ejemplo puede personalizar por usted mismo:
Las mejores prácticas de Coffee Colibri para imágenes contextuales en un sitio de héroes Si una imagen contextual es mejor para su sitio de héroes, debe considerar estas buenas prácticas:
La imagen debe involucrar a los lectores y tener relevancia para ellos a nivel emocional debe ser claro, dando exactamente el contexto que desea agregar a su mensaje.
La imagen seleccionada debe traer las ventajas de los servicios o suscripción de su empresa a ciertos servicios (dependiendo del nicho del sitio web)
Debe seleccionar la imagen con cuidado para que sea relevante y significativo para todo el sitio web.
La imagen contextual debe integrarse perfectamente en la identidad de marca de la compañía y expresar elocuentemente esa identidad de marca
Ejemplo puede personalizar por usted mismo:

Las mejores prácticas de yoga para imágenes / ilustraciones no presenttuales en un sitio de héroes en el caso de una imagen no contxtual, puede pensar en incluir una imagen inusual o algunas ilustraciones. Eche un vistazo a las mejores prácticas que necesita saber al insertar una imagen / ilustración no presenttual en su sitio de héroes:
Puedes sentirte libre de experimentar ilustraciones
Asegúrese de que las ilustraciones sean lo suficientemente visibles a través de gráficos y colores para que los usuarios no se pierdan
Asegúrese de que una ilustración que haya seleccionado sea fácil de conectar con el texto principal del sitio de héroes para que no haya interrupciones en la transmisión del mensaje a los usuarios
Puede sentirse libre de incluir elementos para atraer lectores a nivel emocional.
Ser lo suficientemente innovador para capturar a los usuarios con ilustración
Cree una coherencia entre la ilustración y el diseño completo del sitio del héroe (por ejemplo, a través del esquema de color)

Aquí hay un ejemplo que puede intentar personalizar para usted: las mejores prácticas comerciales de Colibri para fotografías de autor en un sitio de héroes, como sitios web de cartera o sitios web de reanudación, podría ser apropiado insertar una foto del autor en el sitio web de Hero. Las mejores prácticas en este caso:
La foto debe ser clara y tener el tamaño óptimo para una imagen de héroe
La foto debe presentar una persona sonriente y confiable
El fondo debe servir solo para traer mejor persona en la foto
La descripción del sitio web de CV / Portfolio debe seguir inmediatamente después del héroe, por lo que no hay desconexión entre la fotografía de la persona y la descripción de sus habilidades
Ejemplo (desde un sitio de CV) Puede personalizar con su propia foto:
CV Colibri Principios genéricos que aseguran que su imagen sea adecuada para su sitio web para todo tipo de héroes anteriores, hay una breve lista de principios que debe considerar para diseñar el héroe perfecto de un nuevo sitio web:
Asegúrese de usar imágenes de alta calidad (las imágenes poco claras o pixeladas no son una buena opción: prueban la falta de profesionalismo y no contribuyen a fortalecer la confianza de los usuarios).

Asegúrese de que la imagen del héroe se vea bien en todos los dispositivos (escritorio y dispositivos móviles) sin cambios en la calidad de la imagen.
Puede probar con diferentes versiones de imágenes de héroes, para ver cuáles de ellas se convierten mejor. Las pruebas A / B pueden ayudarlo a encontrar la mejor opción para su sitio de héroes y garantizar la máxima eficiencia de imagen de héroe.
Use Text Companion (título y eslogan) que coincida con la sección Hero de su sitio web y la imagen que seleccionó. Use un impulso importante. El mensaje que le da la bienvenida a los visitantes debe llevar a una acción de su parte: incluya un botón de urgencia visible que haga que los usuarios tomen las medidas que desea hacer.
Diseñe al héroe con contraste entre el texto y el fondo, para que el texto sea suficientemente visible y fácil de leer. Si el contraste que crea al elegir un cierto color para el texto no es suficiente, también puede cambiar la imagen (por ejemplo, aplicar una superposición).
Diseño con autenticidad en mente: la imagen del héroe debe ser representativa de la marca, de manera creíble.
El texto debe incluir la propuesta de valor única para la empresa en algunas palabras concisas.

Evite las fotos de archivo, no son buenas para la autenticidad y la confianza. Debe ingresar su propia imagen en la sección Hero del sitio web, esto aumentará la comunicación auténtica con los lectores.
Ejemplos de los que puede comenzar ahora, una vez que esté familiarizado con los principios genéricos para las secciones de héroes en los sitios web, puede volver a las primeras 10 secciones de héroes exitosas que hemos enumerado en la primera parte del artículo. Trate de comprender qué principios respetan y qué los hace convertir. Luego aplique las mismas reglas a su propio héroe y vea qué resultados. Prime: Eche un vistazo a las técnicas utilizadas para este sitio de héroes: