Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Photography
Webdesign

Guía de los Diseñadores Web para la Selección de Fotos

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Las imagenes fotograficas capturan nuestra atención y causan casi una respuesta instantanea cuando las encontramos. Además, son una parte importante de cualquier sitio web que creamos. Las fotos juegan una parte importante y esencial en nuestra primera impresión, sin embargo, también nos pueden decir acerca de qué es el sitio y puede ser un factor enorme para ganar la confianza.

Cuando usas adecuadamente las fotografías, éstas son muy efectivas y rápidamente pueden enviar el mensaje esperado a su público. Sin embargo, si se usan las fotos equivocadas, esto puede echar a perder la experiencia de los usuarios. ¿Cómo seleccionamos las fotos correctas?

Usando Fotos en Diseño Web

Tanto como cuidamos de todos los aspectos del sitio web cuando lo estamos creando: contenido, colores, tipografía, jerarquía, información, arquitectura y otros detalles, las fotos merecen tanta atención en términos de funcionalidad y la experiencia completa de los usuarios en su sitio.

Lidiar con fotos en los sitios web debería ser algo que los diseñadores entienden y apliquen efectivamente, por lo tanto, este articulo te llevará en la dirección correcta y te mostrara cómo pensar respecto a las fotos cuando estás tomando la decisión de usar una en tu próximo proyecto web.

Requiere Atención usar un foto grande.

Las personas escanean la pantalla basados en sus experiencias pasadas y, tambien, en sus deseos. La esquina superior izquierda es el punto más común en donde empiezan los ojos de los usuarios, aunque esto depende de su patrón de lectura de su cultura. Si estas usando una foto grande en la página, entonces inmediatamente acaparara su atención y los conducirá lejos de sus tendencias usuales.

Tratando una foto como Contenido

Estoy seguro que no discutiras conmigo acerca de que una foto en una página web es un contenido, pero, de hecho, ¿la estas tratando como tal? ¿La usas cómo un anuncio o como un excelente relleno de contenido? ¿Haz considerado todos los aspectos de esa pieza en particular del contenido? ¿Has evaluado la foto apropiadamente antes de haberla escogido para usarla? ¿Has considerado los modelos mentales de los usuarios y el impacto que la foto tendra en ellos? ¿Provee la foto informacion valiosa o provee ayuda a los usuarios con la tarea actual? Estas son solo algunas de las preguntas que necesita responder antes de usar una foto en una pagina web.

Las fotos jamas deberian usarse solamente porque “alegran” en la pagina web.

He visto muchos diseñadores simplemente colocando una foto en pantalla completa en una pagina web, poniendo un eslogan o un “Llamado a la Accion” y notificando que esta hecho. En muchos casos la foto no ha sido evaluada, los diseñadores fueron simplemente siguiendo la tendencia continua. Vamos a ver como evaluar una foto antes de usarla en su sitio.

Escogiendo la Foto Perfecta

Hay algunas cosas que se deben considerar cuando se esta decidiendo seleccionar una foto en su diseño. Asumire que usted ya saber como evaluar los aspectos fundamentales de una foto, ya sabe: calidad, tamaño, composicion y exposición. La calidad en terminos de resolucion requerida, tamaño de la imagen y, preferiblemente, su orientacion para el uso que se pretende, la composicion efectiva y recorte de la foto para atraer la atencion.

Una vez que usted ha hecho eso y la foto ha pasado las pruebas fundamentales, entonces usted puede continuar explorando las opciones para el uso esperado.

Nuestro cerebro procesa las imagenes 60,000 veces mas rapido que cuando esta leyendo. Mike Parkinson

¿Esto, es útil?

Cómo se mencione anteriormente, toda foto debe ser util. No hay nada malo con usar una foto como un marcador de posición para dar brillo a una pagina o rellenar algo de espacio, pero incluso, hasta despues de considerar el contexto en el cual estas usando esa foto. Utilidad, eficacia, considero que las fotos que producen el contenido son las que necesitan nuestra atención especial. Se deberan usar fotos que

  • nos ayuden a mejorar el entendimiento de algo,
  • nos enseñen a como usar algo, o
  • nos muestren como es que algo esta hecho.

