Diseño de aplicaciones moviles (1) :
El color

Diseño de aplicaciones moviles : El color (1)

1. Define la marca y potencia el branding
2. Jerarquizar mediante colores
3. Guiar al usuario visualmente

Mi primera entrada este 2018 será sobre el color. Concretamente, el color aplicado al diseño de aplicaciones moviles. El uso correcto del color durante el proceso de diseño, permite crear experiencias mucho más estables y enriquecedoras para el usuario. ¿Listos? Pues allá voy con el color para el diseño de aplicaciones moviles.

1. Define la marca y potencia el branding

Todas las marcas tienen su color asociado, esto hace que al verlo la identifiquemos y viceversa. Algunos ejemplos serían el verde de Whatsapp, el azul de Facebook, o el morado de Cabify

Los humanos somos seres visuales, nos guiamos por imágenes y colores, una selección de colores cuidada, captará nuestra atención y nos permitirá ganar en usabilidad y experiencia de usuario.

Las marcas, cuentan con manuales de estilo en los que hablan sobre el uso del color. El reto llega al diseñar la app móvil ¿Por qué? La mayoría de estos manuales de estilo indican el cómo debe representarse la marca, aunque no siempre coincide con el diseño de aplicación que hemos planteado. Como profesionales, debemos poner en juicio y ver si son coherentes las directrices con el diseño de la app, dado que está puede necesitar un trato especial, no contemplado en el manual de estilos.

william-hook-476194-low

El color es una de las herramientas que tenemos para hablar de la empresa, por eso debemos saber usarla. A continuación, voy a hablaros de cómo usan el color las siguientes aplicaciones:

Logotipo de la aplicación Shazam

// Shazam,
aplicación con 4 colores

El diseño de la conocidísima aplicación de música Shazam utiliza el azul como color principal. Al acceder a ella podemos comprobar que su esquema cromático se enriquece con otros colores. Shazam, es una de mis aplicaciones preferidas, su esquema de color está basado en cuatro elementos, a continuación os lo explico:


Color azul: uso corporativo
Dentro de Shazam, el azul es el color que identifica la marca. La base de la aplicación está diseñada utilizando tanto este color. La pantalla Haz un Shazam es la principal y es completamente azul, con elementos en blanco, para conseguir buen contraste.

Dentro de la aplicación el azul también es el color de las canciones recomendadas. Shazam según tus gustos y preferencias, te sugiere canciones y éxitos del momento.

Diseño de aplicaciones moviles : Pantalla de la aplicación ShazamDiseño de aplicaciones moviles : Pantalla de la aplicación Shazam

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Color amarillo: uso social
Cuando algunos de mis contactos hace un Shazam, este queda registrado en la pantalla Descubre de fondo amarillo. Así acabo asociando el amarillo a la actividad de mis contactos, sabiendo de una forma visual que si estoy en amarillo,  es lo pertinente a temas sociales.

Diseño de aplicaciones moviles : Pantalla de la aplicación ShazamDiseño de aplicaciones moviles : Pantalla de la aplicación Shazam

 

 

 

 

 

 

 

 

 

 

 

 

 

Color morado: playlist
Este color es en funcionalidad cercano al azul, Shazam lo utiliza para sugerirme qué playlist me pueden interesar.

Color naranja: vídeos
Shazam asocia el contenido de tipo video al color naranja.

Diseño de aplicaciones moviles : Pantalla de la aplicación ShazamDiseño de aplicaciones moviles : Pantalla de la aplicación Shazam

 

 

 

 

 

 

 

 

 

 

 

 

 

 

De esta forma sencilla, Shazam me indica dónde estoy, dónde no estoy y hacía donde puedo ir. Con el azul, sé que serán funcionalidades. Si es celeste, canciones sugeridas. Al usar el amarillo me notifica la actividad social y con el morado y el naranja me sugiere contenido adicional en modo de playlist y videos.

Logotipo de Cabify

// Cabify,
aplicación con 1 color

