views:

958

answers:

15

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?

+27  A: 

kuler has a lot of user submitted colour schemes

edit: just remembered... also try colorlovers

JimmyJ
http://www.colorotate.org/
drorhan
+17  A: 

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.

Thomas Owens
sometimes +1 just isn't enough.
Simon
A: 

Adobe's Kuler website has a lot of user-created color schemes uploaded by designers. I normally search for higher ranked schemes first.

Brian Stewart
A: 

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?

casper
+1  A: 

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!

Tim Cochran
A: 

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 :-)

kronoz
A: 

If you pick a "theme" color for your app, you can use Kuler to help flesh out the palette.

Related post:

Chris Marasti-Georg
A: 

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.

Mikey P
A: 

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.

Sam Hasler
+2  A: 

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.

Sam Murray-Sutton
+1  A: 

I like using ColourSchemer and EasyRGB.

James Inman
+22  A: 

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!

Paul Tomblin
This almost deserves to be voted down due to the frustration it creates by not including a screenshot. Having spent a few seconds with Google trying to find one, I'm obviously frustrated enough to leave this comment. :)
unwind
@unwind - the product isn't on the market any more, so I'm not surprised you can't find a screen shot.
Paul Tomblin
+1 awesome story
Benny Jobigan
+4  A: 

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 Davis
"Keep in mind that nearly 10% of the male population of the world have some significant form of color blindness."Amen to that. I am one of those 10% and I cant tell you how PO'd I get when I read marketing material that states "We've color-coded it for your convenience!"... All I can think is, no you didnt. You just made it much more difficult for me to want to purchase your product. Funny you mention the MSDN link because when I recall MS doing similar in the early 2000's with their MSDN sub. "We've color coded the DVDs for easy retrieval!" No - you just screwed color-blind people! :-)
Optimal Solutions
A: 

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.)

A: 

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.

http://www.hackification.com/2010/05/16/designing-a-vs2010-color-scheme-consistency-consistency-consistency/

stusmith