Un esplendido ejemplo de una foto útil en el diseño web es la foto del sitio web Square.

squareupcom

Usted puede decir inmediatamente que esta imagen ha sido profesionalmente tomada (mire en las manos y las uñas de los dedos). Lo mas importante es que comunica directamente acerca de lo que trata el producto y cuan facil es de usar. Es, definitivamente, una foto muy útil, educacional e instructiva.

Otro ejemplo de una foto útil, es la foto del sitio web Pencil. Muy similar al ejemplo anterior, esta foto muestra exactamente acerca de lo que trata el producto (un puntero), además de, dónde y cómo puede ser usado (en una aplicacion para iPad).

Pencil website

El sitio web Woodster también hace un buen uso de las fotos explicando acerca de su producto. Esta claro que su producto es utilizado para elevar su Mac pero tambien, proporciona ayuda para las conecciones USB a la mano. Imagine este producto solo sin contexto (la Mac). ¿Cree que la foto seria tan útil cómo esta?

Woodster website

Grovemade, hace una magnifico trabajo presentando una coleccion de sus productos en una solo foto de fondo de pantalla. Es bastante obvio que ellos producen accesorios de madera de alta calidad para oficinas. Esta foto no solamente es útil sino también muy efectiva y emocional al mismo tiempo. Ya abordaremos las fotos efectivas y emocionales en un momento.

Si mira los ejemplos arriba, notara que todas las fotos tienen una función muy obvia; ¡son evidentes!, y eso hace que comuniquen el mensaje esperado muy bien. No tiene que buscar demasiado para darse cuenta acerca de lo que tratan los productos/servicios/el sitio. Todas estas son características de fotos útiles en el diseño web.

¿Esto, es Efectivo?

Una foto efectiva es una que esta provocando una acción, que influencia nuestro comportamiento y comunica el mensaje esperado claramente. En particular, las fotos buenas y efectivas de productos deberian alentar a los usuarios a comprar esos productos. Hemos visto de los ejemplos arriba que las fotos útiles son, de hecho, efectivas en tanto que hacen que el producto se vea deseable, ya que de esta manera nos anima a comprarlos. Siempre que vemos una foto que activa un cambio en nuestro comportamiento, podemos describirlo como un hecho efectivo.

Si echas un vistazo al sitio web Mobility y a esos exquisitos auriculares rojos, de inmediato queras conseguirlos y potencialmente queras comprarlos.

Apple is conocida por el perfeccionismo en todo lo que hacen. La pagina de aterrizaje de iPhone esta llena de fotos brillantes y deseables del producto que hacen que quieras tener uno de sus productos.

Otro ejemplo de una foto efectiva es la del sitio web tsptr. Observe, ¿cómo el hombre en la foto esta buscando abajo como si hay algo debajo para que tu empieces a indagar? De hecho, hay algo debajo.

El sitio web Mapquest no solamente expresa emociones con las imágenes sino que también usa una dirección clara para guiar los ojos de los usuarios al contenido importante en la pagina, en este caso, el enlace para descargar la aplicación móvil a la izquierda.

Poco People usa una foto divertida y entretenida en su pagina de inicio. Usted puede decir inmediatamente que hay algo extraño al respecto. Debido a eso, y al buen uso de los colores, las luces y la exposicion, su interes es despertado en alguna manera para ver acerca de lo que trata este sitio.

El sitio web Colossal se caracteriza por una foto grande en la pagina de inicio mostrando lo que ellos hacen (ellos pintan a mano grandes anuncios y murales), y muestran como lo hacen (mira el hombre a la derecha). La cosa mas interesante acerca de esta foto son las personas pasando a la izquierda. Lucen emocionados acerca de lo que están presenciando, lo cual lo involucra a usted como un observador y hacen a la foto entera y al mensaje, interesante y efectivo.

