Las imágenes relevantes, atractivas e informativas, ya sean íconos, ilustraciones, fotografías o visualizaciones de datos, atraen a los usuarios y los ayudan a completar sus tareas. Las imágenes transmiten la identidad y la personalidad de una marca, transmiten conceptos complejos e impresionan a los usuarios. Este artículo analiza las mejores prácticas para usar imágenes en el diseño.
Contenido del Articulo
Tipos de imágenes comunes
Cuatro tipos de imágenes se utilizan comúnmente en las interfaces de usuario:
- Fotos Ideal para mostrar productos, el medio ambiente y las personas. Añaden volumen, textura y realismo al diseño.
- Ilustraciones son imágenes generadas digitalmente que representan flujos de trabajo, procesos, personas o conceptos de una manera más artística o menos detallada. Las ilustraciones también pueden ir acompañadas de texto o incluirse en infografías para transmitir información de manera efectiva.
- Iconografía se basa en símbolos simplificados y reconocibles. Estos iconos se utilizan para representar elementos de menú, acciones u objetos en el sistema. Ofrecen a los usuarios indicaciones visuales más intuitivas y eficaces para la navegación y la interacción.
- Visualización de datos son representaciones de datos o información compleja. Transforman datos sin procesar en imágenes significativas y se utilizan para comunicar información basada en datos de una manera comprensible.
Las imágenes que eliges influyen en la primera impresión y percepción de tu marca. Contribuyen a la estética general de su sitio o aplicación y ayudan a crear una conexión emocional con los usuarios. Es importante elegir imágenes que resuenen con su público objetivo.
Consejos para usar imágenes en sus proyectos
Ya sea que elija imágenes de sitios de fotografía de stock, obtenga imágenes de su marca interna o departamento de marketing, o cree imágenes desde cero, es importante seguir estas pautas:
1. Elige imágenes con características similares
Si su diseño requiere múltiples imágenes, combine sus características tanto como sea posible. Por ejemplo, al elegir fotos, preste atención a la exposición, el brillo y el contraste. El resultado será una experiencia visual consistente donde ninguna foto llama demasiado la atención.
Del mismo modo, con las ilustraciones, elija paletas de colores, niveles de detalle y estilo de ilustración en general similares. Si una de sus ilustraciones usa colores de gemas brillantes sin contornos, mientras que otra ilustración usa pasteles con contornos gruesos, este desajuste de estilo romperá la integridad de la página.
2. Haga coincidir el trazo del icono con el grosor del texto
Al seleccionar un conjunto de iconos, todos los iconos deben tener los mismos atributos, como el grosor del trazo, la altura, el ancho, el tipo de esquina (redondeada o cuadrada) o el relleno (independientemente de si están rellenos o perfilados).
Puede ir un paso más allá haciendo coincidir el grosor de trazo de su conjunto de iconos con el grosor de trazo aproximado de su fuente. Por ejemplo, si sus íconos tienen trazos más gruesos, use una fuente en negrita que coincida exactamente con el conjunto de íconos. O, si las reglas de su marca dictan el uso de una fuente más delgada, busque un conjunto de iconos mínimo y delgado. De esta forma, todos los elementos del diseño tendrán el mismo aspecto y ningún aspecto individual del diseño llamará demasiado la atención.
3. Equilibre el tamaño del archivo y la calidad de la imagen
Las imágenes de los sitios de fotografía de archivo o de los departamentos de marketing internos tienden a ser muy grandes y de alta resolución, ya que siempre es más fácil reducir el tamaño de una imagen que aumentarla. Las imágenes en una página web son demasiado grandes si no se muestran completamente tan pronto como vaya a esa página. Si esto se aplica a sus proyectos, reduzca el tamaño de cada imagen, apuntando a un tamaño de página total de alrededor de 1-2 MB. (Puede verificar el peso total de la página del sitio en las herramientas de desarrollo de su navegador, que generalmente brindan un resumen en Neto o Actuación secciones.)
Por otro lado, no quieres hacer imágenes Entonces poco que su calidad se haya deteriorado. Si hace que la resolución de la imagen sea demasiado baja, notará que la imagen se pixela, los detalles del color son ásperos y los bordes son irregulares, como en el ejemplo a continuación.
Asegúrese de cambiar el tamaño y optimizar las imágenes en una herramienta de diseño o software de edición de imágenes. Si es posible, seleccione imágenes que coincidan con el tamaño de visualización previsto de su sitio web y verifique cómo se ven en varios dispositivos.
4. Prefiere imágenes que lleven información a imágenes decorativas
Las imágenes decorativas, como las fotos de archivo, ocupan espacio y no agregan valor al contenido del sitio. imágenes decorativas Tal vez mantener la personalidad de la marca y el tono del sitio, pero no deben anular las imágenes informativas.
Las imágenes informativas, como fotos de productos o infografías, se utilizan para tomar decisiones o proporcionar información importante. Estas son las imágenes que los usuarios pasan tiempo mirando, explorando detalles, tomando una decisión de compra o aprendiendo algo nuevo. Lo más importante es mostrarlos.
Además, recuerde que si su sitio tiene fotos de archivo gratuitas, muchos otros sitios pueden usar las mismas fotos de archivo gratuitas. Cuando los usuarios han visto la misma imagen muchas veces, es más probable que la pasen por alto porque creen que no tiene ningún valor real. Como resultado, es posible que tampoco noten otras imágenes en su sitio.
5. Equilibra las imágenes con el texto
El equilibrio es uno de los principios básicos del diseño visual. El equilibrio juega un papel en la disposición del texto y las imágenes en una página. Un diseño equilibrado que muestre una gran cantidad de texto utilizará imágenes con muchos detalles, como texturas, sombras y varios colores. Si, por otro lado, el espacio en blanco es más importante que el texto en su diseño, las imágenes deben mantenerse simples.
Además de centrarse en la ubicación de las imágenes en la página, tenga en cuenta la emoción que transmiten. Pregúntese: si elimina todo el contenido y deja solo las imágenes, ¿seguirá existiendo la atmósfera general? Cuando los usuarios visitan su sitio por primera vez, es más probable que las imágenes capten su atención que el texto. Quieres causar una buena impresión.
6. Evita elementos gráficos innecesarios en infografías y visualizaciones de datos
Las infografías y las visualizaciones de datos nacen de la necesidad de compartir una gran cantidad de datos o comunicar ideas de una manera simplificada y atractiva. Puede ser tentador usar muchos colores y gráficos en estas imágenes para que se destaquen del contenido del texto, pero los gráficos innecesarios pueden abrumar y reducir el valor de estas imágenes.
Edward Tafte, un pionero en la visualización de datos, acuñó el término proporción de datos a tinta para describir la cantidad de tinta utilizada para representar los datos en comparación con la cantidad total de tinta utilizada en el gráfico. Apunte a una alta proporción de datos a tinta, lo que significa que en sus renderizados priorice la transmisión de información sin elementos decorativos excesivos e innecesarios, como sombras, texturas de fondo, líneas de cuadrícula innecesarias, 3D, etc.
7. Proporcionar texto alternativo
Hay muchos tratamientos visuales que se pueden usar para mejorar la accesibilidad y, en particular, para ayudar a los usuarios de lectores de pantalla a interactuar con un sitio web. Cuando un lector de pantalla encuentra una imagen, describe la imagen al usuario utilizando el texto alternativo proporcionado.
Si es posible, escribe un texto alternativo que transmita el contenido de la imagen. No repetir lo ya indicado en la firma y nunca use texto alternativo en lugar de optimización de motores de búsqueda.
Conclusión
El uso de imágenes en el diseño visual juega un papel fundamental para atraer a los usuarios y transmitir la personalidad de una marca. Si bien el diseño visual a menudo parece una cuestión de gusto más que de ciencia, seguir estas mejores prácticas lo ayudará a seleccionar imágenes que funcionen bien en su diseño. Y, si dudas de la eficacia de tus soluciones, pruébalas en usuarios.
