Usar el color para mejorar su diseño – Usabilidad web y seo

Usar el color para mejorar su diseño

Vistas: 12
0 0
Tiempo de lectura:7 Minutos, 48 Segundos

El color es una de las herramientas de diseño más importantes e influyentes. En diseño, puede marcar la pauta para una marca e influir en su imagen, captar la atención de los usuarios, influir en sus emociones y mejorar la usabilidad. Sin embargo, encontrar la combinación de colores correcta puede ser complicado y requiere algunos conocimientos y práctica básicos.

Los colores son la forma en que nuestros ojos perciben diferentes longitudes de onda de luz. En 1666, Sir Isaac Newton identificó tres grupos de colores:

  • Elemental: amarillo, rojo, azul
  • Secundario: naranja, violeta, verde (mezcla de colores primarios)
  • Terciario: amarillo-naranja, rojo-naranja, rojo-violeta, etc. (mezcla de primario y secundario)

Newton se puso estos colores color rueda para ilustrar la relación entre ellos.

La rueda de colores muestra 3 grupos de colores. Los colores primarios se muestran en el círculo central más pequeño. Los colores secundarios están en el anillo del medio y el círculo exterior más grande está formado por colores terciarios (y todos los colores primarios y secundarios).

En las artes visuales, se realizan varios intentos para explicar qué colores se combinan entre sí; se conocen como color teoría… Si bien los detalles de la teoría del color están más allá del alcance de este artículo, el concepto central es la armonía del color: un conjunto de colores que funcionan bien juntos.

Puede pensar en las armonías de colores como bloques de construcción o como una plantilla de paleta de colores básica. A continuación, se muestran algunas armonías de colores comunes:

  • Término análogo: colores que están uno al lado del otro en la rueda de colores (esta armonía de color crea un contraste de color bajo).
  • Adicional: colores opuestos en la rueda de colores para un alto contraste de color
  • Por separado complementario: un color que coincide con otros a cada lado de su color complementario. Esta armonía suaviza un poco el contraste de los colores complementarios primarios.
  • Tríada: tres colores igualmente espaciados (120 grados de separación) en la rueda de colores
  • Monocromo: tonos y matices de un tono
Las armonías de colores se pueden utilizar para definir combinaciones de colores que funcionen bien entre sí. Análogo, complementario, tríada, complementario por separado y monocromático son esquemas básicos que no requieren demasiados colores.

También hay tipos de armonía que utilizan cuatro colores. Sin embargo, cuantos más colores ingrese, más difícil será equilibrar y mantener la jerarquía visual. Si tiene mucha experiencia con el color, puede experimentar con armonías más complejas, pero comience con dos o tres colores.

Si bien hay muchos artículos populares en Internet que detallan el significado de diferentes colores, hay poca investigación real para probar el efecto universal de un color en las emociones. En general, aunque con el advenimiento de la globalización, algunos colores pueden tener significados estándar (por ejemplo, rojo para detener, verde para ir), es más seguro asumir que la interpretación del color variará de una cultura a otra. Por ejemplo, ¿de qué color es el dinero: rojo (China) o verde (EE. UU.)? También tenga en cuenta que es posible que algunas personas no puedan distinguir ciertos colores debido al daltonismo.

Si está buscando un significado interpretativo de los colores en su diseño, entonces (a) tenga en cuenta que probablemente no funcionará a nivel mundial y (b) ejecute pruebas de usuario adicionales para asegurarse de que su interpretación del color coincida con la de sus usuarios. .

Las paletas de colores son una gama o colección de colores elegidos para un proyecto, marca o conjunto de diseños específicos. Cada color individual se agrega a propósito, y el conjunto general de colores da una idea de la estética visual de un producto o interfaz.

Creando una paleta de colores

Crear una paleta de colores puede ser un desafío. Las siguientes pautas pueden ayudarlo a crear una paleta de colores:

  • Seleccione una armonía de color (arriba) y repita colores individuales. Los esquemas monocromáticos suelen ser los más fáciles de crear y aplicar, por lo que si no tiene experiencia con el color, comience con esta armonía. Una vez que haya establecido la armonía, encienda y apague los diferentes colores para ver cómo funcionan y se ven juntos hasta que obtenga una combinación ganadora que le guste y funcione bien con su diseño. No sienta que tiene que hacerlo bien la primera vez. Si se siente atascado o simplemente no sabe por dónde empezar, inspírese en las paletas existentes (por ejemplo, use Adobe Color o explore los sitios web que le gustan). Trate de entender por qué le gusta un conjunto de colores en particular. ¿Es saturación de color? ¿Son suaves los colores? ¿Difícil? ¿Cálido o frío? Comprender por qué le gusta una paleta de colores en particular puede ayudarlo a avanzar en la creación de la suya propia.
  • Limite su paleta a tres colores. Menos colores mejoran la jerarquía visual y el contraste porque los usuarios se quedan con menos atención y distracción. Por ejemplo, ¿alguna vez ha tenido dificultades para encontrar un cereal específico en un pasillo de cereales? ¡Porque hay tantas flores! Todos los colores compiten por tu atención. Lo mismo ocurre con tus proyectos. Menos mas.
  • Siga las pautas de su marca para el color. Al crear una paleta de colores, siga siempre las pautas de color establecidas. No solo su trabajo será más fácil porque buscará menos opciones de color, sino que también creará una impresión de marca sólida y consistente. Si no tiene pautas de marca para el color, eche un vistazo a los colores utilizados en los diseños y productos existentes e intente incorporarlos a su paleta.
