En un contexto en que el usuario es el centro de todas las miradas, el diseño web ha vuelto a fijarse en las leyes de la percepción humana (figura, fondo, color, movimiento…) para enriquecer su experiencia al compás de los constantes avances tecnológicos. El objetivo principal del diseño UI (User Interface) es mejorar la interacción del usuario desde cualquier dispositivo a partir de unos patrones estéticos que apelan directamente a sus emociones. No solo trata de conseguir diseños más atractivos y legibles: el diseño de interfaz de usuario trabaja codo a codo con el diseño UX (User Experiencie) para que las marcas influyan en la mente y el corazón del usuario.
La importancia del tono y el color en el diseño UI
Es muy importante que elementos como el tono, el color o la luz se combinen de manera eficaz. A continuación te explicamos algunos trucos para elegir bien el esquema del color en el diseño UI.
1. Fíjate siempre en las pautas que ofrecen Google y Android
Para empezar, es bueno recordar que para estar actualizados con las tendencias de diseño en Internet debemos seguir de cerca las indicaciones de los gigantes tecnológicos. A la hora de elegir la paleta de colores, Google recopila unos cuantos consejos sobre la aplicación del color además de aspectos como la profundidad, las sombras, las transiciones y las animaciones en su paquete de trucos Material Design. Por su parte, el Desarrollador Android nos ofrece una guía similar.
2. Explora los matices
El modelo de color HSV va más allá de los códigos hexadecimales RGB que se suelen usar en páginas web. Todo diseñador UI debería familiarizarse con este modelo, pues en esencia describe la percepción del ojo humano: genera múltiples colores a partir de un único matiz en función de distintas variables (brillo, saturación), de modo que nos indica la forma en que pensamos en el color y nos permite predecir cómo sus combinaciones afectarán a los demás colores. Con los matices obtendremos harmonía visual. Puedes consultar esta completa guía sobre los colores HSV.
3. Sigue la lógica de la luz
Una de las grandes aportaciones del diseño UI es la creación de efectos lumínicos para resaltar elementos importantes de una página. La luz crea volumen y profundidad en pantallas completamente planas, y aunque parece que iOS7 ha marcado una cierta tendencia hacia los diseños planos (véanse las últimas actualizaciones de la iconografía de iPhone), lo cierto es que la simulación del 3D sigue siendo muy presente en el diseño de interfaces.
La lógica nos dice que la luz es cenital, es decir, que viene de arriba. Tan sencillo como esto, si queremos darle naturalidad a nuestros diseños tendremos que cuidar este detalle: para resaltar paneles, menús, botones, iconos e incluso fondos, debemos tener en cuenta que la parte iluminada es la superior. Lo contrario crearía un efecto un tanto extraño a nuestros ojos.
4. Usa la luz para definir superficies
No olvidemos, tampoco, que además de la forma y el volumen (concavidad, convexidad o planicidad), la luz también puede definir la textura de una superficie, por ejemplo, mediante un reflejo que cree un efecto cristal.
Los degradados, los reflejos o las sombras sirven para enviar señales al cerebro e indicarle qué elementos de la interfaz de usuario está viendo. Si apuestas por un diseño más plano, limpio y de colores simples (estilo iOS7), probablemente preferirás no abusar de estos efectos y te bastará con una sutil sombra o degradado. Cuando un elemento cambie de función (por ejemplo, un botón pulsado o un menú desplegado) bastará con oscurecerlo o, simplemente, invertir su iluminación para crear un efecto de luz diferente.
5. El blanco y negro está de moda
Combinar colores con éxito no es una tarea fácil, aunque hay un truco que siempre funciona: el blanco y el negro. No es casualidad que las grandes marcas opten cada vez más por la combinación de un solo color – o varios de un solo matiz – con fondos en blanco y negro para dar ese toque de distinción y elegancia cuyo resultado, además, es muy funcional: existen muchos colores que pueden destacar sobre blanco y/o negro aportando una gran legibilidad, simplicidad y harmonía a los diseños. De hecho, esto obedece a una lógica aplastante: cuantos menos colores haya que combinar, mayor es la probabilidad de éxito. Es por ello que muchos diseñadores optan por hacer sus primeros bocetos en blanco y negro antes de añadir el color, de manera que pueden simplificar la complejidad de los elementos centrándose en la composición, el tamaño y los espacios. Lo dicho: si buscas limpieza y sencillez, el b/n siempre da buenos resultados.
6. Considera los espacios
Los espacios también cuentan a la hora de elegir los colores y la luz. El orden visual depende en gran parte del uso que se haga del espacio para que un diseño respire, y eso implica que debes dejar cierta distancia entre elementos como pestañas, menús, botones, incluso interlineado de texto. Cuanto más generoso seas con el espacio, más atractivas y sencillas serán tus interfaces y menos tendrás que emplearte a buscar un color que destaque por encima de los demás. En ese aspecto, el color blanco es el que te va a garantizar más limpieza de espacios, aunque los tonos oscuros pueden dar muy buen resultado combinados con textos blancos o sutilmente grises.
7. Elige con criterio
La adecuada elección del color no depende únicamente de la destreza técnica que emplee el diseñador para conseguir un acabado atractivo. Además de la claridad o la legibilidad, son muchos los factores que deben tenerse en cuenta antes de tomar una decisión. Si, como se ha dicho anteriormente, el diseño de interfaces se basa en la percepción y la experiencia del usuario, analizar su entorno te ayudará a entender mejor su comportamiento y a acertar en el uso del color bajo diferentes criterios relacionados con el target:
-
Cobertura: para que el producto que creas llegue a tantas personas como sea posible debes basarte en las necesidades y deseos de los usuarios, que pueden variar en función de la edad. El color que emplees puede tener una gran influencia en la accesibilidad.
-
Dispositivo receptor: la combinación de colores también deberá ir acorde con un diseño responsive que garantice un óptimo resultado para los distintos tamaños de pantalla con los que puede acceder el usuario. Un elemento que se vea atractivo y destaque en un monitor profesional puede convertirse en una mancha insignificante en una pantalla de baja resolución.
-
Ambiente: conocer bien a tu público objetivo y su potencial entorno te ayudará a elegir un esquema del color apropiado, por ejemplo, en términos de iluminación. Si el usuario utiliza con regularidad su dispositivo bajo luz natural, el uso de colores muy oscuros puede causar un reflejo indeseado que impida apreciar bien la pantalla.
-
Gustos, aficiones y clase social: según el perfil del usuario, sus gustos y aficiones pueden variar y ser determinantes en la elección del color. Primero, debemos preguntarnos qué esperan obtener de nuestro producto. La naturaleza, funcionalidad y contenido dicho producto no es arbitraria, de manera que si interesa más a un público joven o infantil, podrás seducirlo con una interfaz que utilice fondos brillantes o detalles divertidos, mientras que a un público mayor le atraerá más la simplicidad y un diseño intuitivo y navegable. Por otro lado, si te diriges a un target de alto poder adquisitivo, podrás decantarte por fondos oscuros y elegantes.
-
Competencia: ten siempre la antena puesta en el mercado si quieres hacer un producto competente que goce de popularidad. Investiga qué es lo que hace la competencia para innovar y aportar un valor añadido a tu diseño que lo haga destacar por encima de los demás. Esto también puede condicionar tu decisión acerca del color.
8. No te olvides de testear
Probablemente no hace falta que te lo recordemos, pero ningún buen diseñador se olvida de este paso. Puede ser – o no – el definitivo, pero sobre todo es muy necesario. Haz todas las pruebas necesarias antes de dar por acabado un diseño. La usabilidad solo se puede medir con una prueba real que nos demuestre que el usuario adopta el comportamiento esperado. Para estar seguro de la correcta aplicación del color y de que el resultado es atractivo testéalo en todas las resoluciones posibles y bajo diferentes soportes. Antes de lanzar el producto al mercado, abre un periodo de discusiones y opiniones que permitan visualizar los puntos fuertes y mejorar los débiles.
Te hemos dado algunas claves para elegir bien el esquema del color en el diseño UI. Aunque seguro que tú conoces algún truco más que puedas compartir. ¡Adelante!
