5 secretos de los sitios web ricos en imágenes

¿Cuándo fue la última vez que visitó un sitio web sin imágenes?

Como diseñadores web, nos encanta agregar imágenes a nuestros diseños porque las imágenes son memorables y darnos un canal de comunicación directo al cerebro de la audiencia. Además, las imágenes son universales y nuestro cerebro las procesa más rápido que el texto. En parte, esa es la razón por la que el medio de la «historia» (videos de formato corto con efectos y superposiciones) y los emojis atraen la participación.

Pero algo más también ha estado sucediendo desde que apareció la “web 2.0”. El alto uso de imágenes en toda la web, algunas impulsadas por contenido generado por el usuario, está creando un problema para los diseñadores web que ahora deben ofrecer experiencias ricas frente a un número cada vez mayor de imágenes.

En las siguientes secciones, analizaremos en detalle cinco cosas a tener en cuenta al diseñar sitios web inteligentes y ricos en imágenes en la era moderna.

1. Mejorar el rendimiento

Siempre que alguien piensa en imágenes en la web, su contenido, resolución y estilo vienen a la mente de inmediato. Pero el factor más importante para ofrecer una experiencia de usuario superior de imágenes es en realidad el rendimiento, que es incluso más importante que la imagen en sí. Esto se debe a que la mayoría de los visitantes de su sitio no se molestarán en esperar a que se carguen sus imágenes.

En resumen, los sitios web ricos en imágenes no pueden permitirse el lujo de ser lentos. Por cada segundo de aumento en el tiempo de carga, hay un Reducción del 7 por ciento en conversiones. Eso significa que un sitio web de comercio electrónico de carga lenta que registra $ 1,000 en ingresos por día pierde $ 250,000 en ventas cada año.

Grandes empresas como Ryanair y Marks y Spencer tuvo rediseños masivos de sitios web que fallaron abominablemente debido a problemas críticos de rendimiento. Así que asegúrese de tener en cuenta que un sitio web centrado en el usuario se basa, ante todo, en el rendimiento. Puede mejorar el rendimiento de muchas maneras; este es un buen lugar para comenzar.

Utilice imágenes optimizadas y receptivas. Muestre a los usuarios la imagen solo cuando y exactamente como la necesiten. A continuación se presentan tres consejos esenciales.

Consejo 1: usa hojas de Sprite

Uno de los trucos más antiguos para acelerar los tiempos de carga en la web. La carga de varias imágenes requiere tiempo y recursos. Sin embargo, cargar una sola imagen y mostrar sus componentes es mucho más rápido porque al hacerlo se reduce la cantidad de solicitudes del servidor y se optimiza el ancho de banda.

Con los sprites de la hoja de estilo de imagen en cascada (CSS), el navegador carga solo una imagen, digamos, una fila de íconos de redes sociales, mostrando solo partes de ella en los lugares relevantes.

Un buen ejemplo reciente de tal técnica es Los guardianes Infografía de la Copa del Mundo 2018. Al principio, la página tuvo un problema con la gran cantidad de imágenes que mostrar: 32 equipos en competencia, cada uno con más de 20 jugadores. Como solución, el sitio web aprovecha los sprites CSS para mostrar a los jugadores de cada uno de los equipos. Vea la página a continuación que muestra los 23 jugadores del equipo español, la fuente de la página es solo una sola imagen, que se carga superrápido.

Consejo 2: imágenes de carga diferida

Otro problema crítico, especialmente en el caso de una multitud de imágenes, es la carga diferida. El principio es simple: cargue una imagen solo cuando esté visible en la ventana gráfica del navegador en lugar de que el visitante espere cargando toda la colección de imágenes.

Para ver un ejemplo clásico, desplácese hacia abajo en el Unsplash página de inicio.

Consejo 3: cargue primero un esqueleto de sitio

Las imágenes nunca aparecen por adelantado, por lo que debe tener en cuenta rendimiento percibido.

Cargando un básico esqueleto versión de un sitio web antes de sus imágenes crea una mejor experiencia para los visitantes. Entonces son conscientes de qué esperar y, en algunos casos, incluso pueden comenzar a interactuar con el sitio (antes de que se carguen las imágenes).

Considere la secuencia de carga de Klook:

Aquí, para cada imagen, el navegador primero carga una versión ligera del sitio (con un fondo blanco) y luego la imagen de fondo real. Este enfoque puede parecer rápido o trivial para algunos, pero tenga en cuenta que el rendimiento varía según las conexiones y los dispositivos.

(Si está trabajando con React o Vue, puede usar esta herramienta genial para crear componentes de esqueleto.)