Nike El sitio web utilizó una paleta de colores sólidos minimalista de negro, blanco y gris. Esta elección de colores permite a los usuarios centrarse en productos y fotografías de productos.

Usando la paleta de colores

Una vez que tenga una paleta de colores, es hora de aplicarla a sus diseños y ver qué tan relevante es. A continuación se muestran algunas pautas:

  • Usa la regla 60-30-10. Esta regla simplemente significa que los colores deben usarse en el 60%, 30% y 10% de su área de diseño. Use 60% para el color dominante, 30% para el color secundario y 10% para el color de acento. Estas proporciones ayudan a crear equilibrio y previenen un desorden colorido y caótico. Como regla general, los colores dominantes y secundarios deben ser relativamente neutrales. Reserve un color de acento para lo que desea que se destaque más en su página, por ejemplo, para su llamado a la acción principal.
  • Aplicar, luego rehacer. Una vez que haya aplicado la regla 60-30-10, modifique los colores para mejorar la estética y resaltar lo que es importante en su diseño. Vea cómo funcionan los principios del diseño visual en su diseño. ¿Su elección de color ayuda a crear la jerarquía visual correcta? En otras palabras, ¿son los elementos de su diseño que desea resaltar los que llaman la atención? ¿Su elección de color crea equilibrio y contraste en sus diseños? Asegúrese de que el color se adapte a su diseño.
  • Utilice colores de forma coherente en toda su interfaz. Si está usando azul brillante para sus llamadas a la acción en una pantalla, ese mismo color debe usarse para las llamadas a la acción en todas partes (si no tiene realmente bueno el motivo de la desviación del uso de este color). Si está usando rojo como color de advertencia en una pantalla, no debe usarse para indicar otra cosa en otra parte. La coherencia es clave para ayudar a sus usuarios a comprender el uso del color.
La aplicación Apple News hizo un buen uso de la regla 60-30-10. El blanco y el gris claro son el color dominante, el azul es el menor y el rosa es el color de acento. Aproximadamente todos los colores se utilizan en una proporción de 60-30-10. El color de acento rosa es llamativo e invariablemente diseñado para Tocar así como Prueba 1 mes gratis llamadas a la acción y cualquier otro enlace importante, como Lee la historia.

Prueba de paleta de colores

  • Pon a prueba tu diseño. Después de haber aplicado una paleta de colores a su diseño, realice pruebas de usabilidad. Los colores pueden cambiar la usabilidad de botones, enlaces o cualquier otro tipo de componente. Por ejemplo, los botones grises a veces pueden parecer deshabilitados incluso si no están diseñados para hacerlo. También busque problemas de legibilidad y accesibilidad tanto con el contraste como con el daltonismo. Nos gusta usar available-colors.com para probar la disponibilidad de varias combinaciones de texto y fondo. Además, si su prueba de usabilidad muestra que algunos de sus colores no funcionan, regrese y repita el procedimiento con la paleta nuevamente.
Aunque UberEats siguió la regla 60-30-10 decentemente, logotipo verde Comiendo vibraba contra un fondo naranja y era increíblemente difícil de leer. Este es un ejemplo en el que la paleta de colores debe ajustarse para adaptarse a la legibilidad.

Elegir una paleta de colores y aplicarla al diseño no es una casualidad. Se necesita iteración y aplicación cuidadosa para obtener beneficios realmente útiles y aprovechar al máximo el color en la interfaz de usuario. El uso apropiado del color puede mejorar la percepción de la marca, captar la atención y estimular la interacción, influir en las emociones del usuario y mejorar la usabilidad.

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post Impulsar el diseño en una organización orientada a los negocios | Alden Tan | Junio ​​2021
Next post Cómo los profesionales de la salud pueden crear excelentes anuncios de conversión

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta