En Waka llevamos cientos de diseños web a la espalda, por tanto, contamos en nuestro modus operandi con un gran número de trucos y recursos que facilitan la navegación al usuario además de hacer que el diseño de tu web sea funcional y atractivo al mismo tiempo.
Son numerosas las decisiones que se toman cuando inicias el diseño de una web. Desde cómo será la navegación principal, la estructura de cada página, la distribución del contenido, etcétera. Entre estas decisiones encontramos numerosos valores formales que harán que tu diseño transmita diferentes sensaciones al usuario. Una de estas decisiones es el uso de los colores para una página web, y en eso nos vamos a centrar en este post.
Uso técnico de colores en web
Esto es muy básico, pero necesario, lo primerísimo es tener en cuenta el flujo de color con el que estamos diseñando. En la mayoría de programas de diseño gráfico puedes elegir el modo de color del documento. En el caso del diseño de una web será RGB, ya que estamos diseñando elementos que se verán en pantalla y por tanto se tratará de color luz.
Los colores en el código CSS o en el mismo HTML se pueden especificar de varias maneras, ya sea por su nombre, por sus valores en los canales rgb y rgba, o por sus tres pares hexadecimales. Por lo general usamos códigos hexadecimales de color o sus valores rgba en el caso de que queramos hacer un color con transparencia.
Aplicación de colores en los distintos elementos del diseño de una web
Como ya hemos comentado, hacer que una web sea de fácil navegación y atractiva para el usuario no es tarea fácil. Existen una serie de convencionalismos muy reconocibles y asimilados por el usuario medio de una web. Por ejemplo, si vemos una palabra o texto corto de color azul y subrayado dentro de un texto negro, automáticamente reconocemos un enlace, porque se trata de una convención web. Si hacemos que en lugar de azul sea verde, ese texto subrayado se sigue entendiendo como un enlace, aunque la relación no sea tan sumamente evidente.
Lo interesante es que podemos usar a nuestro favor este tipo de conocimientos previos del usuario. Si el usuario de tu web ve un texto blanco sobre un rectángulo rojo es posible que lo entienda como un botón, y que asimile que en tu web los botones y, por tanto, las interacciones son de color rojo. Hasta ahí todo correcto, pero ¿y si hacemos que el banner de también sea de color rojo? ¿Entenderá el usuario que se trata de una interacción especial? La respuesta es sí, úsalo porque funciona.
Coolors la herramienta para elegir colores de la que te enamorarás
Existen multitud de herramientas online que ayudan en la elección de colores para páginas web. Sin embargo, he seleccionado la que considero más amigable e intuitiva, y que está desarrollada específicamente para elegir colores en tu diseño web.
Se llama Coolors y es un generador automático de esquemas de color. Ha sido diseñada y desarrollada por Fabrizio Bianchi.
Su uso es muy sencillo, entras en el generador y automáticamente genera un grid de cinco franjas con cinco colores planos que, a priori, tienen armonía entre si. Puedes generar nuevas paletas pulsando la barra espaciadora, también puedes bloquear los colores que te hayan gustado para no perderlos y que la nueva paleta de colores web se genere en base a ellos. También puedes mover cada color en el grid, ajustar luminosidad, tono, saturación y brillo, tanto en sus valores RGB como CMYK o sus equivalencias con los colores de las marcas Pantone, Copic o Prismacolor.
Esta herramienta es intuitiva, sencilla, bien diseñada y además genera paletas de colores muy interesantes. En definitiva, es muy práctica para encontrar una buena combinación de colores para paginas web. ¿Qué mas podemos pedir?