2. Trate las imágenes como parte del diseño

Esta regla puede parecer obvia, pero con frecuencia se pasa por alto. Las imágenes son una parte integral del diseño y, como tales, deben tenerse en cuenta. Debido a que los diseños tienen un objetivo, las imágenes relacionadas y la composición de la página deben apoyar ese objetivo.

Diseñar imágenes para complementar

Recuerde identificar y priorizar los objetivos de la página. Ya sea que su objetivo sea solicitar suscripciones a boletines u ofrecer un catálogo para navegar, sus imágenes deben complementar el propósito previsto.

Como ejemplo, Página de inicio de Essential Phone muestra una imagen única y llamativa del producto. El amarillo Compra ahora El botón se destaca de forma destacada, dirigiendo la atención del visitante a la acción prevista. Debido a que la imagen muestra el producto en sí, nunca se corta ni sirve como fondo para el texto.

Haz que las imágenes ocupen el asiento trasero

Aunque diseños centrados en la imagen a menudo ofrecen mejores resultados, asegúrese de seguir los principios básicos de usabilidad porque esos diseños no garantizan el éxito. Por ejemplo, puede pasar por alto la jerarquía visual asignando la misma ponderación a los elementos primarios y secundarios.

MetaLab es una agencia de diseño que se especializa en diseñar interfaces. Cuando se muestra por primera vez, su página de destino de un solo pliegue muestra solo un fondo de color sólido con un mínimo de texto, principalmente los nombres de su clientela. Sin embargo, tan pronto como pasa el mouse sobre el nombre de una empresa, el fondo cambia sutilmente y muestra una imagen contextual. Eso significa que no más sufrimiento por el cambio de contexto cada vez. Este diseño de página de inicio transmite hábilmente el mensaje de que la clientela de MetaLab es impresionantemente extensa.

3. Deje que el texto y las imágenes sean amigos

Mostrar texto e imágenes en la misma página puede resultar complicado. El desafío es encontrar el equilibrio perfecto de texto e imágenes para su sitio web.

Colocar texto en una superposición de fondo suave

Colocar texto sobre una superposición de fondo suave es una de las técnicas más simples para presentar imágenes y texto contrastantes. La página de inicio de Indiegogo es un ejemplo antiguo, en el que el título y la descripción se muestran sobre una superposición suave y oscura en una imagen de cada uno de los productos ofrecidos en el sitio. El texto es fácil de leer sin sacrificar el atractivo visual.

Combinar texto e imágenes

Airbnb adopta una fantástica combinación visual de texto e imágenes para su página de inicio.

Las imágenes para las categorías de inicio contienen la redacción dentro de las propias imágenes, lo que permite al diseñador jugar ocultando el texto entre los objetos superpuestos en las fotografías. (Ver «Familia») Este enfoque funciona a la perfección, demostrando que el texto y la imagen no necesitan ser entidades separadas.

(Una nota al margen sobre la accesibilidad: tenga en cuenta que el uso de texto en las imágenes también significa que no hay palabras clave para los motores de búsqueda, excepto las especificadas en las etiquetas alt de las imágenes, lo que causa problemas de accesibilidad a menos que use las etiquetas aria-label. Su elección final depende en el contexto del diseño y el objetivo de su página).

Combine texto e imágenes como una sola unidad interactiva

La página de destino de la película de 2018 Lamento molestarlo muestra la imagen de cada miembro del elenco solo al pasar el mouse sobre el nombre del miembro, cargando simultáneamente la imagen de forma diferida. Aunque el texto está compuesto de texto en vivo (elemento de lista), utiliza una fuente con estilo y un color junto con la sombra de las imágenes para hacer que la presentación parezca una obra de arte (o película). La línea entre la imagen y el texto está borrosa.

Mostrar la imagen correcta en el momento adecuado representa una experiencia de usuario divertida y atractiva.

4. Aplicar el diseño correcto

Como sabemos, la experiencia del usuario depende en gran medida del diseño del sitio web. Para sitios web ricos en medios, la elección de diseño común suele ser la red. Eso es porque el patrón de la cuadrícula muestra impecablemente una lista de imágenes, también cada una de ellas una al lado de la otra.

Las secciones siguientes describen los tres tipos de cuadrícula principales con un ejemplo para cada uno de ellos.

Aplicar una cuadrícula clásica

Una cuadrícula clásica es aquella que contiene pulgares de imagen cuadrados en tamaños iguales. Aporta una sensación de equilibrio y armonía y es adecuado para páginas en las que las imágenes no son los elementos principales para escanear. Una lista de tarjetas es una opción para una cuadrícula clásica. Piense en casos de uso comunes como YouTube y Dribbble.

