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?
website-design
images
background
design-principles
Zach Saucier
fuente
fuente
Respuestas:
¿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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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:
fuente