La web es un arco iris de opciones de color. El color es una excelente herramienta para captar la atención de los usuarios, proporcionar interés e impacto visual y crear contraste para facilitar la lectura. El color también está en el centro de muchas tendencias de diseño, incluidos los estilos planos y materiales.
¿Pero puedes equivocarte con el color? ¿Hay tonalidades o combinaciones que deberías evitar? ¿En una palabra? ¡sí! Hoy buscamos colores o combinaciones de colores que debes evitar al diseñar sitios web y aplicaciones. (Y ante la posibilidad de que ya haya cometido uno de estos errores, también ofrecemos sugerencias alternativas).
Neones
Los colores de neón pueden ser divertidos, intensos y agregar mucho pop a un diseño. Desafortunadamente, son increíblemente duros para los ojos, lo que les da a los usuarios "rasgado". sintiendo donde todo duele mirar.
El problema con los neones es que son demasiado brillantes para leer con facilidad y causan problemas asociados con fondos oscuros o claros. Cuando se usan con texto, los neones presentan problemas de legibilidad ya que las letras tienden a sangrar en el fondo. Los fondos de neón a menudo son abrumadores y distraen del mensaje principal en el diseño.
Intenta esto en su lugar: Elimina parte del brillo de los colores de neón para que tengan un aspecto más oscuro y sutil en las pantallas.
Orange You Glad hace un gran trabajo incorporando? Casi? Colores de neón en el diseño de su página de inicio de varias maneras. El tema común es que los neones se utilizan para elementos más pequeños y con cambios de color sutiles que hacen que los rosas, amarillos y verdes sean más fáciles para los ojos.
¿Vibrante? Colores
Cuando se emparejan colores altamente saturados, crean un "efecto vibrador". donde los colores parecen moverse casi en un movimiento borroso o brillante. No quieres hacer esto.
Esta vibración puede ser desconcertante para los usuarios, como lo describe el teórico del color Josef Albers en su guía clásica "Interaction of Color:" ? Este efecto inicialmente emocionante también se siente agresivo y, a menudo, incluso incómodo para nuestros ojos. Uno encuentra que se usa raramente, excepto por un efecto de gritos en la publicidad, y como resultado es desagradable, desagradable y evitado.
Casi se puede predecir qué hará que los colores vibren antes de ponerlos uno al lado del otro.
- Alta saturación de cada color.
- Complementario en la rueda de colores.
- Separados 180 grados en la rueda de color
- Al convertir los colores a escala de grises, se obtiene muy poco contraste.
Un ejemplo clásico es el emparejamiento de rojo brillante y verde. ¿El popular? ¿Navidad? La combinación es uno de los delitos de color más grandes (y más utilizados). Estas combinaciones también presentan un problema de accesibilidad porque son indescifrables para las personas con ceguera al color.
Intenta esto en su lugar: Si tienes que usar? Vibrante? Combinaciones de colores, sepárelas con otra cosa (preferiblemente un neutro) entre ellas.
Luz en luz
Este es uno de esos errores que pasa todo el tiempo. Tal vez sea porque puede llevarlo a cabo con proyectos de impresión, tal vez debido a ciertos ajustes de pantalla que lo hacen viable, pero las combinaciones de colores claros no lo cortan.
Son difíciles de leer. Cada vez.
Aquí es donde parecen ocurrir las mayores ofensas: encabezados de héroe que emparejan una imagen y texto en blanco, pero el texto cae sobre una parte clara de la imagen. En este punto las palabras son ilegibles. Sucede mucho más a menudo de lo que debería. Si cada letra no es claramente legible, necesita repensarla.
Intenta esto en su lugar: Afortunadamente, hay soluciones bastante fáciles para este problema:
- Elija una nueva imagen con un fondo de color consistente.
- Use un cuadro de color para el texto en la parte superior de las imágenes con mucha variación de color.
- Considere una superposición de imágenes a todo color para aumentar el contraste entre los elementos de fondo y de texto.
Cualquier cosa de color arcoiris
Si bien casi no hace falta decirlo, los sitios web de colores del arco iris simplemente no funcionan. (Piense en cuántas reglas de la teoría del color está rompiendo simplemente imaginando un sitio web con el tema del arco iris en su cabeza en este momento).
Las combinaciones de colores del arco iris son abrumadoras y abrumadoras. Al principio, pueden captar la atención de un usuario, pero ese usuario seguramente rebotará una vez que se dé cuenta de que el contenido es indescifrable.
Intenta esto en su lugar: Si desea utilizar una amplia paleta de colores, como es la tendencia, opte por el bloqueo de color o los estilos de tarjeta, donde los colores pueden asociarse con elementos. Este diseño estilo contenedor permitirá una mayor flexibilidad con el color al tiempo que creará un sentido de organización y flujo.
Brillante en brillante / oscuro en oscuro
Al igual que la luz en la luz, y la combinación de saturaciones de color similares causará problemas. Debería ir sin decirlo, pero evítalos.
Si crees que esto no te sucederá, ten cuidado cuando uses esquemas de color monótonos. Ahí es cuando los diseñadores tienden a deslizarse aquí. (En caso de duda usar más contraste.)
Intenta esto en su lugar: Piense en contraste. Si desea utilizar varios colores brillantes u oscuros, considérelos como opciones para pantallas en un sitio de desplazamiento. Podrás usar todos los colores oscuros o brillantes que te gustan y mantener la legibilidad y facilidad de uso. (Es un ganar-ganar!)
? K? Negro
En particular, si se cruza con frecuencia entre proyectos impresos y web, como hacen muchos diseñadores, el negro puro puede deslizarse en proyectos web por error. Conocido como? K? Negro en proyectos de impresión, porque solo usa una placa o? Pure? Negro (# 000000) en proyectos digitales, este color es simplemente plano.
Piense en la realidad, todas las combinaciones de negro en realidad se filtran con otros tonos para darle esa riqueza. (Incluso las plumas de un cuervo a menudo se ven azuladas o más púrpuras con la luz adecuada). Use una combinación de negro que incluya otros colores para crear ese color rico y oscuro, y guarde el negro puro para imprimir.
Intenta esto en su lugar: Pruebe un negro con toques de color que combinen con su marca o agregue las connotaciones de color correctas. Cuanto más claro sea el negro en gris, más fácil será ver los colores de maquillaje. Considere el negro en concierto con los colores circundantes y piense en la composición de cada uno y en cómo se relacionan entre sí. (Por ejemplo, use un negro con un poco más de un tono azulado para compensar los tonos naranjas o amarillos del texto u otros elementos). Por ejemplo, el color para el País de las maravillas, arriba, es # 0a0a0b.
Conclusión
La razón más importante para evitar estos colores y combinaciones es la falta de legibilidad y contraste. La realidad es con las opciones de color correctas y mucho contraste, casi cualquier tono puede funcionar con moderación.
Pero hay una trampa. Es posible que tengas que hacerlo un poco más oscuro o más claro de lo que esperas para que funcione. Recuerde, los colores adquieren atributos de su entorno (incluida la luz de fondo de una pantalla) y deben ajustarse en consecuencia.
Aquí está tu? Truco del día:? Si tiene que entrecerrar los ojos, cuestionar o mover la pantalla para ver algo, el color no funciona y debe pasar a otra cosa.