Las imágenes son más que una simple decoración. Son una poderosa herramienta para poder comunicar y diferenciar tu producto. Atrevidas, gráficas, e intencionales imágenes te ayudan a atraer al usuario.
Tenues, silenciosas, luminosas o llenas de color. Con estos principios y buenas prácticas puedes conseguir con éxito incorporar imágenes y darle a tus apps vida, sin importar cual es la marca visual.
Principios
Cuando uses ilustraciones o fotografías para mejorar la experiencia de usuario, elige las imágenes que tengan relevancia personal, información y encanto. Estos principios te ayudarán a comprender las consideraciones relacionadas con las imágenes en tu producto.
Apreciación del contexto
Incorpora lógica para asegurar que las imágenes son dinámicas, inteligentes y relevantes para cualquier contexto. Los elementos visuales predictivos muestran un nivel de inteligencia que mejora la experiencia de usuario sustancialmente.
Buenas prácticas
Uso de varios medios
Tanto las ilustraciones como las fotografías pueden vivir dentro del mismo producto. Las fotografías automáticamente implica un grado de especificación y deberían utilizarse para mostrar ciertas entidades o historias. Las ilustraciones son efectivas para representar conceptos y metáforas donde la fotografía sería enajenante.
Alejate de los patrones
Usa las imágenes para expresar una voz distintiva y una excelencia creativa ejemplar.
Para entidades especificas o contenido de tu marca, usa imágenes especificas. Para contenido más abstracto, se interpretativo. Los valores de fotografía estándar e imágenes prediseñadas no son ni específicas ni interpretativas.
Ten un punto de enfoque
Ten un punto de enfoque clave en tus imágenes. El enfoque abarca desde una entidad en concreto hasta una composición. Asegúrate de que el concepto claro se transmite al usuario de una forma memorable.
No.
Evita que el usuario tenga que buscar el significado dentro de la imagen.
No.
Cuando el punto de enfoque se pierde o se oscurece, la calidad de la imagen es mala ya que no permite discernir el significado de la misma.
No.
Una falta de enfoque provoca que la imagen carezca de sentido o significado.
Construye relatos
Crea una historia inmersiva y un sentido del contexto que humanice tu app. Define el estado de ánimo a través de una historia contada de forma visual. ¿Es al estado de ánimo que se aspira? ¿Es sombrío? ¿Es una celebración?
Integración en la UI
Resolución
Asegúrate de que tus imágenes tienen el tamaño apropiado en función de donde van a ser visualizadas a lo largo de todas las plataformas. La escena enfatiza imágenes grandes. Idealmente, los activos no deberían aparecer pixelados. Prueba una resolución apropiada para cada pantalla y dispositivo.
Introduce escalas
Introduce escalas alternativas para crear niveles de importancia visual.
Protección del texto
Para que la tipografía sea legible sobre las imágenes, añade mallas de protección al texto.
Sí.
Las mallas oscuras deberían utilizar una opacidad del 20 al 40% dependiendo del contexto. las mallas claras deberían utilizar desde el 40 al 60% de opacidad dependiendo del contexto.
Sí.
Para estados de gran tamaño, utiliza áreas de protección de texto específicas en lugar de oscurecer toda la imagen.
Sí.
Las superposiciones de color son diferentes que las mallas de protección del texto y pueden utilizarse como un elemento de diseño. Cuando creas una superposición de color complementario, utiliza la API de la Paleta para definir tu esquema de color basado en el contenido.
Avatares y miniaturas
Los avatares y miniaturas representan entidades de contenido, o ambos gracias a la fotografía o de forma conceptual a través de ilustraciones. Generalmente, son objetivos que tratan de dirigir a una vista principal de la entidad o del contenido.
Los avatares pueden utilizarse para representar personas. Para avatares personales, ofrece opciones de personalización. Los usuarios pueden elegir no personalizar un avatar, proporciona detalles encantadores por defecto. Cuando uses un logo especifico, los avatares pueden también utilizarse para representar tu marca.
Las miniaturas proporcionan más información, permitiendo al usuario entrar en el contenido, además de favorecer a la navegación. Las miniaturas te permiten incluir imágenes en espacios pequeños.
Imágenes héroe (heroe images)
Este tipo de imágenes se utilizan habitualmente para anclarse en una posición predominante, en la parte superior, como puede ser un banner en la pantalla. Sirven para proporcionar contexto al contenido o reforzar la marca.
Galería
Puedes ver más información sobre Imágenes en la página oficial de Google en inglés pulsando aquí.