Los colores a través de la interfaz de usuario

Facebook, Twitter, WhatsApp, Instagram

Desde los azules hasta los cafés, de todo hay en la villa del Internet.

En la entrega anterior hicimos mención de los colores, meramente corporativos, de ciertas marcas que utilizamos para comunicarnos de múltiples maneras. En esta ocasión daremos un paso hacia dentro. Hablaremos de la interfaz del usuario y sus colores por aplicación.

La interfaz del usuario es la parte bonita de una página web o una aplicación que permite que se tenga una comunicación adecuada entre ambos actores, usuario-máquina. Es aquella mediante la cual tú tocas la pantalla o haces clic y hace que todo se vea bonito. Por supuesto va de la mano con tener una coherencia de acciones respecto a los botones que hay.
Algunas veces, entre aplicaciones, se unifican los artes para el sistema operativo al que va dirigido, un ejemplo claro es el Material Design que implementó Google hace pocos años, para ser exactos en 2014.

Analicemos.

Los colores de cada unas de las aplicaciones van ligadas a su colores como marca.
Ejemplos:

  • En WhatsApp.
    whatsapp-630x405Tenemos el ícono con ese verde característico, todo al interior de la app se regirá por ese color, sus variantes y sus colores complementarios. Se diferencia entre sistemas operativos, en Android es mucho más colorida que en iPhone. Veamos.

SECCION DE CHATS

Daniel1Daniel2

Podemos observar que en Android los colores del ícono predominan más que en la versión para iPhone, en cuyo caso en lugar de tener el verde tanto en “mensajes no leídos” como en la hora de los recién llegados. El fondo en ambos casos es blanco debido a la amplia legibilidad a la que debe atenerse cualquier mensaje. Al ingresar a un chat, los cuadros de diálogo son de dos colores, los que el usuario envía tienen la tonalidad en verde, mientras los mensajes recibidos son de color gris tirándole a blanco.

En el caso de las llamadas ocurre algo parecido. En Android tenemos un completo uso de colores nativos de la aplicación mientras que en iPhone no es así. Aquí no me causa conflicto la diferencia entre colores pues, al ser una llamada, se tiene que visualizar lo más parecido a una llamada vía red móvil.

A mí se me hace más atractiva la versión para Android por el uso más fiel de colores. Al final son la misma aplicación y el uso primordial de ésta, es el envío y recepción de mensajes en sus múltiples modalidades.

  • En Instagram

daniel7De parte de esta aplicación nos encontramos con algo neutral para los sistemas operativos; el azul que va en complemento con el café predominante del ícono de la aplicación, con una barra permanente al inferior de la pantalla en donde tienes varias opciones: ir al home, buscar, tomar foto o subir de la galería para posteriormete editar, ver tu actividad, y ver nuestro perfil.

Ahora, veamos el logotipo, y su relación con los colores de la aplicación.

daniel3 daniel4

Como mencionamos, Instagram utiliza colores neutrales, pero como el ícono es primordialemnte café, inmediatamente nos remite en la paleta de colores a un naranja, pues es el mas cercano, y a la vez su complementario es el color azul. En referencia al texto y su fondo, podemos apreciar que es blanco, parecido al área de chat de WhatsApp, para maximizar la legibilidad. Utiliza solo azul, negro, y blanco.

  • En Twitter

Ícono_TwitterEn esta aplicación podemos ver unos colores menos sobrios que los de Instagram, son unos colores más vivos.
Rigen dos colores: Azul y blanco.

daniel8

 

Existen 9 botones en la interfaz principal de la aplicación los superiores son: home, notificaciones, mensajes, encuentra personas, buscar y menú; estos son de color azul que va encadenado al logo de la marca. Los botones que nos restan en la parte inferior que son: escribir tweet, tomar fotografía, seleccionar multimedia; estos son negro con transparencia que los hacen ver gris.

Recordemos que Twitter utiliza menciones y hashtags, ambos se muestran en color azul, el mismo del ícono principal.

  • En Facebook.

social_facebook_box_blueEn la parte superior tenemos la sección de búsqueda con el icono de buscar en blanco, junto con los iconos de chat y contacto en color blanco. Todos acompañados de un fondo azul característico.

Pixeles abajo, en un fondo blanco que resalta del contenido principal tenemos cuatro iconos grises: feed, solicitudes de amistad, notificaciones y menú de la aplicaron que, conforme el usuario esté ubicado, éste cambia su color a azul. En caso de que existan solicitudes o notificaciones, sobre el mismo ícono aparecerá otro en rojo con el número de solicitudes o notificaciones a mostrar.

daniel9

En la parte general, los botones de compartir, me gusta y comentar van de la mano, con los arriba mencionados, grises y fondo blanco.

De esta manera podemos ver a grandes rasgos como es que se utilizan los colores a través de distintas aplicaciones, algunas van ligadas fielmente al logotipo, otras no tanto pero conectan mediante colores complementarios. Podemos ver que cómo en  casi todas estas aplicaciones está el texto por delante de todo y que para proveer una mejor legibilidad debe de haber un contraste visual el cual da un fondo claro, con un texto oscuro.

Comparte nuestras ideas... Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest
0Email this to someone
email

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Solicita información respecto a nuestros servicios de Cursos y Talleres: