¿Cómo elijo una buena foto de portada para mi sitio web?

22

Ha estado de moda tener grandes imágenes de fondo con relativamente poco texto sobre ellas para encabezados e introducciones a las páginas web, incluido el inicio de las publicaciones de blog. Podría dar innumerables ejemplos de esto, pero creo que sabes exactamente de lo que estoy hablando.

¿Qué hace que una foto de portada / fondo sea efectiva? ¿Qué debo tener en cuenta al buscar imágenes o planear tomar y editar algunas para mi sitio?

Zach Saucier
fuente
1
Ahora está de moda tener grandes VIDEOS de fondo.
user11153
1
Bien hecho, una de las mejores preguntas de respuesta propia en el sitio (no recuerdo ninguna otra, por lo que posiblemente sea la mejor). :)
Dom

Respuestas:

30

¿Realmente necesitas seguir la tendencia?

Nunca hagas algo porque es una tendencia. Haga las cosas porque son buenas para la experiencia del usuario, porque eso es lo mejor para su empresa y su diseño. Piensa realmente en las implicaciones que tendrá agregar una imagen grande a tu sitio y sopesa las otras opciones que tienes. No tiene que usar esta técnica para tener un sitio web "moderno" .

Dicho esto, hay muchas cosas a tener en cuenta al elegir una imagen de fondo para su sitio web. Como esta respuesta es muy larga, aquí está la lista en resumen; Doy más detalles sobre cada uno, incluidos los ejemplos a continuación.

  • Asegúrese de que la imagen esté relacionada con el contenido.
  • Asegúrate de que la imagen diga lo que quieres
  • Asegúrese de que la imagen sea relativamente única
  • Usa una imagen de cosas reales
  • Asegúrese de que la imagen funcione con su diseño
  • Asegúrese de que la imagen siga buenas reglas de fotografía y diseño
  • Asegúrese de que la imagen siga su esquema de color
  • Limite la varianza dentro de la imagen.
  • Asegúrese de que el tamaño de la imagen sea lo suficientemente grande
  • Asegúrate de tener derechos para usar la imagen
  • Asegúrese de que la calidad de la foto sea alta

Asegúrese de que la imagen esté relacionada con el contenido.

Una foto no relacionada no hará más que dañar. Al igual que cualquier cosa en su diseño, si no encaja directamente con el propósito de su sitio web, elimínelo. Asegúrese de que esté directamente relacionado con el contenido que lo rodea , no con algo posterior. La imagen debe tener un contexto adicional aportado por algún texto o diseño para ayudar a los usuarios a comprender que es un sitio y no solo una imagen estática.

ingrese la descripción de la imagen aquí


Asegúrate de que la imagen diga lo que quieres

Todas las imágenes tienen una connotación basada en el contenido de la imagen y su estilo. Asegúrese de que la imagen se ajuste al sentimiento que espera transmitir, así como a la marca. La imagen debe transmitir una comprensión adicional más allá de lo que proporciona el texto que la rodea. También asegúrese de que ayude a construir su marca de la forma en que desea que se construya.

ingrese la descripción de la imagen aquí

No hace falta decir que la imagen debe ser visualmente atractiva. Más detalles sobre los rasgos para que la imagen sea atractiva se encuentran a continuación.


Asegúrese de que la imagen sea relativamente única

Las imágenes personalizadas son mejores que las originales, siempre que la calidad sea al menos la misma. Eso significa que debe evitar imágenes de archivo muy conocidas siempre y cuando la alternativa sea igual de alta y adecuada. Sin embargo, ser absolutamente único no es tan importante como tener una imagen excelente y apropiada.

ingrese la descripción de la imagen aquí


Usa una imagen de cosas reales

Hay algo en una imagen real (incluso una versión altamente editada) que tiene una gran influencia en nosotros como humanos. Nos gusta ver cosas reales. Siempre que sea posible, opta por una imagen real sobre algo generado por computadora a menos que no se ajuste totalmente al contenido o al estilo que estás buscando.

ingrese la descripción de la imagen aquí

Mostrar a las personas tiene un efecto aún mayor, que puede ser tanto bueno como malo. Si se hace correctamente, puede hacer que los usuarios sientan que la experiencia es más real y personal. Si se hace mal, puede hacer que parezca im personal y barato. Más sobre eso aquí .

