Consejos para el Uso de Fotografías e Imágenes en Diseño Web

En SiloCreativo hemos hablado en muchas ocasiones sobre el uso de fotografías cuando estamos creando una web. Desde cuales son los diferentes formatos de imagen y cual debemos usar en cada ocasión, o como mejorar su optimización y carga en nuestra web. Pero en esta ocasión queremos hablar sobre las imágenes y fotografías como elemento primordial para dotar de significado y expresar nuestra marca.

Porque no es extraño que, si hacemos una web para un tercero, nos hayan dicho «ahí tienes una colección de fotografías, usa cualquiera para la web». O, si estamos haciendo nuestra propia web, hayamos tirado de repositorios de imágenes por la simple vagancia de no tener que pensar que fotografía utilizar en un lugar concreto de nuestro sitio web.

Personalmente, me parece que en ambas situaciones son equivocadas por el mismo motivo, y deberíamos evitarlas a toda costa. Las fotografías nos sirven acompañar a nuestros textos y potenciarlos. Nos sirven para que nuestros visitantes tengan una idea de que somos, y para nosotros crear la imagen que queremos tener en el mundo digital y real. Nos sirven como aglomerante de todos los elementos de nuestra web, y que consigamos que tenga un presencia coherente.

Como veis, no es un asunto baladí el uso de las fotografías. Pero como el movimiento se demuestra andando, lo mejor es ver con ejemplos como usar de forma correcta nuestras imágenes en nuestro sitio web.

Expresa una idea o historia

La fotografía es un elemento ideal para contar una historia. Cuando vemos personas en su entorno natural y real, nos sentimos identificados. Es una forma excelente para hablar de tu a tu con la gente que visita nuestra web, y que sean capaces de sentir lo que queremos expresarles.

No es extraño ver que, incluso en webs de empresas reconocidas, hacen uso de repositorios de imágenes para mostrar a sus clientes, o incluso a sus plantillas de trabajadores y colaboradores. Y es que el uso de repositorios de imágenes está muy bien, pero nos damos cuenta perfectamente cuando esas personas son reales, o simplemente modelos profesionales posando para una fotografía. Si quieres tener una galería de imágenes con todos los miembros de tu empresa, no tires de fotografías de stock. Puedes contratar a un fotógrafo profesional. O si vas a hacer uso de ilustraciones, puedes hacer que cuenten como funciona tu negocio.

heystack homepack ilustracion
Con una ilustración animada, Heystack nos cuenta de una manera informal como funciona su negocio

Crea una imagen global coherente

Es muy importante tanto para tener una web con ciertos patrones gráficos, como para asentar tu imagen de marca. Si cada fotografía tiene unas tonalidades diferentes, unas exposiciones diferentes, unos brillos diferentes… Parecerá que cada una de ellas está tomada con poca reflexión.

Mantener una consistencia fotográfica te ayudará como marca y como producto. Te hará reconocible ante los demás, con todo lo que ello conlleva.

Usa el contraste

En nuestro artículo sobre composición de texto e imágenes hablamos sobre esto. Y es que, si colocas un texto sobre una imagen, debes cuidar mucho que ese texto sea legible. ¿Y como conseguirlo? Mediante el contraste entre ambos.

creativepark contraste imagen texto
En la web de CreativePark usan el contraste a tres niveles: fondo, imagen y texto

Si tu texto es blanco, intenta situarlo en la zona más oscura de tu fotografía. Y si en tu fotografía predominan las tonalidades claras, mejor haz tu texto oscuro. Jugando con estos dos elementos puedes hacer que el contenido sea visible de un simple golpe de vista.

Cuida la calidad de tus fotografías

Esto puede parecer algo básico, pero muchas veces no se tiene en consideración por diferentes motivos. Hoy en día, la mayoría de los usuarios se conectan a internet por dispositivos móviles, que suelen tener pantallas relativamente pequeñas. Y quizás, la fotografía que se ve bien en una pantalla de smartphone, no se vea igual en una pantalla de escritorio.

