Una imagen vale más que mil palabras: diseño de sitios web con muchas imágenes

Usar imágenes para contar una historia no es nada nuevo, la expresión ‘Use a picture. Vale más que mil palabras. apareció en un artículo de periódico de 1911. Así que sabemos desde hace mucho tiempo que las imágenes pueden conseguir el punto a través de forma fácil y comprensible, y esto ha sido usado y abusado en la oleada de infografías que se han creado en los últimos años.

No es diferente en el mundo del diseño web. Para industrias como la fotografía, la moda, los diseñadores (de todas las cosas) y muchas más, la mejor manera de expresarse en el menor espacio posible suele ser mediante la creación de un sitio lleno de imágenes. En el artículo de hoy hemos reunido una selección de estos sitios y hemos tratado de mostrar cómo los diseñadores y desarrolladores abordan este estilo de diseño de diferentes maneras.

Diseño de sitios web con muchas imágenes

fitz

Este es el sitio de la cartera de un profesional independiente de postproducción y retoque. Lo dice todo con imágenes que están cubiertas con una transparencia oscura que muestra el título del enlace al pasar el mouse. El diseño es un poco diferente en el sentido de que el estilo de cuadrícula no es simétrico.

Visita Suffolk

Este es el sitio oficial de información turística del condado de Suffolk en el Reino Unido. Ha sido aclamado como un diseño ‘valiente’ y es muy diferente a cualquier otro sitio de información turística. Muy recargado, muy negro y amarillo, pero muy organizado con el borde blanco alrededor de todas las imágenes.

Agencia Awd

Esta agencia de comunicación utiliza imágenes relativamente grandes con una transparencia que desaparece cuando pasas el mouse sobre cada imagen individual.

Cartel Belli

Otra agencia de comunicaciones que usa un diseño de cuadrícula con transparencia roja al pasar el mouse.

Diseño Simon Foster

Este diseñador web front-end utiliza imágenes grandes y muy poco texto. Emplea grandes bloques de diferentes colores a medida que se desplaza hacia abajo en la página e imágenes dibujadas a mano. El único inconveniente de este diseño es que no hay nada que indique a dónde lo llevarán los enlaces.

Jux

Este es un nuevo sitio para compartir que tiene una colección de imágenes en la página de inicio. Inusualmente, las imágenes están a todo color hasta que pasa el mouse sobre una imagen, luego todas las demás tienen una transparencia, dejando la que ha pasado a la vista.

RVLT

El diseño pesado de la imagen de esta página es un poco diferente. Utiliza un diseño de estilo de cuadrícula de imágenes rectangulares, pero hay algunas con fondos blancos que no parecen ser parte de la cuadrícula. Otra cosa interesante de esta página de inicio es que si actualiza la página, el diseño será diferente.

Gabs

Me pregunto si puedes adivinar lo que hace esta empresa. ¡Incluso el nombre es ‘bolso’ al revés!

Hommard

Otro sitio de moda con un diseño de estilo de cuadrícula para presentar sus imágenes. No todas las imágenes son enlaces, pero las que lo son adquieren un borde blanco delgado al pasar el mouse.

arturo galán

Aquí hay un enfoque diferente para presentar imágenes. Todos estos tipos están animados, y tres de ellos caminan de un lado a otro de la pantalla.

Looks de color de L’Oreal

Esta pantalla completa de imágenes en miniatura es en realidad una pantalla de presentaciones de diapositivas. Al pasar el cursor sobre las imágenes, se seleccionará una tira de 5, y al hacer clic en ella se abrirá una presentación de diapositivas de imágenes más grandes. ¡Este sitio definitivamente lo dice todo con imágenes!

Recortar

Este sitio de moda utiliza una presentación de diapositivas en la parte superior, con un diseño de estilo de cuadrícula debajo. La transparencia al pasar el mouse por encima es muy interesante: cada imagen tiene una transparencia de color diferente con un patrón de líneas en zig-zag que está animado.

trama

Este sitio utiliza imágenes alternativas y bloques sólidos de color con texto mínimo en su diseño de estilo de cuadrícula. Ese bebé está animado, parece más un cinemagraph que un video clip.

Etienne Aigner

Este sitio tiene una apariencia mínima aunque tiene muchas imágenes. Junto a cada una de las imágenes hay un primer plano de un elemento de la imagen. A medida que se desplaza hacia abajo en la página, hay un video y una presentación de diapositivas.

lois vaqueros

Este diseño de estilo de cuadrícula utiliza transparencias de diferentes colores en cada imagen al pasar el mouse. También hay un bloque sólido del mismo color en la parte inferior de cada imagen con texto en blanco.

Casa: Campaña primavera 2014

¡Este sitio tiene tan poco texto que realmente no pude averiguar de qué se trata! Obviamente es propiedad de la pareja en las imágenes, y hay videos de música house de diferentes artistas en el sitio. Cuando aterriza en la página de inicio, hay cuatro imágenes verticales: al pasar el cursor sobre cualquiera de ellas, se coloca una transparencia de color sobre ella y se expande el resto de la página en esa única imagen.

yvan rodic

Este es el sitio del portafolio de Yvan Rodic, quien es viajero, fotógrafo o ambos. Cada fila de imágenes en la página de destino es una selección de fotografías de una ciudad visitada, y la etiqueta en la esquina superior derecha muestra la ciudad, su latitud y longitud y una fecha. Al hacer clic en cualquiera de las imágenes, accederá a la exhaustiva colección de fotografías de esa ciudad.

Nicolás Tarier Fotografía

Este portafolio simplemente muestra una galería en un diseño de estilo de cuadrícula. Al pasar el cursor sobre cualquier imagen, aparecerá una transparencia, mostrando el título de la fotografía en un cuadro hueco, y al hacer clic en él, accederá a la imagen en tamaño completo.

Bernd Kammerer

El sitio de portafolio de otro fotógrafo… pero tengo que preguntar: ¿Es ese realmente su nombre? Si es así, obviamente sintió que no tenía más remedio que dedicarse a la fotografía. Las imágenes tienen una etiqueta negra que se desliza hacia arriba al pasar el mouse, y los círculos rojos cambian a blancos al pasar el mouse.

Grischek

La página de destino de este sitio tiene una gran cantidad de imágenes en miniatura y su logotipo en el centro. Al pasar el cursor sobre las miniaturas, se expandirá e iluminará una o más de las imágenes. Estoy seguro de que la G en el centro del logotipo es 3D… así que si los tiene, ¡obtenga sus especificaciones!

Rod McClean

Todas las imágenes de este sitio están sesgadas y, al pasar el cursor sobre ellas, se vuelven rectangulares. Algunos tienen una presentación de diapositivas de movimiento muy rápido al pasar el mouse.

Conclusión

La mayoría de los sitios anteriores, como habrá visto, están en las industrias y oficios mencionados en la introducción (fotografía, moda, diseño), sin embargo, hay algunos que no lo son y que están en oficios que no necesariamente asociarse con sitios con muchas imágenes.

¿Te gusta aterrizar en páginas que tienen muchas imágenes y poco texto? ¿Crees que son fáciles de navegar en general? ¿Ha diseñado o desarrollado un sitio así?

Comparta sus opiniones y enlaces con nosotros en la sección de comentarios a continuación.

0 Shares:
Te Recomendamos