Fighting programmer colors
https://stackoverflow.com/questions/33079
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I have a couple of pet projects where I'm the sole designer/programmer and I spend too much time changing the user interface to make it easier to use by real users and avoiding bright yellow and green that is so common on "programmer" designs.
Do you have tips to choose a color scheme when you do not have a graphics designer around? How do you avoid creating the typical "programmer" interface?
Solution
kuler has a lot of user submitted colour schemes
edit: just remembered... also try colorlovers
OTHER TIPS
Let me tell you a story.
I have absolutely no confidence in my ability to make aesthetic choices - you only have to look at the way I dress to realize I'm justified in my lack of confidence. Anyway, years ago I was put in charge of writing the gui for a new product (the "Clip Editor" in Cineon, for anybody who knows that). I sketched out a design, but asked my boss, the head of sales and marketing, and various "application specialists" for help choosing the colours. Nobody responded, so I said "to hell with it", and chose a colour scheme so ugly I'm sure the beta testers would recoil in horror and demand a change. But they didn't - so it shipped with it. And I heard that customers loved the "bold colours". And not only that, but a few years later a competitor added a program that looked like a direct rip-off of my Clip Editor to their product, and they copied my colour scheme!
For desktop apps, get the colors from the OS. I, personally, want all of my apps to look and feel the same as my OS.
For web apps, I'm not really sure.
Keep in mind that nearly 10% of the male population of the world have some significant form of color blindness. You should always consider this when choosing interface colors (especially if you need capital - guess what? 1 in 10 male investors might not see your red dots on the green background chart showing risk vs return!).
MSDN has a reasonable overview of this, and there are several website filters that show you what your site (or any site) looks like given any form of colorblindness.
Aside from that, I really like COLOURLovers - not only do they have a great selection of user tagged and defined color schemes, they give them to you in a variety of ways, and you can sign in and track your favorites (or your favorite color scheme producers).
Go check out the fall themes! Can't go wrong with Michigan colors when the leaves change...
-Adam
Colour guides like Kuler are a great start if you have no idea about choosing colours.
Some basic considerations:
Use contrast not colour to differentiate in your design. This is to accommodate colour-blindness and poorly sighted users.
Use as limited a colour palette as you can. Pick one colour as your 'theme' and choose shades of that colour, and then maybe one or two contrasting colours to go with it.
Get advice - doesn't have to be from a designer, you might still know someone who has a good eye for these things. Also, more broad feedback - ask a few people for their opinion, that can help.
Lately I have been using the following website: http://www.nickherman.com/colormatch/ to help me (also a non-designer) pick matching color schemes. I usually find a color that is fairly pleasing, then use the matching colors from this website.
If all else fails, I also ask my wife!
I like using ColourSchemer and EasyRGB.
Some updated resources I use:
Colorotate.org is a nicely designed site with user-contributed palettes of various sizes (unlike kuler that provides only 5 colours per palette). It allows you to see how the combinations look to various type of color-impaired people.
colorschemedesigner.com generates consistent palettes for you using various algorithms (complement, triad, tetrad...)
Adobe's Kuler website has a lot of user-created color schemes uploaded by designers. I normally search for higher ranked schemes first.
There are a lot of "color theme pickers" on the web. If you use these, your colors will at least look like they belong together. The first one I looked at on google: http://www.yafla.com/dforbes/yaflaColor/ColorRGBHSL.aspx?
Aim for pastel colours that are slightly dimmer than their full-blown counterparts, i.e. a pastel red is dimmer than a (255,0,0) red for example. Try to select colours from the same palette, one cheaty way of determining colour schemes I use is to take a screenshot of an Office 2007 app, usually excel, and paste out some colours from their co-ordinated palettes using the colour dropper tool in an app like Paint.NET. In fact this cheaty approach to be extended to 'borrowing' colour schemes from applications that are already out there that have colours schemes you admire :-)
If you pick a "theme" color for your app, you can use Kuler to help flesh out the palette.
Related post:
- Web 2.0 Color Combinations
- I know I've seen more, but can't find them :)
I tend to use alot of grays, along with black and white, keep things simple and avoid any kind of annoying, bright colors. Seems to me like that's what the SO guys did.
Vitaly Friedman's Essential Bookmarks for web designers & web developers list a lot of online color tools, also a condensed version
There is also a list of color tools on twiki.org that has some additional sites.
I recommend you start by reading up on computational color theory. Wikipedia is actually a fine place to educate yourself on the subject. Try looking up a color by name on Wikipedia. You will find more than you expect. Branch out from there until you've got a synopsis of the field.
As you develop your analytic eye, focus on understanding your favorite (or most despised) interface colors and palettes in terms of their various representations in different colorspaces: RGB, HSB, HSL. Keep Photoshop/GIMP open so you can match the subjective experience of palettes to their quantifiable aspects. See how your colors render on lousy monitors. Notice what always remains readable, and which color combos tend to yield uncharismatic or illegible results. Pay attention to the emotional information conveyed by specific palettes. You will quickly see patterns emerge. For example, you will realize that high saturation colors are best avoided in UI components except for special purposes.
Eventually, you'll be able to analyze the output of the palette generators recommended here, and you'll develop your own theories about what makes a good match, and how much contrast is needed to play well on most displays.
(To avoid potential frustration, you might want to skip over to Pantone's free color perception test. It's best taken on a color calibrated display. If it says you have poor color perception, then numeric analysis is extra important for you.)
Why do programmers think they can't have dsign skills? It's a pet peeve of mine. It's a learnable skill, just like anything else.