Las caras en particular llaman la atención, así que asegúrate de que sean una cara apropiada y ponlas solo donde realmente importa. A veces, ponerlos dentro de otros contextos, como un libro, iPad, computadora, etc. puede ayudar. Otras veces es más apropiado recortar las caras (piense en un sitio web de ropa o un maniquí). Mostrar la cara de una marca / portavoz es muy efectivo si se hace bien, lo recomiendo si puedes.

ingrese la descripción de la imagen aquí


Asegúrese de que la imagen funcione con su diseño

El flujo de usuario y el diseño del sitio son más importantes que cualquier imagen que pueda elegir. Créalos primero. Si ese mejor diseño y flujo tiene un poco de espacio abierto en la parte superior, considere agregar una imagen.

Asegúrate de que ninguna parte importante de la imagen esté cubierta por el contenido que tienes. Use pautas visuales para ayudar a guiar a los usuarios al contenido que desea que vean (más sobre esto en la siguiente sección).

ingrese la descripción de la imagen aquí


Asegúrese de que la imagen siga buenas reglas de fotografía y diseño

Las imágenes deben seguir las reglas básicas de la fotografía, incluida la regla de los tercios , hacer uso de líneas visuales, enfocarse bien en el contenido principal, enmarcar correctamente el tema, tener un buen fondo y tener simetría y patrones, entre otras cosas. Para obtener más información al respecto, consulte aquí o busque más recursos en línea.

Estos principios darán más propósito a la imagen al ayudar a llamar la atención sobre las partes importantes de la imagen y el contexto que la rodea.

buenas reglas de imagen


Asegúrese de que la imagen siga su esquema de color

Todos los sitios web deben tener una sensación unificada, incluido un esquema de color. Ya sea que elija o no el esquema de color primero y luego elija la imagen o elija la imagen y luego el esquema de color ( herramientas como esta pueden ayudar con esto último), asegúrese de que los colores de la imagen se ajusten a su esquema de color general. A veces, lavar una imagen y luego aplicar un filtro de color puede funcionar bien.

descr


Limite la varianza dentro de la imagen.

No hagas que la apariencia visual esté ocupada. Tener un montón de colores y objetos en la imagen hace que sea difícil colocar texto sobre él y ajustarlo al diseño. Como se dijo antes, cree primero el contenido y luego elija la imagen.

Agregar superposiciones parcialmente transparentes, oscurecer una imagen o borrarla en blanco y negro antes de agregar un filtro de color puede ayudar a reducir el ruido innecesario. Además, los colores de fondo se pueden aplicar detrás del texto o en un elemento para ayudar con la legibilidad también.

ingrese la descripción de la imagen aquí

La imagen de arriba oscurece la imagen original y usa algunas sombras en los bordes para reducir el ruido. La imagen de abajo parece usar una superposición oscura parcialmente transparente para hacer lo mismo.

ingrese la descripción de la imagen aquí


Asegúrese de que el tamaño de la imagen sea lo suficientemente grande

No hace falta decir que la imagen utilizada debe ser lo suficientemente grande como para cubrir cada pantalla sin estirarse. Eso significa que para pantallas de tamaño completo necesitamos imágenes con una resolución mínima de 1024 x 768 píxeles, pero es mejor apuntar a al menos 1200 píxeles de ancho. También podemos ahorrar cargar imágenes grandes para pantallas más pequeñas al servir diferentes tamaños de imágenes según la resolución, más sobre eso aquí . Intente optimizar el tiempo de carga de la imagen sin embargo, mientras no conceda calidad de imagen.


Asegúrate de tener derechos para usar la imagen

Si no puede usarlo, no lo use . Si no sabe cuáles son los derechos de autor de la imagen , búsquelos, ¡pero no los use hasta que sepa! Lo último que quiere hacer es ser demandado por infracción.


Asegúrese de que la calidad de la foto sea alta

No use imágenes granuladas o borrosas. No use una foto con contenido cuestionable o no relacionado. Mantenlo simple pero (principalmente) real. Piense detenidamente en las partes buenas y malas de cada imagen que considere y no acepte algo que sea mediocre.

Recursos adicionales:

Zach Saucier
fuente
44
Buena respuesta. Probablemente habría sido demasiado sucinto: "Asegúrese de que sea una buena foto y que sea relevante para las necesidades y objetivos de su sitio" :)
DA01
@ DA01 Aunque estoy totalmente de acuerdo con esa afirmación, algunas personas necesitan un poco más de ayuda :)
Zach Saucier