color user-interface colors graphic-design

user interface - Lucha contra los colores del programador



flat ui color 2 (16)

Últimamente he estado usando el siguiente sitio web: http://www.nickherman.com/colormatch/ para ayudarme (también como no diseñador) a elegir combinaciones de colores coincidentes. Normalmente encuentro un color que es bastante agradable, luego uso los colores que combinan de este sitio web.

Si todo lo demás falla, ¡también le pregunto a mi esposa!

Tengo un par de proyectos favoritos en los que soy el único diseñador / programador y dedico demasiado tiempo a cambiar la interfaz de usuario para que sea más fácil de usar por usuarios reales y evite los colores amarillo y verde brillante tan comunes en los diseños de "programador" .

¿Tiene consejos para elegir un esquema de color cuando no tiene un diseñador de gráficos? ¿Cómo evitas crear la interfaz típica de "programador"?



Algunos recursos actualizados que uso:

colorotate.org es un sitio muy bien diseñado con paletas de diferentes tamaños proporcionadas por el usuario (a diferencia de kuler que proporciona solo 5 colores por paleta). Le permite ver cómo se ven las combinaciones a varios tipos de personas con problemas de color.

colorschemedesigner.com genera paletas consistentes para ti usando varios algoritmos (complemento, tríada, tétrada ...)


Apunta a los colores pastel que son un poco más oscuros que sus contrapartes en toda regla, es decir, un rojo pastel es más tenue que un (255,0,0) rojo, por ejemplo. Intente seleccionar colores de la misma paleta, una forma engañosa de determinar los esquemas de colores que uso es tomar una captura de pantalla de una aplicación de Office 2007, generalmente excel, y pegar algunos colores de sus paletas coordinadas usando la herramienta de cuentagotas de color en una aplicación como Paint.NET. De hecho, este enfoque engañoso se puede extender a los esquemas de color "prestados" de las aplicaciones que ya existen y que tienen esquemas de colores que admira :-)


Dejame contarte una historia.

No tengo absolutamente ninguna confianza en mi capacidad para tomar decisiones estéticas, solo hay que mirar la forma en que me visto para darme cuenta de que estoy justificado por mi falta de confianza. De todos modos, hace años me pusieron a cargo de escribir la guía para un nuevo producto (el "Editor de clips" en Cineon, para cualquiera que sepa eso). Esbocé un diseño, pero le pedí a mi jefe, el jefe de ventas y marketing, y varios "especialistas en aplicaciones" que me ayuden a elegir los colores. Nadie respondió, así que dije "al diablo con eso", y elegí un esquema de color tan feo que estoy seguro de que los beta testers retrocederían horrorizados y exigirían un cambio. Pero no lo hicieron, así que se despacharon con eso. Y escuché que a los clientes les encantaban los "colores vivos". Y no solo eso, sino que unos años más tarde un competidor agregó un programa que parecía una estafa directa de mi Editor de clips a su producto, ¡y copiaron mi combinación de colores!


El sitio web de kuler de Adobe tiene muchos esquemas de color creados por el usuario cargados por los diseñadores. Normalmente, primero busco esquemas de mayor clasificación.



Las guías de color como Kuler son un gran comienzo si no tienes idea acerca de elegir colores.

Algunas consideraciones básicas:

Use contraste, no color para diferenciar en su diseño. Esto es para dar cabida a daltonismo y usuarios con poca visión.

Usa una paleta de colores tan limitada como puedas. Elija un color como su "tema" y elija tonos de ese color, y luego tal vez uno o dos colores contrastantes para ir con él.

Recibe consejos: no tiene que ser de un diseñador, es posible que aún conozcas a alguien que tenga buen ojo para estas cosas. Además, comentarios más amplios: pregunte a algunas personas por su opinión, eso puede ayudar.




Para aplicaciones de escritorio, obtenga los colores del sistema operativo. Personalmente, quiero que todas mis aplicaciones se vean y se sientan igual que mi sistema operativo.

Para las aplicaciones web, no estoy realmente seguro.


Si elige un color "tema" para su aplicación, puede usar kuler para ayudar a desarrollar la paleta.

Publicación relacionada:


Te recomiendo que comiences leyendo sobre teoría de color computacional. Wikipedia es en realidad un buen lugar para informarte sobre el tema. Intenta buscar un color por nombre en Wikipedia. Encontrarás más de lo que esperas. Rama desde allí hasta que tenga una sinopsis del campo.

A medida que desarrolla su ojo analítico, concéntrese en entender sus colores y paletas de interfaz favoritos (o más despreciados) en términos de sus diversas representaciones en diferentes espacios de color: RGB, HSB, HSL. Mantenga Photoshop / GIMP abierto para que pueda hacer coincidir la experiencia subjetiva de las paletas con sus aspectos cuantificables. Vea cómo sus colores rinden en monitores pésimos. Observe lo que siempre permanece legible y qué combinaciones de colores tienden a producir resultados no carismáticos o ilegibles. Preste atención a la información emocional transmitida por paletas específicas. Verás rápidamente patrones emerger. Por ejemplo, te darás cuenta de que es mejor evitar los colores de alta saturación en los componentes de la interfaz de usuario, excepto para fines especiales.

Eventualmente, podrá analizar la salida de los generadores de paletas que se recomiendan aquí, y desarrollará sus propias teorías sobre lo que hace una buena combinación, y cuánto contraste se necesita para jugar bien en la mayoría de las pantallas.

(Para evitar posibles frustraciones, puede omitir la prueba de percepción de color libre de Pantone. Se recomienda tomarla en una pantalla calibrada en color. Si dice que tiene una percepción deficiente del color, entonces el análisis numérico es muy importante para usted).


Tenga en cuenta que casi el 10% de la población masculina del mundo tiene alguna forma importante de daltonismo. Siempre debe considerar esto al elegir los colores de la interfaz (especialmente si necesita capital, ¿adivinen qué? 1 de cada 10 inversores masculinos podría no ver sus puntos rojos en el gráfico de fondo verde que muestran el riesgo frente a la rentabilidad).

MSDN tiene una visión general razonable de esto, y hay varios filtros de sitios web que le muestran a qué se parece su sitio (o cualquier sitio) dada cualquier forma de daltonismo.

Además de eso, realmente me gustan los colorlovers : no solo tienen una gran selección de esquemas de color definidos y etiquetados por el usuario, sino que se los ofrecen de diversas maneras, y puedes iniciar sesión y rastrear tus favoritos (o tu color favorito). productores de esquemas).

Ve a ver los temas de otoño! No se puede equivocar con los colores de Michigan cuando cambian las hojas ...

-Adán


Tiendo a usar muchos grises, junto con blanco y negro, mantengo las cosas simples y evito cualquier tipo de colores brillantes e irritantes. Me parece que así es como lo hicieron los tipos SO.


kuler tiene muchos esquemas de colores enviados por el usuario

editar: acabo de recordar ... también intentar colorlovers