clickug

Regístrate GRATISAñade tus productos GRATISAccede

¡Crea una cuenta y publica tus noticias GRATIS!

Fibo Group 10,821

Soy un amante del Forex, me gusta escribir y operar en este medio.

http://es.fibogroup.com/

Lima

Seguir

Perú Noticia nº201.962 Marcar esta noticia como inapropiada notificar un error técnico Incrementar el tamaño de los caracteres del texto Disminuir el tamaño de los caracteres del texto72 clics
Contacto:Juan Garza
contacto
5676299

19 de Abril de 2017  |   Tiempo de lectura: 7 minutoshttp://click.ug/9a9jBA

La paleta de colores y los efectos que debemos considerar para realizar el trabajo de diseño.

Diseño grafico: Guía de color y tarifas de conversión

El color es una de las herramientas más poderosas del kit de herramientas del diseñador.

Ver las imágenesrecomendar esta noticia por emailVer las citaciones standard de esta noticiaObtener dirección corta
/Clickug/ No debe sorprender que los diferentes colores evocan diferentes emociones y llaman la atención de los usuarios. Pero si alguna vez trató de diseñar un nuevo proyecto, sabes lo difícil que es decidir sobre un esquema de color que funcione bien para él cliente.

Para empezar, he
compilado una guía de referencia rápida que cubre la teoría de los colores básicos y cómo se relacionan con el diseño UX. Este artículo no pretende ser una guía completa de cómo aplicar el color a su diseño, sino más bien, es una visión general de la teoría del color dentro del contexto de UI y UX proyecto de diseño.

Teoría del Color

La teoría del color abarca realmente un número de cosas, pero en el nivel muy básico es la interacción de colores en un diseño a través de la complementación, el contraste y la vitalidad:

- La complementación se refiere a la forma en que vemos los colores en términos de sus relaciones con otros colores. La elección de colores en los extremos opuestos del espectro crea una armonía visual para los ojos. Hay dos usos comunes de la complementación: el esquema de colores triádico y compuesto que discutiremos a continuación.
- El contraste reduce la fatiga ocular y enfoca la atención del usuario al dividir claramente elementos en una pantalla. Un alto contraste entre elementos hace que el texto sea fácilmente legible, y guía la atención de su lector. El ejemplo más evidente de contraste es una selección efectiva de fondo y color de texto, como veremos a continuación.
- La vibración es una implicación emocional del color. Este tema fue cubierto completamente en el artículo Crear emoción con color en diseño UX.

Rueda de color

Una rueda de color o círculo de color es una organización ilustrativa de tonalidades de color alrededor de un círculo. Cada sombra de color tiene un conjunto opuesto y se puede utilizar la rueda de color para encontrar el color específico de cada contrario.

Esta rueda de color también muestra los colores primarios, secundarios y terciarios. Los colores primarios (rojo, amarillo y azul) se pueden mezclar para crear colores secundarios (naranja, verde y morado). El blanco se puede agregar a un color para crear tintes, y el negro se puede agregar para crear cortinas.

Crear un esquema de color efectivo

Aquí están 3 de las estructuras comúnmente aceptadas para un buen esquema de colores: triádico, compuesto y análogo:

Triádica. El triádico es el más básico y equilibrado de las tres estructuras. Se compone de 3 colores en los extremos separados del espectro de color. Hay una manera muy fácil de crear un esquema de colores triádico: tomar una rueda de color, elija su color base y dibujar un triángulo equilátero de este punto. Los tres puntos del triángulo formarán su esquema tricolor.
Colores rojos, amarillos y azules situados a 120 grados uno del otro. Pueden ser utilizados para esquema de colores triádicos.

Mediante el uso de un triángulo equilátero, puede asegurarse de que los colores tengan la misma vitalidad y se complementen correctamente.

Compuesto. Los colores que están opuestos entre sí en la rueda son complementarios. Ellos contrastan fuertemente, y pueden usarse para atraer la atención del espectador.

Por ejemplo, el complemento de rojo es verde. Echa un vistazo al ejemplo de notificación de las llamadas perdidas en Apple iOS. El esquema de color complementario enfoca inmediatamente la atención del usuario en eventos importantes.

Análogo. Los colores que están al lado del otro en la rueda son análogos. Pueden usarse para crear un sentido de armonía y continuidad en un diseño. Mientras que este esquema es relativamente fácil de quitar, el truco está en decidir qué vibración del color utilizar, pues será exagerado. Un esquema de color análogo se basa en una selección cuidadosa de colores en la misma área del espectro de color.
Los tonos amarillo y naranja son un ejemplo de un esquema de color análogo.

Una aplicación de gestor de tareas basada en gestos elimina el uso de colores análogos para priorizar visualmente las tareas importantes y resaltar las más críticas (los elementos superiores serán los más audaces en color, mientras que los elementos inferiores en la lista serán más claros y sutiles).

Esquema de color análogo

