martes, 23 de febrero de 2016

Color para web Parte II



¿Cómo elijo la mejor combinación para mi sitio web?

Anteriormente hablamos sobre el color en sitios web y aplicaciones. Como vimos, se trata de un elemento de suma importancia para un proyecto y se involucra directamente en aspectos de diseño, usabilidad, accesibilidad y experiencia de usuario. Ahora bien, vamos a hablar acerca de cómo elegir los colores para un proyecto Web. Estos son algunos métodos y herramientas a tomar en consideración.


1.- Psicología del color.


Todo proyecto de diseño web debe girar en torno a un objetivo específico. La psicología del color nos ayuda a entender cuáles son las emociones que los usuarios perciben al ver los colores que hemos utilizado en nuestro diseño.

El color es importante, ya que inspira, y ayuda a establecer una relación con el usuario mientras éste interactúa con el sitio o aplicación.

Ahora bien, cada color está asociado con un significado que afecta al resultado final del diseño y de la experiencia de usuario. Por ejemplo, el rojo está asociado a la pasión y amor. El uso de este color es fundamental para la emisión de alertas o peligro. El verde está asociado a naturaleza y dependiendo del tono, puede ser asociado a la milicia o a los bosques. 

El morado es un color místico, excénrico y asociado con la realeza


Entender el significado de los colores, es de vital importancia a la hora de planear el diseño de un sitio web.

2.- Identidad Corporativa


Esta es una forma bastante sencilla de optar por una paleta de colores. Si trabajamos con una organización que tiene el respaldo de una identidad de marca. Lo más acorde, es utilizar los colores especificados en el branding o manejo de la marca, ya que previamente han sido elegidos por su significado, y están alineados con los objetivos, ideales y expectativas de clientes y usuarios.


El website de coca cola utiliza el color rojo característico de la marca

3.- Color a partir de una imagen


Una forma bastante eficiente para determinar el color de un Sitio Web o aplicación, es obtener una paleta de colores a partir de una imagen con una combinación natural de colores.
Para ello, es necesario utilizar Adobe Photoshop o cualquier otro editor de imágenes, que permita aplicar un filtro “Mosaico” sobre la imagen.

De esta forma, obtendremos un rangos de sombras y contrastes, de forma natural.





4.- Herramientas en línea


Partiendo de la teoría del color, existen diferentes herramientas en línea que permiten la creación de esquemas para diseños web. Aquí algunas de las que más me han llamado la atención.



Adobe Color CC


Previamente llamado Kuler, es un servicio de Adobe que permite la creación de paletas de colores mediante la rueda cromática o partir de una imagen. De igual forma permite guardar los colores en forma de temas.

Paletton




Antes conocido como Color Scheme Designer, es una herramienta similar a CC. Permite la creación de paletas mediante diferentes algoritmos matemáticos. Mi parte favorita es el poder apreciar los colores en forma de sitio web, patrón o patrón en movimiento.

Flat UI colors

Con el auge de las tendencias flat, esta herramienta nos proporciona los colores y códigos para utilizar en nuestra interface. Generalmente solo utilizan un valor para sombras y otro para iluminaciones. Permite exportar en el portapapeles, y ver en codigo RGB, o Hexadecimal.




ColourLovers

ColourLovers, es una comunidad creada para la creación de paletas de color, y compartiralas con otros aficionados al color. Puedes buscar paletas relacionadas con palabras clave o bien mediante código. Es una muy buena fuente de inspiración



Coolors

Creada por Fabrizio Bianchi, es una aplicación que permite crear paletas de color mediante iteraciones. Es una forma realmente sencilla de hacer combinaciones



Color hunter

Una herramienta creada para diseñar paletas de color a partir de imágenes. De igual forma, puedes encontrar paletas de color mediante palabras clave.


Shutterstock Spectrum

Muchas veces, la mejor forma de observar si una paleta de colores funciona, es por medio de imágenes de stock. Shutterstock ofrece una herramienta para encontrar fotografias mediante palabras clave o bien mediante tono y saturación.



martes, 9 de febrero de 2016

Color para sitios Web



El color es quizá el primer elemento que los usuarios perciben cuando visitan un sitio Web. Los colores trasmiten ciertas sensaciones y ello aportan un significado en composiciones gráficas. Es así, que los diseñadores debemos realizar las combinaciones de colores y crear paletas de color con la finalidad de complementar el mensaje que el sitio Web desea comunicar y reforzar la identidad de la empresa u organización detras del website.

Antes de empezar, debemos tener un concepto claro del color. El cerebro humano tiene la capacidad de recibir señales de luz provenientes de nuestro entorno. Al mismo tiempo, los materiales pueden reflejar o absorber las ondas de luz, que conforman los colores. Estos reflejos, son capaces de estimular las terminales nerviosas del cerebro, que es al fin de cuentas lo que interpretamos como color. El ojo humano percibe estas longitudes cuando la iluminación es abundante (por ejemplo, en el día) y el cerebro identifica cada color que conocemos, dependiendo de la longitud de onda que pueda percibir.



El color se puede clasificar de dos formas: orgánico y digital. La primera clasificación, es aquella que se refiere a los colores que se perciben en la naturaleza y la segunda, es exclusiva del color que se produce en medios electrónicos, por ejemplo en pantallas de led. Cuando la cantidad de luz es limitada, los colores se perciben en blanco y negro. Adicionalmente y con base en lo anterior, se identifican dos tipos de síntesis para la creación de colores: la síntesis aditiva(a partir de luz) y la sustractiva (pigmentos de color). En el primer caso, el color blanco resulta de la unión de todos los colores, mientras que el color negro resulta de la ausencia de los mismos. En la síntesis sustractiva, el color blanco representa la ausencia de color y el negro resulta de la combinación de todos los pigmentos. 

De igual forma, los colores también pueden ser clasificados de acuerdo con su posición en el círculo cromático recibiendo los nombres de primarios, secundarios y terciarios. 



  • Los primarios son aquellos que no pueden obtenerse mezclando otros colores.
  • Los secundarios son el resultado de la combinación de dos colores primarios.
  • Finalmente los colores terciarios resultan de la combinación de un color primario y un color secundario.

Por consiguiente, existen otros esquemas para determinar las relaciones entre los colores, permitiendo así la existencia de colores complementarios, colores complementarios dividíos, triadas de color y análogos. 


La elección de la combinación adecuada.


Por el lado de la organización, la elección adecuada de los colores en los sitios Web, enfatiza en la elección de una paleta representativa de la organización (por ejemplo colores corporativos) o bien, una paleta compuesta de colores relacionados con los objetivos del sitio. 
En el aspecto de los sitios Web, lo más importante es reconocer los tres principales factores que intervienen para la elección de una combinación de colores adecuada. Como se ha mencionado desde el principio de este apartado, esos elementos son el usuario, la organización y la tecnología. Pensar en el usuario, significa que los colores permitirán la correcta visualización de los elementos mediante el empleo de contrastes, luminosidad, brillo y legibilidad adecuados. El error más común, radica en la selección de colores que dificulten la lectura de la información y consumo de los contenidos o bien, que hagan a los usuarios realizar mayores esfuerzos con la vista, a tal punto que decidan abandonar el sitio. 

Por el lado de la organización, la elección adecuada de los colores en los sitios Web, enfatiza en la elección de una paleta representativa de la organización (por ejemplo colores corporativos) o bien, una paleta compuesta de colores relacionados con los objetivos del sitio. 

En el aspecto tecnológico, lo más importante que hay que destacar, es el uso adecuado de los esquemas de color. La Web principalmente utiliza el tipo de color aditivo, creado a partir de luz. La combinación de los tres colores primarios, e n este caso Rojo(R), Verde (G) y Azul (B) es la que posibilita visualizar cualquier color en las páginas Web. El RGB, es un modelo de colores y se utiliza principalmente para agrupar y controlar los colores en pantallas. Adicionalmente existen otros modelos, como CYMK y Websafe. El primero de ellos correspondiente a modelos de impresión y el segundo, un conjunto de colores seguros en las pantallas. Actualmente las hojas de CSS son capaces de utilizar ambos los modelos RGB y Websafe, para la definición de colores. Utilizar un modelo de color inapropiado, constituye un serio problema con la visualización del contenido de forma correcta (el modelo CYMK no es soportado por la Web).