En un contexto en que el usuario es el centro de todas las miradas, el dise\u00f1o web ha vuelto a fijarse en las leyes de la percepci\u00f3n humana (figura, fondo, color, movimiento\u2026) para enriquecer su experiencia al comp\u00e1s de los constantes avances tecnol\u00f3gicos. El objetivo principal del dise\u00f1o UI (User Interface) es mejorar la interacci\u00f3n del usuario desde cualquier dispositivo a partir de unos patrones est\u00e9ticos que apelan directamente a sus emociones. No solo trata de conseguir dise\u00f1os m\u00e1s atractivos y legibles: el dise\u00f1o de interfaz de usuario trabaja codo a codo con el dise\u00f1o UX (User Experiencie) para que las marcas influyan en la mente y el coraz\u00f3n del usuario.<\/p>\n
Es muy importante que elementos como el tono, el color o la luz se combinen de manera eficaz. A continuaci\u00f3n te explicamos algunos trucos para elegir bien el esquema del color en el dise\u00f1o UI.<\/p>\n
Para empezar, es bueno recordar que para estar actualizados con las tendencias de dise\u00f1o<\/a> en Internet debemos seguir de cerca las indicaciones de los gigantes tecnol\u00f3gicos. A la hora de elegir la paleta de colores, Google recopila unos cuantos consejos sobre la aplicaci\u00f3n del color adem\u00e1s de aspectos como la profundidad, las sombras, las transiciones y las animaciones en su paquete de trucos Material Design<\/a>. Por su parte, el Desarrollador Android<\/a> nos ofrece una gu\u00eda similar.<\/p>\n El modelo de color HSV va m\u00e1s all\u00e1 de los c\u00f3digos hexadecimales RGB que se suelen usar en p\u00e1ginas web. Todo dise\u00f1ador UI deber\u00eda familiarizarse con este modelo, pues en esencia describe la percepci\u00f3n del ojo humano: genera m\u00faltiples colores a partir de un \u00fanico matiz en funci\u00f3n de distintas variables (brillo, saturaci\u00f3n), de modo que nos indica la forma en que pensamos en el color y nos permite predecir c\u00f3mo sus combinaciones afectar\u00e1n a los dem\u00e1s colores. Con los matices obtendremos harmon\u00eda visual. Puedes consultar esta completa gu\u00eda sobre los colores HSV<\/a>.<\/p>\n Una de las grandes aportaciones del dise\u00f1o UI es la creaci\u00f3n de efectos lum\u00ednicos para resaltar elementos importantes de una p\u00e1gina. La luz crea volumen y profundidad en pantallas completamente planas, y aunque parece que iOS7 ha marcado una cierta tendencia hacia los dise\u00f1os planos (v\u00e9anse las \u00faltimas actualizaciones de la iconograf\u00eda de iPhone), lo cierto es que la simulaci\u00f3n del 3D sigue siendo muy presente en el dise\u00f1o de interfaces.<\/p>\n La l\u00f3gica nos dice que la luz es cenital, es decir, que viene de arriba. Tan sencillo como esto, si queremos darle naturalidad a nuestros dise\u00f1os tendremos que cuidar este detalle: para resaltar paneles, men\u00fas, botones, iconos e incluso fondos, debemos tener en cuenta que la parte iluminada es la superior. Lo contrario crear\u00eda un efecto un tanto extra\u00f1o a nuestros ojos.<\/p>\n No olvidemos, tampoco, que adem\u00e1s de la forma y el volumen (concavidad, convexidad o planicidad), la luz tambi\u00e9n puede definir la textura de una superficie, por ejemplo, mediante un reflejo que cree un efecto cristal.<\/p>\n Los degradados, los reflejos o las sombras sirven para enviar se\u00f1ales al cerebro e indicarle qu\u00e9 elementos de la interfaz de usuario est\u00e1 viendo. Si apuestas por un dise\u00f1o m\u00e1s plano, limpio y de colores simples (estilo iOS7), probablemente preferir\u00e1s no abusar de estos efectos y te bastar\u00e1 con una sutil sombra o degradado. Cuando un elemento cambie de funci\u00f3n (por ejemplo, un bot\u00f3n pulsado o un men\u00fa desplegado) bastar\u00e1 con oscurecerlo o, simplemente, invertir su iluminaci\u00f3n para crear un efecto de luz diferente.<\/p>\n Combinar colores con \u00e9xito no es una tarea f\u00e1cil, aunque hay un truco que siempre funciona: el blanco y el negro. No es casualidad que las grandes marcas opten cada vez m\u00e1s por la combinaci\u00f3n de un solo color \u2013 o varios de un solo matiz – con fondos en blanco y negro para dar ese toque de distinci\u00f3n y elegancia cuyo resultado, adem\u00e1s, es muy funcional: existen muchos colores que pueden destacar sobre blanco y\/o negro aportando una gran legibilidad, simplicidad y harmon\u00eda a los dise\u00f1os. De hecho, esto obedece a una l\u00f3gica aplastante: cuantos menos colores haya que combinar, mayor es la probabilidad de \u00e9xito. Es por ello que muchos dise\u00f1adores optan por hacer sus primeros bocetos en blanco y negro antes de a\u00f1adir el color, de manera que pueden simplificar la complejidad de los elementos centr\u00e1ndose en la composici\u00f3n, el tama\u00f1o y los espacios. Lo dicho: si buscas limpieza y sencillez, el b\/n siempre da buenos resultados.<\/p>\n Los espacios tambi\u00e9n 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\u00f1o respire, y eso implica que debes dejar cierta distancia entre elementos como pesta\u00f1as, men\u00fas, botones, incluso interlineado de texto. Cuanto m\u00e1s generoso seas con el espacio, m\u00e1s atractivas y sencillas ser\u00e1n tus interfaces y menos tendr\u00e1s que emplearte a buscar un color que destaque por encima de los dem\u00e1s. En ese aspecto, el color blanco es el que te va a garantizar m\u00e1s limpieza de espacios, aunque los tonos oscuros pueden dar muy buen resultado combinados con textos blancos o sutilmente grises.<\/p>\n La adecuada elecci\u00f3n del color no depende \u00fanicamente de la destreza t\u00e9cnica que emplee el dise\u00f1ador para conseguir un acabado atractivo. Adem\u00e1s de la claridad o la legibilidad, son muchos los factores que deben tenerse en cuenta antes de tomar una decisi\u00f3n. Si, como se ha dicho anteriormente, el dise\u00f1o de interfaces se basa en la percepci\u00f3n y la experiencia del usuario, analizar su entorno te ayudar\u00e1 a entender mejor su comportamiento y a acertar en el uso del color bajo diferentes criterios relacionados con el target<\/em>:<\/p>\n2. Explora los matices<\/h2>\n
3. Sigue la l\u00f3gica de la luz<\/h2>\n
4. Usa la luz para definir superficies<\/h2>\n
5. El blanco y negro est\u00e1 de moda<\/h2>\n
6. Considera los espacios<\/h2>\n
7. Elige con criterio<\/h2>\n