Aplicar una cuadrícula brutalista

A continuación se muestra un ejemplo de un sitio de portafolio que no se adhiere al diseño de cuadrícula demasiado familiar mientras se enfoca en el contenido. Marcus Eriksson es un fotógrafo codiciado cuya clientela incluye las mejores marcas como Nike y ESPN. Su sitio web presenta un diseño de cuadrícula poco convencional que atrae la atención del espectador hacia el contenido sin sacrificar la usabilidad. El sitio también se carga bastante bien.

Utilice este patrón si desea que sus visitantes se centren en varias imágenes individuales. El diseño caótico es muy atractivo y tiene un elemento de sorpresa. Sin embargo, tenga en cuenta que algunas imágenes pueden «perderse en el camino» de todo el alboroto.

Aplicar una rejilla de mampostería

La Paleta de arte El experimento de Google Art & Culture desglosa las obras de arte populares en sus paletas de colores fundamentales. A la inversa, también puede mostrar formas de arte basadas en una paleta de colores de su elección.

Para nuestro propósito, el sitio Art Palette es inspirador. Es un buen ejemplo de una cuadrícula de mampostería, que muestra diferentes tamaños de imágenes mientras las mantiene «en orden». Esa es una forma óptima de mostrar numerosas imágenes manteniendo su relación de aspecto original.

(Puede construir su propia rejilla de mampostería con este complemento.)

Una nota al margen sobre el rendimiento: ¿recuerdas la técnica del esqueleto mencionada anteriormente? El sitio de Art Palette lo lleva a un nivel superior al cargar inicialmente un bloque de color dominante cargado de manera perezosa y luego cargar progresivamente marcadores de posición de imagen de baja calidad (LQIP). ¡Una mudanza muy recomendada!

5. Agregar una moción con un propósito

El elemento de movimiento se suma al estilo visual de un sitio web. Sin embargo, al igual que con el texto, al abordar una gran cantidad de imágenes, asegúrese de que tanto el movimiento como las imágenes funcionen juntos.

Algunas de las mejores prácticas de los principios del diseño de movimiento se describen Diseño de materiales. A continuación, se muestran algunos ejemplos de cómo emplear la animación para admitir UX en sitios web.

Anunciar cambios de diseño

En muchos casos, los cambios de diseño son inquietantes para los visitantes, como si el terreno se estuviera moviendo a medida que todo en la página cambia de ubicación. La animación puede ayudar a suavizar los cambios para sus visitantes.

Considerar este ejemplo, que muestra imágenes en una cuadrícula clásica. Al pasar el mouse sobre una imagen, un movimiento sutil empuja suavemente la atención del visitante hacia ese elemento. En otras palabras, la animación dirige hábilmente al visitante del diseño de cuadrícula a uno de una sola imagen. Simple, pero brillantemente eficaz.

Cargar con facilidad

Otro ejemplo interesante es Sitio web de diseño de Uber. Debido a que la acción principal del usuario es simplemente desplazarse hacia abajo en la página, lo que desencadena la carga de imágenes, el sitio web enriquece la experiencia de navegación con transiciones suaves y animaciones sutiles, presentando simultáneamente la información relacionada de una manera clara y fácilmente accesible.

Cambiar imágenes

Fubiz suaviza los cambios entre imágenes en una galería de imágenes con técnicas de animación, mostrando un vistazo al interior de todas y cada una de las imágenes de la publicación.

Incorporar animación para contar una historia

Un último ejemplo: Avocode’s Informe de diseño 2017, en el que cada página tiene una historia para compartir junto con ilustraciones creadas por algunos de los mejores talentos del diseño del mundo. El informe actúa como una tira cómica, con cada ilustración construida y animada para reforzar los hallazgos clave del informe.

No olvide las ventajas del video

Aquí tienes una buena regla general: si puedes publicar videos en lugar de imágenes, hazlo. Vea este ejemplo de Galería de productos Nike, en el que uno de los elementos, disfrazado de imagen, es, de hecho, un vídeo. Se muestra una imagen hasta que se carga el video para que no se abstraiga la experiencia del comprador.

Conclusión

Tener que abordar la visualización de una gran cantidad de imágenes o medios visuales no significa que deba ignorar los principios de diseño. Diseñar un sitio web de moda sin tener en cuenta la experiencia del usuario siempre falla. Planificar imágenes como parte del objetivo de su sitio web, reforzar el rendimiento e incorporar animación puede marcar la diferencia entre una experiencia espectacular y una aburrida.

[Special thanks to Sourav Kundu and Mickey Aharony for helping with this article.]