Cualidades de una imagen de fondo de un sitio web de página completa

Estamos tratando de crear una página web con un fondo de tamaño completo. Las siguientes páginas son nuestra inspiración:

Hemos creado una página con algunas imágenes propias llamativas, pero siempre parecen planas, sin vida y no le dan a la copia ninguna oportunidad de destacar.

Parece que hay algunas cualidades comunes de las imágenes que funcionan que no podemos identificar.

¿Cuáles son las cualidades de las imágenes, o las técnicas utilizadas en esas imágenes, que permitirían que se utilicen de manera más eficaz como fondo de página web de pantalla completa?

Creo que las respuestas aquí son bastante buenas, pero un punto para agregar: para muchas buenas fotos, ves "un tono blanco" y "un tono negro" y el resto generalmente está bien distribuido entre estos dos sin tener la apariencia de accidentalmente inclinarse demasiado a cualquier banda de tono (junto con los elementos compositivos mencionados en las respuestas). Así evitan ser planos u opresivos. Sin embargo, las muestras que veo aquí han tomado eso y lo han apretado un poco en los extremos para reservar el blanco y negro para el texto.

Respuestas (2)

Para abordar su propia situación, la primera pregunta podría ser qué espera lograr con la página de destino. ¿Es para exhibir y resaltar las cualidades estéticas de un producto, es para dar una idea de la calidad del trabajo de uno, tal vez simplemente para captar la atención del espectador el tiempo suficiente para atraerlo? Un propósito le permite desarrollar una función clara de la imagen que es esencial para la forma en que se muestra, las técnicas de posproducción que utiliza para mostrar énfasis y un mundo de otras opciones.

Es un poco difícil abordar su situación particular sin ver una imagen, pero hablando de manera más general, creo que hay una variedad de características que se combinan con imágenes llamativas para crear páginas de destino exitosas.

Fragmentación visual

La fragmentación visual es una forma de separar distintas áreas de contenido contrastantes y permite que un espectador capte más fácilmente la narrativa que está tratando de presentar en una página de destino. Los tres ejemplos que presentó lo hacen hasta cierto punto, mientras que tal vez podría argumentarse que el sitio web de agosto no lo hace por completo. Sin embargo, diría que debido a esto, la página de destino de agosto podría ser la composición más débil de los tres ejemplos. Esta técnica, en combinación con imágenes de fuerte contraste, combina el contenido emocional asociado con la fotografía con una comprensión rápida de lo que usted, su sitio web, su empresa, etc., está tratando de representar.

Puntos focales

Las imágenes se editan de una manera que dirige la mirada del usuario con una intención específica mediante el uso de un punto focal de dibujo inmediato. Esto casi siempre se hace de manera exagerada porque el tiempo en las páginas de destino es más crítico. Hay estudios recientes que muestran que más de la mitad de los espectadores iniciales abandonarán su página web en 8 segundos si no pueden inferir profesionalismo o si no hay claridad en la experiencia. Esto requiere que use puntos focales para dirigir el ojo de una manera clara y controlada.
Cabina Acantilado

Estas dos imágenes muestran usos marcados de áreas contrastantes entre luces y sombras. Tu ojo mira primero a la parte llamativa de la imagen y luego inmediatamente al texto.

Señales direccionales

Sorpresa sorpresa. Las mismas imágenes que tienen puntos focales deslumbrantes también tienen caminos sugeridos para que los sigan sus ojos. En el primer caso, el techo usa una diagonal para crear un camino hacia el texto y el segundo usa un arcoíris muy sutil para que lo sigas hasta el encabezado. Nuevamente, esto se usa porque el tiempo es una prioridad en las páginas de destino y si puede controlar la ruta que sigue el espectador, puede moldear la experiencia de manera más eficiente.

En general, diría que no es solo la imagen lo que crea una página de destino efectiva, sino su capacidad para posicionar otro contenido para satisfacer la intención de la página de destino. ¿Qué está tratando de decir y cómo se puede usar la imagen para comunicarlo de manera efectiva?

Una cosa que tienen esas tres imágenes es la profundidad: el cielo entre las montañas, la distancia al albergue de esquí y el uso de la profundidad de campo en la última.

Algo en lo que estoy trabajando en este momento también tiene un sentido de profundidad, que parece funcionar bastante bien. Usaré un panel pálido a la izquierda para el texto o continuaré con el blanco. Pero debido a que la imagen ya tiene una sensación de profundidad, el texto siempre aparecerá justo al frente. Puede ver que el texto de esta reducción parece estar sobre una placa de vidrio frente al automóvil.

En la versión de tamaño completo, la imagen principal del automóvil está ligeramente borrosa porque la imagen ha cambiado de tamaño. Eso efectivamente lo desenfoca, lo que también mejora la sensación de profundidad. Como el texto es hermosamente nítido en comparación con todo lo demás, se trae al frente.

Imagen publicitaria de MGRover

Esta imagen fue creada originalmente alrededor de 2002 por MG Rover como una foto publicitaria para su modelo TF.