De los ejemplos, quizás este sea el más claro. Todo el mundo sabe que Cabify es morado.  El que una marca tenga un solo color en su esquema, no quiere decir que todo el diseño deba de hacerse utilizando ese único color.

A la hora de diseñar debemos de aportar toques de color, para ir definiendo la imagen, y guiar al usuario. En el caso de ponerlo todo del mismo color, nada destacaría y la imagen no tendría jerarquía. La falta de jerarquía en el diseño de aplicaciones moviles hace que el usuario se desoriente. 

Diseño de aplicaciones moviles : Pantalla de la aplicación Cabify

Diseño de aplicaciones moviles : Pantalla de la aplicación Cabify

 

 

 

 

 

 

 

 

 

 

 

 

 

 

El caso de Cabify, es bueno para diferenciar entre crear marca y hacer usabilidad. No se trata de decir mi aplicación es del color X y va a ser de ese color. ¡No! Lo importante es jugar con colores complementarios y similares, para enriquecer el diseño.  Un buen diseñador debe de saber con qué colores puede jugar, para enriquecer la experiencia y hacerla, más agradable

2. Ayuda a jerarquizar

El color en el diseño de aplicaciones moviles, también ayuda a jerarquizar. Estableciendo un esquema visual donde el usuario puede ver que elementos son clicables, con qué campos pueden interactuar y cuáles no. Al usuario hay que dárselo todo muy mascado. El hacerle su experiencia sencilla y agradable tiene como beneficio siga usando nuestra aplicación. Elegir una paleta de color con demasiados elementos puede hacernos caer en el error de que todo llame la atención y que nada destaque. Al no existir jerarquía el usuario se sienta saturado y puede abandonar nuestra aplicación. Además, los colores vibran entre sí, esto genera tensión visual, hay que intentar que el ojo siempre esté calmado. 

// MindNode,
aplicación con 3 colores

MindNode, es una aplicación para diseñar flujos y mapas conceptuales. Tiene una amplia gama de colores, pero el uso de estos está pensado y bien jerarquizado. En los siguientes ejemplos lo puedes ver. El botón de Desbloquear app, tiene un peso superior al que Prueba gratuita. O como en la barra de navegación los elementos morados resaltan sobre los grises. De esta forma, aunque existan muchos elementos, se puede ver un orden claro.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Lo fundamental a la hora de seleccionar los colores en el diseño de aplicaciones moviles, es crear un abanico de colores que no genere mucho ruido y que permita una clara diferenciación. Dentro de los colores de una aplicación, los matices son de lo más importante de utilizar. Si nuestra marca es de color X si todos los X son iguales volveríamos a la falta de jerarquía. Por ello es importante descomponer los colores en gradientes y tonalidades.

3. Guía al usuario visualmente

El máximo exponente de usabilidad es cuando los dedos del van solos, y apenas tiene que leer. Esto se consigue con una paleta de colores bien pensada, que guíe al usuario por la aplicación instintivamente. Esta era es experiencia con Shazam. Los colores me indican donde estoy, haciendo que casi no tenga que leer.

Y hasta aquí mi  entrada sobre Diseño de aplicaciones moviles : El color (1). Espero os haya gustado y lo encontréis útil. Por último, recomendaros mi entrada sobre imágenes de calidad.  Os ayudará mucho a la hora de buscar recursos para vuestros trabajos

Para cualquier duda, comentario o aclaración estoy a vuestra completa disposición, un saludo y muchas gracias. Y recordad, si os ha gustado, dadle like o compartirlo.

Showing 2 comments
  • mistyping
    Responder

    Whats uр vеry nice blog!! Ꮇan .. Beautiful
    .. Amazing .. I will bookmark your ᴡeb site and take the fеeds alѕo?
    I am glad to search out sߋ many helpful information rіght
    here in the submit, we’d like develop more techniques in this regard,
    thank you for sharing. . . . . .

  • Sannyduh
    Responder

    Make a more new posts please 🙂
    ___
    Sanny

Dejar un comentario

Escríbeme

¿Tienes una idea? Juntos podemos hacerla realidad, no dejes que tu idea se pierda.