Imágenes

Relevancia personal

Una app inteligente muestra imágenes que reflejen con precisión el contexto y el mundo del usuario.

Información

Transmitir información específica. Facilita y acelera la comprensión.

Encanto

Reflexión estética combinada con el contexto apropiado hará las delicias de sus usuarios al hacer que su producto se sienta especial y el usuario se sienta relevante.

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.

Se inmersivo

No tengas miedo de oscurecer o aludir a los “héroes” y miniaturas integradas a través del color o superposición de contenidos.

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.

Sí.

Para entidades específicas utiliza primero las fotografías.

Sí.

Cuando algo no está totalmente especificado, disponible o aplicable, las ilustraciones transmiten inteligencia a tu app mientras que permiten inmediatamente comprender el contenido.

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.

Sí.

Las imágenes pueden representar historias maravillosas.                           

Sí.

Para representaciones específicas, utiliza imágenes específicas.

No.

Los repertorios de imágenes pueden transmitir la sensación de falsedad.

No.

No utilices por defecto fotografías predeterminadas de repositorios.

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.

Sí.

Haz que el significado sea perceptible inmediatamente.        

Sí.

Las imágenes que mejor transmiten el significado son aquellas que tienen unos pocos elementos clave con las mínimas distracciones.

Sí.

Un enfoque claro transmite el concepto de la imagen con un vistazo.

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.

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?

Sí.

Una imagen que cuenta una historia es infinitamente más interesante e informativa.                                              

Sí.

Un concepto propiamente contextualizado transmite tu mensaje y marca de forma más efectiva.

No.

Una imagen sin historia pierde la oportunidad de transmitir un estado de ánimo, tu marca o un contexto.

No.

Una representación de una entidad fuera de contexto no es interesante para el usuario.

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.

Sí.

Tamaño de imagen apropiado.

No.

Imagen degradada.

Introduce escalas alternativas para crear niveles de importancia visual.

Dentro de una galería, introduce miniaturas de varios tamaños para transmitir la jerarquía del contenido.

Anímate a utilizar varios contenedores dentro de un mismo ecosistema.

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.

No.

No oscurezcas la imagen cuando utilices mallas de protección.                                                                                                                                                                                                                                                                

No.

No oscurezcas la imagen demasiado.                                                                                                                                                  

Sí.

Puedes usar la paleta de color de tu marca de forma decorativa para mejorar las imágenes.

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.

Los avatares hacen que tu app se sienta más personal además de ocupar un espacio mínimo.                                              

Un avatar de tu marca transmite información con un simple vistazo.                                              

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.

Destacada

Una imagen destacada es un punto de enfoque principal y atrevido dentro de una disposición (layout) heterogénea.                                              

Imagen héroe integrada

Integrar imágenes héroe crean un escenario de piezas heterogéneas de contenido dentro de una disposición. No son el principal punto de enfoque.                                              

Las imagenes de la galería son imágenes héroe atrevidas dentro de disposiciones homogéneas en forma de cuadrícula o de imagen simple.

Cuadrícula de fotos

Imágen de la galería