Ver imágenes pixeladas no da buena impresión. Denota que se ha cuidado poco la web, o que se han reutilizado fotografías de cuando nuestros dispositivos no tenían tanta resolución. Esta es la clave: cuidar la resolución de las imágenes, y tener previsión de cual debe ser su resolución idónea según sea el dispositivo desde donde accedan a nuestra web.

Contenido en contexto con imagen

Intenta igualar tus fotografías con el texto que la acompaña. Por una parte, será mucho más sencilla la legibilidad de tu web, ya que ambas estarán relacionadas. Y por otro lado, no da la impresión de que hemos usado fotografías de forma aleatoria por simple vagancia.

Aunque tengas fotografías excelentes de paisajes naturales, quizás no encajen muy bien si tu web es de un sitio de restauración en un entorno urbano. Es muy importante, sobre todo si tenemos un catálogo de imágenes muy amplio, hacer una criba previa y decidir que vamos a usar y que no. Nos ahorrará mucho tiempo en el futuro.

Se conciso

Si tienes una tienda online, lo más importante es mostrar tus productos. Y en tus fotografías, tus productos deben ser el elemento fundamental. No agregues elementos que puedan distraer la vista de él. Tanto dentro de la imagen como a los elementos que la acompañan.

fotografia apple watch
Los productos de Apple siempre se muestra de la misma forma: su nombre, un pequeño subtítulo, y una fotografía a gran tamaño sin fondo

Lo más simple es tener tener el producto sobre un fondo blanco, como hace Apple. Pero podemos usar otras técnicas. ¿Quizás un fondo desenfocado y el elemento principal de la imagen enfocado? ¿O que todo este en blanco y negro, a excepción de tu producto? Ve probando diferentes combinaciones hasta que llegues a la que encaje con tu marca.

Armoniza tus fotografías con el resto de tu web

En alguna que otra ocasión hemos hablado del mundo del diseño editorial en SiloCreativo, ya que es una excelente fuente de inspiración para crear una web. Con todas las herramientas disponibles a día de hoy para maquetar una web, como Flexbox o CSS Grid, los limites del diseño los pone nuestra imaginación.

Jugando con las formas de nuestras imágenes, que no tienen porque encerrarse en cuadrados o rectángulos, encajándolas en las columnas de texto, integrando unas con otras… Y es que, muchas veces, hacer algo original no tiene porque ser hacer algo completamente nuevo, sino simplemente darle una vuelta de tuerca a lo que ya está creado.

Como hemos visto en este artículo, el uso de fotografías en nuestra web no se debe reducir a ponerlas en un sitio cualquiera para que sea más vistosa. Las fotografías nos sirven para acercarnos a nuestros visitantes, para contarles una historia y para enseñar nuestra imagen de marca. Al fin y al cabo, no son más que una extensión del todo el contenido que volcamos en nuestra web, que nos debe ayudar a potenciarlo y maximizarlo.

Comentarios (2)

  1. Me gusto mucho el articulo, se nota se sabes mucho sobre la implementacion de fotografias en el diseño de una pagina web. Creo que las fotografias toman aun mas protagonismo en las tiendas virtuales.

    He visto como clientes cambian las fotografias de mala calidad que tienen en su web y cambia por completo la conversión de esos productos.

    Sin duda algo todas las empresas deben tomar en cuenta.

    1. Hola Juan!

      Tienes toda la razón. En la mayoría de las ocasiones, cuando una web cambia sus fotografías de baja de resolución, por otras a la resolución correcta, el aspecto que ofrece es completamente diferente. Y no solo en un aspecto estético, sino que da a entender que cuida todos y cada uno de los detalles. Siendo esto es muy importante para generar una imagen de marca potente. Y ya si hablamos de tiendas online, donde la imagen del producto es el punto más cercano que tenemos de saber que estamos comprando, se convierte en un aspecto vital.

      Un saludo, y gracias por tu comentario!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *