Todos sabemos y entendemos 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 hermoso sitio web y ver imágenes que simplemente no bloquean. en su lugar o tamaño adecuado. Casi te deja pensando que el diseñador olvidó algo, o perdió un paso.
Hoy, analizaremos siete cosas que puede hacer en el proceso de diseño para crear galerías de fotos con mejor respuesta. (No estamos hablando de código aquí; estos son procesos de diseño que pueden ayudarlo a usted y al desarrollador, independientemente de que sean iguales o no).
1. Considerar las relaciones de aspecto
La experiencia de visualización de escritorio puede ser muy diferente a la de un dispositivo móvil. Pero para la mayoría de los sitios web, las ubicaciones de imágenes son las mismas. Su trabajo es asegurarse de que el mismo mensaje se comunique 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.
De vuelta a ese sitio web de escritorio, una foto horizontal superdelgada y atractiva puede parecer increíble en la parte superior del diseño de su sitio web. Pero, ¿qué sucede con esa imagen en la pantalla más pequeña en un entorno más cuadrado? ¿La foto se reduce a un tamaño que es difícil de ver? ¿O desaparece 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 la carga de múltiples tamaños para diferentes puntos de interrupción.
2. Tamaño y escala consistentemente
El cuidado que tome al recortar, dimensionar y cargar fotos puede impactar su flujo de trabajo de manera dramática.
¿Cuántos de ustedes simplemente suben fotos al CMS y esperan lo mejor? Sí, es la respuesta incorrecta.
Cada foto debe ser recortada y dimensionada para la ubicación en el diseño del sitio web. Esto garantiza que las fotos se vean de la forma en que se diseñaron y que no terminará con cabezas faltantes en la parte superior de las fotos o elementos que se quedan fuera de uno o ambos lados.
Lleva un poco más de tiempo en la parte posterior del proyecto, pero vale la pena el esfuerzo. (Particularmente si está trabajando con deslizadores o galerías).
3. Utilice 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 sensibles en el diseño de su sitio web. En particular, si está utilizando una herramienta de terceros bien conocida y establecida, la mayor parte del trabajo pesado se realiza 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 de control deslizante o de galería; Las proporciones de aspecto y los conceptos de dimensionamiento y escalado todavía se aplican.
¿No estás seguro de qué opción utilizar? Opte por un control deslizante cuando tenga un puñado de imágenes geniales que funcionarán en tamaños más grandes. Es una opción popular para el top o? Hero? Sección de una página web. Opte por una galería cuando tenga muchas imágenes que se puedan renderizar pequeñas sin problemas de legibilidad. Esto funciona bien para portafolios 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 interferir con el funcionamiento del sitio web. Evítelas si puede o encuentra una solución alternativa que no tenga la forma de un título tradicional.
Los bloques de texto grandes, como los subtítulos, se pueden representar maravillosamente en pantallas grandes, pero presentan problemas importantes en entornos más pequeños. El efecto resultante puede ser discordante y potencialmente hacer 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 video 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 poner los elementos de video e imagen en el mismo control deslizante. A veces, tendrás suerte y funcionará a la perfección. Otras veces, se te dejarán casillas en blanco en ciertos dispositivos que solo se ven extraños.
La mejor opción es dar a cada tipo de elemento diferente su propio espacio en el diseño. Esto se aplica a casi cualquier elemento de diseño, pero particularmente a imágenes y videos.
6. Cortar elementos innecesarios
Uno de los mayores problemas con los deslizadores y las galerías es que, con demasiada frecuencia, el diseñador coloca 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 los necesita).
Solo incluye elementos con los que los usuarios deberán interactuar. Si el propósito de una galería de imágenes o un control deslizante es lograr que el usuario haga clic o toque una llamada a la acción, esa debería ser la única opción en la foto. Mantenlo simple. No ofrezca demasiadas opciones. En realidad, puede ayudar a sus tasas de conversión.
7. Utilice solo imágenes de alta calidad
Casi no hace falta decirlo, pero todavía sucede con demasiada frecuencia. Si no tienes una imagen estelar, entonces no uses una imagen en absoluto. Las imágenes de alta calidad y alta resolución son más importantes que nunca. Los usuarios no van a perder el tiempo mirando un sitio web con imágenes pixeladas o pobres (y probablemente no confiarán en usted si la calidad es insatisfactoria)
Un gran número de usuarios están viendo el diseño de su sitio web utilizando dispositivos con pantallas de alta resolución; esperan imágenes de primera calidad. Necesitas entregar.
Algunos formatos de imagen están cambiando para satisfacer estas necesidades de alta resolución al tiempo que ofrecen más imágenes comprimidas. Comprométase en formatos. Google Developers es un excelente lugar para comenzar: sepa qué resoluciones de pantalla se utilizan con mayor frecuencia y adquiera el hábito de guardar archivos de la manera que mejor se les puede entregar a los usuarios.
Conclusión
Todos deseamos 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 tenerlos bien, independientemente del dispositivo.
Planifique espacios de imágenes que funcionarán en una variedad de tamaños de dispositivos cuando se encuentre en las etapas de cableado de un proyecto de diseño de sitio web. Es posible que encuentre algunos puntos de toma y daca, particularmente en cuanto a la forma de la imagen, pero a la larga, tomar esas decisiones temprano y crear esa consistencia beneficiará el diseño de su sitio a largo plazo.