Share
Las imágenes fotográficas atraen nuestra atención y provocan una respuesta casi instantánea cuando las encontramos. Por lo tanto, son una parte importante de cualquier sitio web que creamos. Las fotos desempeñan un papel importante en la determinación de nuestra primera impresión, pero también pueden decirnos de qué trata el sitio y pueden ser un factor muy importante para ganarse la confianza..
Cuando se usan correctamente, las fotos son muy efectivas y pueden enviar rápidamente el mensaje deseado a su audiencia. Sin embargo, usar las fotos equivocadas puede degradar la experiencia de los usuarios. ¿Cómo elegimos los correctos??
Tanto como nos preocupamos por todos los aspectos del sitio web que estamos creando: contenido, colores, tipografía, jerarquía, arquitectura de la información y otros detalles, las fotos merecen tanta atención en términos de facilidad de uso y la experiencia general de los usuarios en su sitio..
Tratar con fotos en los sitios web debe ser algo que los diseñadores entiendan y apliquen de manera efectiva, por lo que este artículo le indicará la dirección correcta y le mostrará cómo pensar en las fotos cuando decida utilizar una en su próximo proyecto web.
Las personas escanean pantallas basadas en experiencias y expectativas pasadas. La parte superior izquierda es el punto de inicio más común para los ojos de los usuarios, aunque esto depende de los patrones de lectura de su cultura. Si está utilizando una foto grande en la página, inmediatamente llamará su atención y los alejará de su tendencia habitual..
Estoy seguro de que no discutirás conmigo que una foto en una página web es contenido, ¿Pero realmente lo tratas como tal? ¿Lo usas solo como complemento o como buen relleno de contenido? ¿Has considerado todos los aspectos de esa pieza de contenido en particular? ¿Ha evaluado la foto correctamente antes de elegir usarla? ¿Has considerado a los usuarios modelos mentales y el impacto que la foto tendrá en ellos? ¿La foto proporciona información significativa o ayuda para la tarea actual de un usuario? Estas son solo algunas de las preguntas que debe responder antes de usar una foto en una página web..
Las fotos nunca deben usarse solo para “animar” la página web.
He visto a muchos diseñadores simplemente colocar una hermosa foto en pantalla completa en una página web, lanzar un lema o un "Llamado a la acción" y declararlo hecho. En muchos casos, la foto no ha sido evaluada, el diseñador simplemente estaba siguiendo una tendencia en curso. Veamos cómo evaluar una foto antes de usarla en su sitio..
Hay algunas cosas que debe considerar al decidir elegir una foto en su diseño.Asumiré que ya sabes evaluar. aspectos fundamentales De una foto, aquellas que son: calidad, tamaño, composición y exposición. Calidad en términos de resolución requerida, tamaño de la imagen y, preferiblemente, su orientación para el uso previsto, composición efectiva y recorte de la foto para llamar la atención, y sujetos expuestos adecuadamente en la foto.
Una vez que haya hecho eso y la foto haya pasado la prueba fundamental, puede continuar explorando las opciones para su uso previsto..
Nuestro cerebro procesa imágenes 60,000 veces más rápido que leer un texto. - Mike Parkinson
Sobre todo una foto debe ser útil. No hay nada de malo en usar una foto como marcador de posición para alegrar una página o llenar algo de espacio, pero incluso entonces considere el contexto en el que está usando esa foto. Las fotografías útiles, útiles y que provocan la reflexión son las que necesitan nuestra atención especial. Fotos útiles deben
Un hermoso ejemplo de una foto útil en diseño web es el sitio web de Square..
Puede decir de inmediato que esta imagen ha sido tomada de manera profesional (mire las manos y las uñas). Lo más importante es que comunica directamente de qué se trata el producto y lo fácil que es utilizarlo. Foto muy útil, educativa e instructiva..
Otro ejemplo de una foto útil es el sitio web de Pencil. Al igual que en el ejemplo anterior, esta foto muestra exactamente de qué se trata el producto (un lápiz), dónde y cómo se puede usar (aplicación para iPad).
El sitio web de Woodster también hace un buen uso de las fotos para explicar el producto. Está claro que su producto se utiliza para elevar tu Mac, pero también proporciona conexiones USB útiles a la mano. Imagina este producto aislado sin contexto (el iMac). ¿Crees que la foto sería tan útil como esta??
Grovemade hace un excelente trabajo presentando una colección de su producto en una sola foto de fondo en pantalla completa. Es bastante obvio que fabrican accesorios de oficina de madera de alta gama. Esta foto no solo es útil, sino que también es muy efectiva y emocional al mismo tiempo. Llegaremos a fotos efectivas y emotivas en un momento..
Si observa los ejemplos anteriores, notará que todas las fotos son bastante obvias, se explican por sí mismas y que comunican muy bien el mensaje deseado. No tiene que mirar mucho para averiguar de qué trata el producto / servicio / sitio. Estas son todas las características de una foto útil en diseño web..
Una foto efectiva es la que solicita una acción, influye en nuestro comportamiento y comunica claramente el mensaje deseado. En particular, las fotos de productos buenas y efectivas deberían alentar a los usuarios a comprar esos productos. Hemos visto en los ejemplos anteriores que las fotos utilizables son realmente efectivas, ya que hacen que el producto sea deseable y nos alientan a comprarlas. Cada vez que vemos una foto que provoca un cambio en nuestro comportamiento, podemos describirla como si fuera eficaz.
Si te fijas en el sitio web de Mobility y en esos jugosos auriculares rojos, te atraen de inmediato y es posible que desees comprarlos.!
Apple es conocida por el perfeccionismo en todo lo que hacen. La página de inicio del iPhone está llena de fotos de productos brillantes y deseables que hacen que quieras tener uno de sus productos..
Otro ejemplo de una foto efectiva es el sitio web tsptr. ¿Observa cómo el hombre de la foto está mirando hacia abajo como si hubiera algo más abajo para explorar? De hecho hay algo debajo.
El sitio web de Mapquest no solo transmite emoción con las imágenes, sino que también utiliza la dirección inteligente de la mirada para guiar a los usuarios hacia el contenido importante de la página, en este caso, el enlace de descarga móvil a la izquierda..
Poco People usa una foto divertida y entretenida en su página de inicio. Inmediatamente se puede decir que hay algo extraño en ello. Debido a eso, y al buen uso de los colores, las luces y la exposición, su interés se despierta de alguna manera para ver de qué se trata este sitio..
El sitio web Colosal presenta una foto grande en la página de inicio que muestra lo que hacen (pintan a mano grandes anuncios y murales) y cómo lo hacen (mira al hombre de la derecha). Lo interesante de esta foto es la gente que pasa por la izquierda. Se ven entusiasmados con lo que están presenciando, lo que lo involucra como observador y hace que toda la foto y el mensaje sean emocionantes y efectivos..
Una foto emotiva debe dar como resultado una respuesta emocional del espectador. Ya sea simplemente agradable de mirar, o calmado, o perturbador de una manera que nos obliga a tomar algo de acción, o divertido y entretenido, o atractivo y deseable, siempre que la foto atraiga a nuestras emociones de alguna manera tendrá mayor impacto que uno que no lo hace.
Frogdesign presenta un estudio de caso en su sitio web sobre FEMA y la gestión de socorro en casos de desastre. La foto principal, combinada con un buen lema, es muy efectiva y emotiva. Cuenta una historia y muestra peligro, y por eso nos sentimos apegados a ella..
La foto principal del sitio web de Breath es muy relajante. Combinado con un buen eslogan y una mirada adecuada, la mujer en la foto transfiere su facilidad para respirar al espectador. Observe la etiqueta del botón "Inhale"?
La foto principal del sitio web de Shaun Groves cuenta una gran historia sobre él. Transmite felicidad, confianza, esperanza, amistad y anticipación al espectador que se apega a ella y siente empatía por su trabajo..
Además de la utilidad y la eficacia de la selección de fotos de Relay Foods, también traducen las emociones sobre el servicio que ofrecen. Las mujeres de la izquierda y la derecha muestran su alegría al trabajar para ellas, y como Relay Foods se trata de productos naturales, las expresiones faciales de las mujeres en estas fotos están alineadas con el mensaje de su marca / servicio..
Hay siete (u ocho) emociones básicas:
Son universales y (generalmente) se comunican mediante la expresión facial y los gestos físicos. Si está utilizando fotos de personas para comunicar su mensaje deseado, tenga cuidado con estas siete emociones básicas y decida cuáles son las que conducen a su público objetivo.
Las fotos de personas de cerca captan inmediatamente nuestra atención y ayudan a desencadenar nuestras emociones, lo que las convierte en un poderoso elemento de diseño.
Cuando vemos una cara, se nos activa automáticamente sentir algo o empatizar con esa persona
Ya hemos visto fotos de personas en ejemplos anteriores, pero vamos a explorarlas un poco más..
A pesar de que la foto Build Fire de una mujer no nos dice nada sobre su producto, agrega personalidad a su producto y es una forma útil y efectiva de captar la atención de los usuarios. El mismo efecto no se lograría si solo hubiera una foto del iPhone en lugar de la mujer..
Si alguna vez decides usar una foto grande en tu sitio web personal, te saludo, he estado allí. ¡Pero ten cuidado! Una pequeña expresión facial puede hacer una gran diferencia en el mensaje que está comunicando. Daniel Eckler hace un muy buen trabajo presentándose ante el público. Su expresión facial comunica confianza, tranquilidad y confianza..
La gente puede decir cuando una sonrisa es real o falsa.
Todo el mundo sabe lo que pasó con el WTC. El sitio web del 9/11 Tribute Center está dedicado a las historias de quienes estuvieron allí. El hombre de la foto nos mira directamente y nos ayuda a relacionarnos con el tema del sitio que nos invita a la comunidad..
Nota: esto se hace sin ser confrontacional; una linea fina!
Otro gran ejemplo de traer el mensaje con una foto de rostro humano de cerca es el sitio web de Conservación. El hombre Kayapo en la foto comunica autoridad, coraje y aprecio..
Como dijo Susan Weinschenk, las fotos de cerca son más persuasivas en un sitio de caridad, y eso es cierto. Save the Children presenta una foto de cerca de un niño necesitado que se alinea perfectamente con el lema y el tema del sitio. Observe la dirección de la mirada hacia el botón de donación.?
A pesar de que hemos visto muchos ejemplos excelentes de cómo usar fotos en nuestro diseño web, estos pueden ser mal utilizados fácilmente. Por eso les voy a mostrar algunos ejemplos de cómo no usar fotos y que evitar.
Foto no relacionada - un estudio de diseño web que ofrece servicios "a medida" utiliza una foto de fondo no relacionada (hilos de colores) que crea una primera impresión incorrecta y envía mensajes incorrectos al visitante. Hay significado aquí, pero es una metáfora oscura.
Una solución mucho mejor aquí sería usar un color sólido o una foto de grupo de equipo. Además, los productos digitales no se pueden adaptar..
Un software como servicio que ofrece herramientas de colaboración para equipos usa una foto de una mujer preocupada en el trabajo. Esto podría crear la impresión de que está preocupada por el mismo software que promueve el sitio. Una solución mucho mejor aquí sería mostrar las capturas de pantalla del producto real o mostrar a una mujer feliz usando su producto.
Fondo borroso de la foto - solo se utiliza como marcador de posición decorativo, no comunica nada sobre el sitio, por lo que no tiene ningún efecto real. Le aconsejaría que evite lo más posible los fondos de fotos borrosos, puede hacerlo mejor que eso;)
Otra foto totalmente no relacionada con el tema del sitio. A pesar de que las palabras "hecho a mano" y "taller" pueden estar relacionadas con la foto en sí, no comunica el tema real del sitio. Brand Bat tiene que ver con la creación de estrategias de marca y, con la serie de fotos relacionadas con el procesamiento de madera, se les está perdiendo una gran oportunidad para comunicar su mensaje..
Elección incorrecta de la foto - ¿Cuál fue tu primera impresión cuando viste esta foto? Dos personas felices en una cafetería le ayudarán a que su negocio tenga éxito en línea. ¿Derecha? No, una agencia de diseño web de servicio completo en realidad ofrece esta ayuda, y la foto debe mostrar a uno de sus clientes felices y exitosos. Esto también puede ser una foto de archivo que debes evitar..
Almacén de fotografías - casi nunca comunican el mensaje correcto. ¿Por qué hay un niño que usa lentes y levanta los pulgares? ¿Es él un desarrollador que proporciona servicios de codificación PHP? No lo creo.
El sitio web de Nationwide no comunica el mensaje con esta foto. En primer lugar, la foto no está relacionada con el tema, la mujer parece estar mordiéndose las uñas (sabemos que esto es un trastorno psicológico) y la pantalla de su tableta está borrosa. Esta foto muestra ansiedad, nerviosismo y estrés, y realmente no creo que Nationwide quisiera comunicárselo a sus visitantes..
Este artículo trata sobre el uso de fotos grandes en su sitio web, pero hay muchas otras formas en que las fotos se pueden usar correctamente para atraer a su público. Comience a pensar en las fotos al principio de su proceso de diseño. Si ha realizado una investigación de proyectos adecuada, ya tendrá un montón de ideas..
Invierta en buenas fotos: un gran fotógrafo puede agregar una fortuna al valor comercial de su sitio web.
Independientemente de lo que esté diseñando, su audiencia está compuesta por las personas que se beneficiarán de su diseño. Comprender el comportamiento humano es realmente la única forma de hacer un diseño efectivo y esto se aplica a la elección de las mejores fotos para el próximo diseño de su sitio web..
Accentsconagua