¿Esto, es Emotivo?

Una foto emotiva deberia resultar en un respuesta emocional de los espectadores. Se es tan agradable mirar, o relajante, o perturbador en una forma que nos obliga a tomar alguna accion, o divertido y entretenido, o atractivo y deseable, siempre y cuando la foto apela a nuestras emociones en alguna manera tendra un gran impacto que uno que no lo hace.

Frogdesign enfatiza un caso de estudio en su sitio web acerca de FEMA y la dirección de las operaciones de socorro. La foto principal, combinada con un buen lema, es muy efectivo y emotivo. Cuenta una historia y muestra el peligro y debido a lo que sentimos nos conecta.

La foto principal del sitio web Breath es muy relajante. Combinada con un buen lema y la dirección adecuada de la mirada en la mujer la foto transfiere su facilidad de respiracion al espectador. ¿Observe el botón con la etiqueta “respira”?

La foto principal del sitio web Shaun Groves, cuenta una magnifica historia acerca de él. Transmite felicidad, confianza, esperanza, amistad y anticipación a los espectadores quienes se apegan a él y sienten que se identifican con su trabajo.

Ademas de la funcionalidad y de la efectividad acerca de la selección de fotos Relay Foods, también traducen emociones acerca del servicio que ellos ofrecen. Las mujeres a la izquierda y a la derecha muestran su satisfacción en trabajar para ellos, y debido a Relay Foods es acerca de productos naturales para las expresiones faciales de las mujeres en estas fotos que están alineadas con el mensaje de sus servicio y su marca.

El Poder de los Rostros

Hay siete (u ocho) emociones básicas:

  1. alegría
  2. tristeza
  3. desprecio
  4. miedo
  5. disgusto
  6. sorpresa
  7. ira

Son universales y son (por lo general) comunicadas por expresiones faciales y gestos físicos. Si estas usando fotos de personas para comunicar su mensaje deseado, entonces tenga cuidado en estas siete emociones básicas y decida cuales conducirán la atención de su audiencia.

Fotos de personas en primer plano inmediatamente consiguen la atención y ayudan a activar nuestras emociones, las cuales las convierten en poderosos elementos de diseño.

Cuando vemos un rostro, estamos automaticamente incitados a sentir algo o simpatizar con esa persona.

Ya hemos visto fotos de personas en ejemplos anteriores, pero analicemoslas un poquito más.

A pesar de que la foto Build Fire de una mujer no nos dice nada acerca de su producto, ésta añade personalidad a su producto y es útil y tan efectiva para atrapar la atención de los usuarios. El mismo ejemplo no se alcanzaría si hubiera solamente una foto del iPhone en vez de la mujer.

Si alguna vez decidió usar una foto de retrato grande en su sitio web personal, en ese caso, lo felicito, ya estuve ahí. Pero, ¡sea cuidadoso! Una diminuta expresión facial puede hacer una gran diferencia en el mensaje que usted esta comunicando. Daniel Eckler hace un buen trabajo en presentarse a la audiencia. Sus expresiones faciales comunican seguridad, tranquilidad y confianza.

Las personas pueden decirle cuando una sonrisa es real o falsa.

Todos saben lo que paso al WTC. El sitio web 9/11 Tribute Center esta dedicado a las historias de aquellos que estuvieron ahí. El hombre en la foto esta mirandonos directamente, de ese modo nos ayuda a relacionarnos con el tema del sitio invitandonos a entrar en la comunidad.

Nota: esto esta hecho sin ser agresivo, ¡una línea fina!

Otro magnífico ejemplo acerca del mensaje con las fotos de rostros en primer plano es el sitio web Conservation. El hombre Kayapo en la foto comunica autoridad, coraje y agradecimiento.

Como Susan Weinschenk dijo, las fotos en primer plano son más persuasivas en los sitios de caridad, y eso es verdad. Save the Children se caracteriza por una foto en primer plano de un niño con necesidad el cual se alinea perfectamente con el lema y tema del sitio. Observe la dirección de la mirada hacia el botón de donación.

Como “NO” usar fotos en Diseño Web.

Aunque hemos visto muchos ejemplos magníficos de como usar fotos en nuestros diseños web, estas, también se pueden usar mal con mucha facilidad. Por lo tanto, voy a mostrarte algunos ejemplos de como no usar fotos y lo que debes evitar.

Foto sin ninguna relación - un estudio de diseño web ofreciendo servicios “A la medida”, usa una foto de fondo sin ninguna relación (hilos de color), lo cual crea una primera impresión equivocada y envía un mensaje equivocado a los visitantes. Hay un mensaje aquí, sin embargo, es una metáfora extraña.

Una solución mucho mejor aquí sería usar ya sea un color solido o una foto de un equipo de trabajo. Además, los productos digitales no pueden ser a medida.

Un software como servicio ofrece herramientas de colaboración para equipos y que usa una foto de una mujer preocupada en el trabajo. Esto podría crear la impresión de que ella está preocupada del mismo software que el sitio esta promoviendo. Una mejor solución aquí sería mostrar ya sea una captura de pantalla del verdadero producto o mostrar una mujer que luce feliz usando su producto.

Fondo de fotos borrosas - solamente usadas como marcadores de posición, no comunican nada acerca del sitio por lo tanto no tienen un efecto real. Le aconsejaría evitar usar fotos borrosas como fondo tanto como sea posible, seguro puede hacer algo mejor que eso ;

Otro estilo de foto totalmente sin ninguna relación al tema del sitio. Aunque las palabras “hacer a mano” y “curso” pueden estar relacionadas a la foto, sin embargo, no comunica el tema auténtico del sitio. Brand Bat trata acerca de crear marcas estratégicas y la relaciona con unas series de fotos de procesamiento de madera, simplemente están perdiendo la gran oportunidad de comunicar su mensaje.

Foto mal elegida - ¿cuál fue tu primera impresión cuando viste esta foto? Dos personas felices paradas en una tienda de café ayudarán a tu negocio a tener éxito en línea. ¿Correcto? No, una agencia de diseño web llena de servicios, de hecho, ofrece esta ayuda, y la foto debería mostrar a uno de sus clientes felices y exitosos. También podría ser el caso de una foto de archivo la cual aconsejo que debería evitar.

Fotos de archivos - casi nunca comunican el mensaje correcto. ¿Por qué hay un niño pequeño usando lentes y con los pulgares hacia arriba? ¿Acaso es un programador que provee servicios de código en PHP? No lo creo.

El sitio web Nationwide esta fallando en la comunicación de su mensaje con esta foto. En primer lugar, la foto no tiene ninguna relación con el tema, la mujer parece estar comiéndose las uñas (sabemos que eso es un desorden psicológico), y la pantalla en su tablet esta borrosa. Esta foto muestra angustia, nerviosismo y estres y no creo que Nationwide quiera comunicar eso a sus visitantes.

Reflexiones finales

Este artículo ha sido acerca de cómo usar las fotos grandes en su sitio web, pero hay muchas otras maneras de cómo pueden ser usadas adecuadamente para atraer a su audiencia. Empiece pensando, primeramente, en las fotos en su proceso de diseño. Si ha hecho una investigación adecuada de su proyecto, entonces ya tendrá muchas ideas.

Invierta en fotos con buenas tomas: un buen fotografo puede añadir una fortuna al valor del negocio de su sitio web.

Lo que usted está diseñando, su público esta formado de las personas que se beneficiaran de su diseño. Entender el comportamiento humano es, verdaderamente, la única manera para hacer un diseño efectivo y esto aplica en la selección de las mejores fotos para el próximo diseño de su sitio web.

Lectura adiconal

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.