7 consejos para galerías de fotos con mejor respuesta
Todos sabemos y comprendemos la importancia de diseñar sitios web en una plataforma receptiva, ¿verdad? Eso se aplica a las imágenes y galerías de fotos también.
No hay nada peor que navegar a un sitio web hermoso y ver imágenes que simplemente no se "bloquean" en su lugar o tamaño correctamente. Casi te deja pensando que el diseñador olvidó algo o perdió un paso.
Hoy, veremos siete cosas que puede hacer en el proceso de diseño para crear mejores galerías de fotos receptivas. (No estamos hablando de código aquí; estos son procesos de diseño que pueden ayudarlo a usted y al desarrollador, ya sea que sean uno o lo mismo).
Explore los elementos de Envato
1. Considere las relaciones de aspecto
La experiencia de visualización de escritorio puede ser bastante diferente de la de un dispositivo móvil. Pero para la mayoría de los sitios web, las ubicaciones de las imágenes son las mismas. Su trabajo es asegurarse de que se comunique el mismo mensaje en ambos entornos y que la imagen no se pierda en diferentes tamaños de pantalla.
Ahí es donde entra en juego la relación de aspecto, la relación entre los planos horizontal y vertical de la imagen.
Volviendo a ese sitio web de escritorio, una foto horizontal súper delgada puede verse increíble en la parte superior del diseño de su sitio web. Pero, ¿qué pasa con esa imagen en la pantalla más pequeña en un entorno más cuadrado? ¿La foto se reduce a un tamaño difícil de ver? ¿O se desvanece la mitad de la foto?
Ahí es donde entra en juego la relación de aspecto. Al elegir una relación horizontal-vertical para tamaños de foto que sea similar, se perderá menos contenido de imagen al cambiar de dispositivo. También le facilitará trabajar con ubicaciones de imágenes y no tendrá que preocuparse tanto por cargar varios tamaños para diferentes puntos de interrupción.
2. Tamaño y escala consistentemente
El cuidado que toma al recortar, dimensionar y cargar fotos puede afectar su flujo de trabajo de manera espectacular.
¿Cuántos de ustedes simplemente suben fotos al CMS y esperan lo mejor? Sí, es la respuesta incorrecta.
Cada foto debe recortarse y dimensionarse para la ubicación en el diseño del sitio web. Esto garantiza que las fotos se verán de la manera en que están destinadas y que no terminará con cabezas faltantes en la parte superior de las fotos o elementos que quedan en uno (o ambos) lados.
Lleva un poco más de tiempo en el back-end del proyecto, pero vale la pena el esfuerzo. (Particularmente si está trabajando con controles deslizantes o galerías).
3. Use un control deslizante o galería
El uso de un contenedor para imágenes como un control deslizante o una galería puede ayudarlo a administrar mejor las imágenes receptivas en el diseño de su sitio web. Particularmente si está utilizando una herramienta de terceros reconocida y establecida, la mayor parte del trabajo pesado se hace por usted para garantizar que estos elementos funcionen según lo previsto.
Dos de los consejos anteriores siguen siendo de vital importancia incluso cuando se utilizan elementos deslizantes o de galería; todavía se aplican las relaciones de aspecto y los conceptos de dimensionamiento y escala.
¿No está seguro de qué opción usar? Opte por un control deslizante cuando tenga un puñado de excelentes imágenes que funcionarán en tamaños más grandes. Es una opción popular para la sección superior o "héroe" de una página web. Opte por una galería cuando tenga muchas imágenes que se pueden convertir en pequeñas sin problemas de legibilidad. Esto funciona bien para carteras o sitios web con muchas imágenes para mostrar.
4. Manténgase alejado de los subtítulos cuando sea posible
Los subtítulos pueden ser una gran herramienta para agregar valor a la información en una imagen, pero realmente pueden obstaculizar el funcionamiento del sitio web. Evítelos si puede o busque una solución alternativa que no tenga la forma de un subtítulo tradicional.
Los bloques de texto grandes, como los subtítulos, pueden reproducirse maravillosamente en pantallas grandes, pero presentan problemas importantes en entornos más pequeños. El efecto resultante puede ser discordante y potencialmente provocar que los usuarios abandonen su sitio. (Y con tanto tráfico proveniente de dispositivos móviles para la mayoría de los sitios web, eso podría ser desastroso).
5. Tenga cuidado al mezclar videos e imágenes
Seamos claros: es perfectamente aceptable tener elementos de video e imagen en su sitio web. Probablemente sea algo que deberías hacer.
Pero no mezcle video e imágenes en los mismos elementos del diseño, como colocar elementos de video e imagen en el mismo control deslizante. A veces, tendrás suerte y funcionará como un encanto. Otras veces, se te dejarán cuadros en blanco en ciertos dispositivos que simplemente se ven extraños.
La mejor opción es dar a cada tipo diferente de elemento su propio espacio en el diseño. Esto se aplica a casi cualquier elemento de diseño, pero particularmente a las imágenes y al video.
6. Cortar elementos innecesarios
Uno de los mayores problemas con los controles deslizantes y las galerías es que con demasiada frecuencia el diseñador deposita demasiada basura dentro del contenedor. Hay flechas de navegación, botones de navegación, texto, llamadas a la acción y la lista continúa.
En general, los usuarios entienden cómo interactuar con un control deslizante. A menos que esté haciendo algo totalmente fuera de la pared, no necesita dos capas de navegación que muestren a los usuarios qué hacer. Una sola fila de botones o flechas es suficiente (si es que los necesita).
Solo incluya elementos con los que los usuarios necesitarán interactuar. Si el propósito de una galería de imágenes o un control deslizante es hacer que el usuario haga clic / toque una llamada a la acción, esa debería ser la única opción en la foto. Mantenlo simple. No brindes demasiadas opciones. En realidad, puede ayudar a sus tasas de conversión.
7. Use solo imágenes de alta calidad
Casi no hace falta decirlo, pero aún sucede con demasiada frecuencia. Si no tiene una imagen estelar, no use una imagen en absoluto. Las imágenes de alta calidad y alta resolución son más importantes que nunca. Los usuarios no perderán el tiempo mirando un sitio web con imágenes pixeladas o pobres (y probablemente no confiarán en usted si la calidad es deficiente).
Un gran número de usuarios está mirando el diseño de su sitio web utilizando dispositivos con pantallas de alta resolución; esperan imágenes de primer nivel. Necesitas entregar.
Algunos formatos de imagen están cambiando para satisfacer estas necesidades de alta resolución mientras se entregan más imágenes comprimidas. Compruébelo usted mismo en formatos: Google Developers es un excelente lugar para comenzar: conozca qué resoluciones de pantalla se usan más generalmente y tenga la costumbre de guardar archivos de una manera que se pueda entregar mejor a los usuarios.
Conclusión
Todos queremos crear sitios web con los que los usuarios sientan la necesidad de interactuar. Las imágenes fuertes son una parte clave de esa ecuación. Igualmente importante es hacer que se procesen bien independientemente del dispositivo.
Planifique espacios de imágenes que funcionen en una variedad de tamaños de dispositivos cuando se encuentre en las etapas de enmarcado de un proyecto de diseño de sitios web. Puede encontrar que hay algo de toma y daca, particularmente en términos de forma de imagen, pero a la larga, tomar esas decisiones temprano y crear esa consistencia beneficiará el diseño de su sitio a largo plazo.
