Un espectro de posibilidades: la guía de colores de la interfaz de usuario
Publicado: 2022-03-11No hay forma de evitarlo: el color es el elemento creativo más impactante en el diseño visual. Desde los encantadores fondos escénicos del diseño de escenarios hasta las complejas composiciones del arte de píxeles, una sólida comprensión del color es la clave maestra para una comunicación convincente. ¿Necesitas pruebas?
Cuando se desafió a los participantes en un estudio reciente centrado en la marca a dibujar los logotipos de 10 corporaciones icónicas, solo el 16% pudo recordar formas precisas y características de diseño. Sin embargo, cuando se les pidió que identificaran la paleta de colores de una marca, el número de respuestas correctas se disparó hasta el 80%.
El color también juega un papel influyente en el mundo del diseño de interfaces de usuario. Los productos digitales con los que interactuamos a diario se basan en el uso estratégico del color para comunicar información importante, por lo que es fundamental que los diseñadores de UX y UI comprendan cómo manejar el color de manera inteligente.
En esta guía, haremos lo siguiente:
- Desmitificar los fundamentos de la teoría del color,
- Proporcionar principios sólidos como una roca para trabajar con color en interfaces digitales,
- Comparta recursos útiles para crear conciencia sobre el color y
- Permita que los diseñadores de UI creen sus propios esquemas de color extraordinarios.
El objetivo de esta guía es la competencia en el color, seguido de la confianza en el color, todo en aras de una asombrosa ejecución del color en las interfaces de usuario que encontramos todos los días.
Curso acelerado: Teoría del color para diseñadores de UI
La teoría del color es un campo de estudio en expansión con su propia terminología, metodología y bases científicas. Puede ser complicado, pero eso no es lo que queremos. Lo que queremos es una comprensión del color que se pueda aplicar con una precisión ultrarrápida. Queremos usar el color de la misma manera que usamos las formas: sin esfuerzo, con audacia y de manera efectiva.
Para usar el color de esta manera, los diseñadores de UI deben tener una sólida comprensión de estos conceptos básicos de la teoría del color:
- El color es relativo.
- La sobrecarga de saturación mata la vitalidad del color.
- El contraste simultáneo tiene pros y contras.
- Los esquemas de color básicos son los mejores.
- El tono siempre afecta el valor.
Vamos a profundizar en.
El color es relativo
El color nunca está solo. Como el ojo humano y el cerebro trabajan juntos para ver un color, siempre están influenciados por:
- Luz que brilla en el color
- Otros colores que rodean el color.
Mira este ejemplo de la naturaleza:
R: El cerebro y el ojo trabajan juntos para ayudarnos a comprender que la flor en su conjunto es en realidad de color rojo brillante.
B y C: El marrón oscuro de la sombra de la flor (B) hace que el punto culminante de la cresta del pétalo (C) parezca mucho más brillante que el color granate apagado que en realidad es. Esencialmente, la luz que brilla en la cresta del pétalo y el color de la sombra funcionan en conjunto para engañar al ojo e intensificar el brillo.
Aquí hay otro ejemplo que muestra cuán engañoso puede ser el color:
En el diseño de la interfaz de usuario, la relatividad del color no siempre es tan obvia, por lo que los colores dentro de un esquema deben compararse entre sí. ¿Por qué? Porque esa selección de colores bellamente organizada en su guía de estilo puede resultar problemática cuando se aplica a una interfaz.
¿La gran comida para llevar? No mimes tus conceptos de color. Si una muestra de amarillo acentuado se ve exuberante cuando está rodeada de espacios en blanco en Sketch pero choca con el esquema de color dominante de una interfaz de usuario, busque una solución diferente.
La sobrecarga de saturación mata la vitalidad del color
La saturación de color es parte integral de la vitalidad del color. Sin embargo, un esquema ensamblado alrededor de nada más que colores altamente saturados abruma el ojo y disminuye la vitalidad. Con color, menos es más. Un color altamente saturado se vuelve vibrante cuando se usa junto con colores menos saturados.
El contraste simultáneo tiene pros y contras
El contraste simultáneo ocurre cuando los complementos de color del mismo valor exacto se colocan uno al lado del otro. El efecto es tan intenso que hace que el punto donde se encuentran los dos colores vibre o pulse.
Para los diseñadores de IU, el contraste simultáneo puede tener resultados positivos y negativos, por lo que es importante entender cómo controlar la potencia de este fenómeno visual.
Por ejemplo, en una interfaz diseñada en torno a una variedad de azules, usar un naranja complementario con el mismo valor que el color de anclaje azul sería una excelente manera de llamar la atención sobre los íconos de notificación.
Sin embargo, esa misma combinación de naranja y azul provocaría migraña si se usara para el texto y el fondo de los menús desplegables.
Los esquemas de color básicos son los mejores
Los arcoíris son hermosos en la naturaleza. En el diseño de la interfaz de usuario, el color debe usarse de manera más selectiva o abrumará la experiencia. Incluso cuando las marcas tienen paletas de alto impacto con una amplia gama de opciones, es mejor mostrar moderación y crear interfaces de usuario en torno a esquemas de color simples.
Aquí hay dos planes infalibles para construir un esquema de color de interfaz de usuario básico:
1. Esquemas de color de interfaz de usuario análogos
- Estos esquemas agradables a la vista consisten en colores que están estrechamente agrupados en la rueda de colores.
- Los esquemas de color análogos son fáciles de encontrar en fotografías de ambientes naturales, especialmente vida vegetal, y tienden a ser visualmente relajantes.
- La variedad en esquemas análogos proviene de cambios en la saturación y el brillo, no de cambios importantes en el matiz.
- Cuando use un esquema análogo, intente agregar un color altamente saturado directamente desde el otro lado de la rueda de colores para crear énfasis dentro de una interfaz.
2. Esquemas de color de interfaz de usuario complementarios
- Los esquemas de colores complementarios se basan en la interacción de los colores cálidos y fríos complementarios que existen uno frente al otro en la rueda de colores.
- La variedad de colores se logra alterando la saturación y el brillo entre los extremos complementarios.
- El uso de demasiados colores brillantes y altamente saturados socava el impacto de los esquemas complementarios.
El tono siempre afecta el valor
Esto puede sonar extraño, pero los colores tienen valores de gris correspondientes. Aquí está la prueba:
En la imagen de arriba, tenemos una gama de tonos con un brillo y una saturación del 100 %, pero mira lo que sucede cuando estos colores se convierten a escala de grises:
¡Auge! Se revela toda una gama de valores de gris. ¿Por qué es importante esto para los diseñadores de UI? Una palabra: contraste .
Cambie su mente a escala de grises por un momento. Si estuviera buscando crear contraste, ¿usaría alguna vez un valor de gris del 40 % además del 50 %? Por supuesto que no, pero esto es exactamente lo que se arriesga cuando el tono se deja fuera de la ecuación de contraste de color.
Recuerde, el tono siempre afecta el valor.
4 principios de color esenciales para interfaces digitales
Ahora que hemos simplificado la teoría del color y hemos relacionado sus conceptos básicos con el diseño de la interfaz de usuario, es el momento de analizar con más detalle el papel que juega el color en las interfaces digitales. Estos son los cuatro principios de color que deben tenerse en cuenta desde los primeros esfuerzos de cada proyecto de diseño de interfaz de usuario.
- La relación entre el texto y el color es crucial.
- La accesibilidad del color no se puede ignorar.
- El contraste es esencial, pero no es una panacea de diseño.
- El color funciona mejor cuando se aplica proporcionalmente.
La relación entre el texto y el color es crucial
El color afecta la legibilidad. La mayoría de los diseñadores de UI entienden esto en principio, por lo que no vemos muchas interfaces con texto de cuerpo verde sobre fondos rojos. En cambio, la tensión entre el texto y el color aparece sutilmente, filtrándose a través de los componentes comunes de la interfaz de usuario, como formularios, botones, encabezados e íconos.
Mantenga una relación saludable entre texto y color siguiendo estas sencillas pautas:
- Evite siempre el bajo contraste entre el texto y el fondo.
- No utilice colores complementarios para el texto y el fondo, especialmente cuando los colores tienen un brillo y una saturación similares (p. ej., texto amarillo sobre un fondo morado).
- Incluso en fondos blancos, no configure el cuerpo del texto en colores brillantes. El negro y el gris oscuro son los más fáciles de leer.
La accesibilidad del color no se puede ignorar
El color es comunicativo, pero no puede ser el único elemento de diseño utilizado para transmitir información en una interfaz de usuario. ¿Por qué no? Porque algunos usuarios de la web perciben el color de manera diferente (o no lo perciben en absoluto) que la mayoría de la población.
Por ejemplo, es posible que una persona que experimenta daltonismo no pueda saber cuándo el ícono de un producto está en su estado "presionado" si la única diferencia en el ícono es un cambio de color.
Además, algunas personas tienen dificultad para ver los componentes importantes de la interfaz de usuario que tienen poco contraste de color con el fondo de la interfaz. Sitios como Colorable y Contrast Ratio permiten a los diseñadores probar rápidamente una gama de combinaciones de colores para acceder al contraste.
El contraste es esencial, pero no es una panacea de diseño
Sí, el contraste de color en el diseño de la interfaz de usuario es importante. Planifíquelo, impleméntelo, benefíciese de ello. Pero no espere agitarlo como una varita mágica y corregir un diseño deficiente.
No se deben ignorar la forma, el espacio, el tamaño y otros elementos de diseño. El contraste de color puede hacer que una interfaz de usuario horrible se vea atractiva, pero no solucionará una mala experiencia de usuario.
El color funciona mejor cuando se aplica proporcionalmente
Imagine una aplicación de noticias donde cada instancia de texto se establece en mayúsculas o minúsculas o un sitio web de comercio electrónico diseñado en una cuadrícula de imágenes de 9x9. ¡Ambos serían terribles!
Los diseñadores de UI inteligentes emplean elementos de diseño como tipografía y repetición proporcionalmente para mejorar la jerarquía de diseño. El color merece la misma consideración cuidadosa. En el diseño de la interfaz de usuario, el uso de demasiados colores confunde la forma en que se percibe la información.
Recursos de color para el progreso continuo
Aquí hay una verdad incómoda: diseñar con color es una habilidad, y las habilidades deben desarrollarse. La mayoría de los diseñadores de UI tienen un sentido innato de qué colores se ven bien juntos (también conocido como gusto de color), pero esto no siempre se traduce en la aplicación.
Para dominar verdaderamente el color y ver su impacto completo en el diseño de la interfaz de usuario, los diseñadores deben practicar. Afortunadamente, hay muchos recursos para ayudar con el aprendizaje continuo del color y el desarrollo de habilidades.
Ctrl+Pintar
Si es un diseñador de interfaz de usuario que busca ganar confianza en el color de inmediato, comience con ctrlpaint.com, un sitio web dedicado a la instrucción de pintura digital. ¿Pintura digital? ¿En serio?
Absolutamente. El artista conceptual profesional Matt Kohr enseña el uso del color digital a través de breves tutoriales en video y ejercicios prácticos. El plan de estudios es maravillosamente simple y se centra en "pintar lo que ves", tanto en el mundo físico como en la imaginación.
Comience con la biblioteca de videos gratuita (Sección 11) antes de pasar a los ejercicios más intensivos del Color Starter Kit .
Josef Albers y la aplicación Interaction of Color
La comprensión contemporánea de la relatividad del color fue ampliamente explorada y avanzada por el enfoque de práctica antes que teoría del artista/educador Josef Albers.
Albers propuso que un solo color podría tener "muchas caras" y alentó el juego y la experimentación extensivos entre sus estudiantes con la esperanza de que "se abrieran los ojos" para ver el color como realmente se comporta en el mundo real (a diferencia de los colores simbólicos que imaginamos). en nuestra mente).
En 1963, Albers escribió Interaction of Color , un libro de texto que sigue siendo muy influyente en la educación mundial en arte y diseño. Para celebrar el 50 aniversario de la publicación del libro, la Universidad de Yale lanzó una aplicación interactiva para iPad que contiene el texto completo pero que también permite a los usuarios jugar y experimentar con las láminas en color de Albers.
Para los diseñadores de UI, la aplicación Interaction of Color brinda la oportunidad de experimentar ejercicios de color analógicos en un entorno digital y ver de primera mano cómo la relatividad del color afecta las interfaces de usuario.
andres loomis
Durante la primera mitad del siglo XX, Andrew Loomis fue un destacado ilustrador e instructor en la Academia Estadounidense de Arte de Chicago, pero su legado perdurable es el de autor. Loomis escribió seis libros sobre arte y diseño comercial y cubrió una variedad de temas, desde el dibujo de figuras hasta la colocación de productos.
En sus libros Creative Illustration y Eye of the Painter (ambos disponibles en archive.org), Loomis deja caer una serie de líneas perdurables que siguen siendo relevantes para el campo moderno del diseño de interfaz de usuario:
El mayor error en el color, y el que provoca falta de unidad y armonía, es tener demasiados colores en la paleta.
Dos colores cualesquiera serán armoniosos cuando uno o ambos contengan algo del otro.
El color se presta a experimentar más que cualquier otro elemento de belleza.
Interfaces de otros diseñadores
Una vez que se alcanza un nivel básico de competencia de color, la creación de esquemas de color se convierte en una actividad fascinante. Cada interfaz encontrada se convierte en una oportunidad para el aprendizaje y la crítica, y abundan las observaciones.
Esta es la etapa del desarrollo de un diseñador de interfaz de usuario en la que hacer referencia al trabajo de otros diseñadores se convierte en una fuente de poder. ¿Cómo es eso? Porque la referencia se mueve del destino al viaje, del punto final a la inspiración.
Los diseñadores de UI de todos los niveles se beneficiarán de mantener un registro continuo de los esquemas de color de UI encontrados. Tome capturas de pantalla, mantenga un diario de color físico, inicie un tablero de estado de ánimo, lo que sea necesario para imprimir momentos de iluminación de color para futuras implementaciones.
El color es demasiado importante para ignorarlo
Cuando se trata del diseño de interfaces digitales, el color no es una consideración opcional. Incluso en las IU que emplean un color mínimo (o aquellas que son completamente en blanco y negro), es imperativo que los diseñadores de IU entiendan por qué se usa o no el color y cómo afecta esto a la experiencia del usuario.
También es importante que los diseñadores de UI tengan la capacidad de generar e implementar esquemas de color originales. Hacer referencia al trabajo de otros diseñadores y productos digitales es una práctica que vale la pena, pero esto se vuelve limitante cuando es el único método de exploración del color que se lleva a cabo durante el proceso de diseño. Hay un inmenso valor en poder capturar combinaciones de colores vistas en el mundo real o en el ojo de la mente.
Si eres un diseñador al que le ha costado usar el color hábilmente o si alguna vez has pensado: "Realmente no tengo un don para el color", no te desanimes. Diseñar con color no es una forma de magia creativa o un regalo especial; es una disciplina práctica basada en técnicas simples que se pueden repetir y mejorar.
Recuerde, el color es la clave maestra para una comunicación de diseño clara y convincente. Ya sea que se implemente con cuidado o con un abandono imprudente, impacta la conversión, el conocimiento de la marca y la experiencia del usuario. Para el diseñador de UI, el color es una herramienta poderosa que simplemente no se puede ignorar.
• • •
Lecturas adicionales en el blog de diseño de Toptal:
- El papel del color en UX
- Creación de una guía de estilo de interfaz de usuario para una mejor experiencia de usuario
- UX y la importancia de la accesibilidad web
- Arte versus diseño: un debate atemporal
- Diseño para entornos interactivos y espacios inteligentes