El esquema de color análogo se puede utilizar para crear los humores y la atmósfera correcta para su app o sitio. Por ejemplo, una aplicación de meditación Calm utiliza los colores análogos azul y verde para ayudar a los usuarios a sentirse relajado y pacífico.

La mejor manera de aprender a crear hermosos esquemas de color es practicar. Puede utilizar herramientas automatizadas para hacer esto al principio. Una herramienta desarrollada por Adobe, Color CC tiene como objetivo proporcionar una forma intuitiva de crear una paleta de colores. La herramienta tiene una interfaz muy intuitiva, por lo que cada color en la paleta puede ser modificado individualmente y una paleta final se puede guardar con unos simples clics.

Adobe Color CC (anteriormente conocido como Kuler) es una gran herramienta para la creación de esquema de color.

Colores en texto

Cuando esté usando colores en el texto, tenga en cuenta que colocar dos colores con contraste de bajo valor al lado del otro puede hacer que su copia sea muy difícil de leer (ya sean colores complementarios o análogos). Esto es especialmente cierto en las pantallas móviles, donde los usuarios son más propensos a estar al aire libre y tienen el brillo en una pantalla.

La falta de contraste entre el texto y su fondo hará que sus usuarios se sientan locos. Sus ojos no sabran en qué color concentrarse. El texto de mayor contraste es mucho más legible.

Las Pautas de Accesibilidad para el Contenido Web de WC3 son un buen punto de partida. Establecen estándares mínimos de contraste para que los usuarios con visión moderadamente baja puedan leer su texto. Según la WC3, la relación de contraste entre un color y su fondo oscila entre 1 y 21, según su luminancia o intensidad de luz emitida. El W3C recomienda las siguientes relaciones de contraste para el texto del cuerpo y el texto de la imagen:

- El texto pequeño debe tener una relación de contraste de al menos 4,5: 1 contra su fondo.
- Texto grande (en 14 pt negrita / 18 pt) debe tener una relación de contraste de al menos 3: 1 contra su fondo.
- Las líneas de texto que no cumplan las recomendaciones de relación de contraste de color y sean difíciles de leer en relación con sus colores de fondo, deben de ser desechadas.

Diseño

Una vez que haya hecho su elección de color, es absolutamente necesario probarlo con usuarios reales en la mayoría de los dispositivos. Si alguna de las pruebas muestra un problema con la lectura de su copia, puede estar seguro de que los usuarios tendrán exactamente el mismo problema.


El impacto del color en las tasas de conversión

Teoría del color en el diseño de la interfaz de usuario es algo más que una decoración visual, puede tener efectos de cambio de juego en su negocio. Para esta sección nos centraremos en los botones CTA.

Un botón de llamada a la acción es una colección de 4 cosas: colocación, forma, copia y color. Si estos 4 aspectos están en línea con los demás, tendrás un gran botón de llamada a la acción. El color del botón es uno de los debates más antiguos en el mundo de la conversión y la optimización. Hay muchos resultados de pruebas A / B que muestran cómo un cambio en el color de un botón CTA hace un impacto drástico en inscripciones.

El contraste es una clave

Si desea que los usuarios hagan clic en algo, haga que se destaque. Si su sitio o aplicación utiliza mucho de azul, los usuarios probablemente no notarán un botón azul de inmediato, al igual que un botón de luz que no se destaca en un fondo claro. Los usuarios muchas más probabilidades de hacer clic en un botón de CTA que contrasta fuertemente con el fondo.

El uso de una variedad de colores contrastantes puede ayudar a enfocar la atención del espectador en elementos específicos de la página (como CTA).


Conclusión

Una comprensión básica del uso del color es un requisito previo sólido para el diseño web y de aplicaciones. Lo que acabamos de comentar son sólo los fundamentos de cómo la teoría del color puede mejorar su diseño de interfaz de usuario, pero no hay límite en lo profundo que puede ir con los colores de su aplicación. No importa qué colores usted elija, estos tienen una influencia definitiva en el diseño en conjunto - de comunicar el contraste o la similitud, a evocar emociones exactas.

"Los iconos son una parte muy necesaria en los diseños responsives"
 
Difundido el:
19 de Abril de 2017
Actualizado el:
19 de Abril de 2017 13:07
Ubicación:
Lima, Provincia de Canta, Departamento de Lima (Perú)
Fuente:
Fibo Group
Página web:
Marca:
Icons8
Tipo:
Artículo de blog
Zona de impacto:
Internacional
Palabras clave:
Color, Diseño, Conversión, Usabilidad, Accesibilidad
Copyright ©:
Si quieres reproducir esta noticia, contacta con la fuente.
Imágenes

© Icons8 - Guía de color y tarifas de conversión

Contacto de comunicación
Nombre:
Juan Garza
Correo electrónico:
Teléfono:
5676299
Dirección:
Av Lima 3999
 

USO DE COOKIES: Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarte contenidos relacionados con tus preferencias mediante el análisis de tus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso. Puedes obtener más información, o bien conocer cómo cambiar la configuración, en nuestra Política de Privacidad