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?
kuler has a lot of user submitted colour schemes
edit: just remembered... also try colorlovers
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.
http://www.hackification.com/2010/05/16/designing-a-vs2010-color-scheme-consistency-consistency-consistency/
Related
What are some algorithms that help accessibility for colorblind people? I'm guessing color reduction could help, but honestly I can't find much information on the internet other than smartphone apps (not even papers).
Rationale: Recently, my CRT monitor stopped outputting magenta, so after a little research this seems to be a bit similar to how someone with tritanopia sees. Basically, anything in the red spectrum will be output as shades of blue. Although I could buy a new monitor, I'd like to know a software-based fix; this situation has got me interested in building accessible applications.
The best way to solve legibility problems for folks who are color blind is to increase the color contrast ratio. Web Content Accessibility Guidelines require a minimum contrast of 4.5:1 (3:1 for large text).
There are a handful of contrast analyzers out there. Google's Accessibility Developer Tools includes algorithms for checking contrast and recommending alternatives.
If you were inclined, you could use this library to create a browser extension that dynamically changes CSS on a page to make content meet the required contrast ratio.
I am trying to set up clear type for my monitor, it has a bgr layout. I do not understand the settings in the cleartype text tuner.
All buttons say "The quickbrown fox..." and ask me to make a judgement. I would like to at least be able to select with confidence the subpixle layout, than make a judgement (it necessary) on the other stuff.
I do not have the time to do a multi-user double blind trial.
So what do the buttons do?, at a technical level.
Each version have some minor difference in colors. Depending on who is reading them you should see a difference and you could have a different choice.
According to MSDN website,[5] Microsoft acknowledges that "[t]ext that
is rendered with ClearType can also appear significantly different
when viewed by individuals with varying levels of color sensitivity.
Some individuals can detect slight differences in color better than
others." This opinion is shared[6] by the font designer Thomas
Phinney, program manager for fonts and core technologies at Adobe
Systems:[7] "There is also considerable variation between individuals
in their sensitivity to color fringing. Some people just notice it and
are bothered by it a lot more than others."
http://en.wikipedia.org/wiki/ClearType
I have an text outline tree where i display a lot of information There are already upto three icons for each item (one in front, one after the text and one at the left side). But i still need to show more.
So i used different text colors. Unfortunately only the red=stop,forbidden,protected and green=okay,valid,allowed is so universal known. I mix it with black/blue which stands for none available information items.
My question is: Do red/green blind people recognize the difference of this colored texts?
I don't really care about real color blind people as they are in the 0,001% range while red/green blindness is serious high in the one digit percent range.
EDIT:
I heared from someone that he is red/green blind and is able to tell me if this is a green text or a red text and only if this is a real mixed color salad they are not able to differenciate between it. So the question is: are text items in a GUI list/tree so far away from each other that red/green blinded people can see them as different shades in whatever color they see.
NO, we do NOT see the difference!
I worked at a company that used red/green for information regularly, and it was very confusing.
But, do as they do in traffic lights, and add a little blue to the green color.
FF0000 and FF00CC is easy to tell apart (for me, at least).
Also, its easier to tell larger text/things apart. Small pixels or pixel-thin lines are harder to see the color on.
Red/green alone is bad for this reason. My boss actually has red/green colorblindness, so he points out anytime we mess up and he can't distinguish something.
Consider an:
outline box (eg dashed)
Background color
text bold/not bold
Yet Another icon
A variation or overlay on an existing icon
A mouseover hint (title)
A mouseover is actually a generally useful thing - while an icon may be intuitive to you, it might not be to someone using your app for the first time.
I agree with the suggestion to make it black-and-white to try it out- though there's also a couple Firefox extensions that do this: https://addons.mozilla.org/en-US/firefox/search?q=colorblind&cat=all -- unfortunately, none seem to be updated for 3.5.
Colors may give cues, but they should not be the only way to find that information.
Personal
I have a red/green deficiency, here are some of my experiences. Keep in mind color vision is very individual even among normal-sighted people. Some of that may be true in general.
Telling colors apart is easier than identifying colors
closeby large areas are easier to tell apart
Trying to tell colors is strenuous, it's less of a cue, more of a task
(i.e. color coded UI exhausts rather than helps me)
I can tell RGB(255,255,0) from RGB(0,255,0) and ident when they are side-by-side,
and can tell you "which is greener". However, I can't play most puzzle games that
use these for color-coding pieces.
Mixed colors give the most problems.
An intern was once confused by my problem, because the desktop background - some paintshop landscape - was all pink. I didn't know.
Imagine a list control (like an windows explorer file list) where file names are black, red or green:
telling red apart from black is hard. I usually don't notice until someone tells me. Even on decent TFT's, from a slight angle they wash. I can identify correctly if someone tells me "some of these are red" and I look hard.
I once deleted 3 days of work because I failed to notice that the list of files on the left was red not black (this was a font with 2 pixel line width!).
having a single red or green item among black ones, it's hard to tell whether it's red or green.
People deal differently with defects, and though I've never found a color vision deficient person to be ashamed or hiding about it, we still don't like to have it rubbed in. Some people, incidentally, get very argumentative because they can't imagine I can tell apart X and Y easily, but not X and Z. My best way to quiet them is to ask them to explain the color "blue" without using any color names.
General thoughts
Well chosen colors make valuable cues, improving UI transparence immensely. Don't stop using them for good - just allow people who don't see them easily to still use your software.
Allow customization of colors, and provide color schemes to pick quickly. I really don't want to select 14 individual colors.
Using slightly-off colors often looks much more professional than the "primaries" (one or two channels at 255, the last at 0).
Color perception differes a lot. What looks good to you on your monitor might suck everywhere else.
First, there's color reproduction of the monitor - they have huge differences in linearity, balance and isotropy. Unless you use the same brand from the same batch, or use properly calibrated professional monitors, they make for the biggest difference.
Second, is your sensors. There's an about 40/60 distribution among people of red perceptors working at different wavelengths. There are many more subtle personal differences.
Third, it's your brain. A lot of color perception is learned and affected by cultural background. see e.g. here.
7% of American men have some form of Red-Green color blindness. The rate among women is much lower. Incidence rates in other countries vary, but part of that is due to the low rate of diagnosis.
So, for the sake of ADA-compliance and conformance with UI best practices, don't use red and green colors alone as an indicator.
Also, no one wants to use an application that looks like angry fruit salad.
Could you maybe use bold/not bold/<span style="color:silver">grayed out<span> instead? (Sorry couldn't make the text silver colored.)
I agree with a great deal of what you say.
Red and Green are a very recognizable combination in terms of meaning.
In terms of colour blindness, the shades of green and red differ greatly in how "bad" they are. If you want to make sure you have a usuable UI look at it in black and white. (I take a screenshot and give it 20 seconds in Photoshop.)
If you can use what you see, move on. Otherwise, address the problems.
Kindness,
Dan
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am the only dev in a very small IT shop and as such I have no one to turn to when it comes to the look of my applications. I am left to my own devices as to what looks good with what and what matches what.
This got me wondering, where do other programmers get their color ideas?
Am I the only programmer who likes all of his apps in grayscale?
What are some sites, books, apps, tips and tricks to giving your custom built application some vibrance and life that end users MIGHT actually appreciate?
I suggest Adobe's Kuler. You can bring in an image, like a logo, and have it suggest a set of 5 colors that work well together. Lots of different options. Also lets you save your palettes. You can then browse through other people's color combinations.
I too prefer my apps in greyscale, although a hint of colour doesn't hurt. For example, meta.stackoverflow.com looks kinda weird to me after spending a lot of time on stackoverflow. If you're looking for just colour ideas, I'd check out these sites for colour suggestions:
http://www.colourlovers.com/
http://kuler.adobe.com/
For typeography:
http://webtypography.net/
Maybe also pick up some good design books? (I like this one http://www.amazon.com/Designer-Grid-Lucienne-Roberts/dp/2880466784)
Contrast is one of those things that can make or break the design of a site. Some colors don't go well together. Red text on a green background, for example, may seem like it'd be a high contrast and easy to read combination, but it's not. And it's ugly. At the same time, you have to be careful with colors of the same hue as well. Light gray text is hard to read on a white background (that one is a little more obvious).
This page talks a little about contrast ratios and provides a good tool to check for it:
http://snook.ca/technical/colour_contrast/colour.html
They mention that you should shoot for a contrast ratio of 4.5:1 with small text. Any less than that and you risk the possibility of users having trouble reading your site.
There's another tip I can give. Whenever you're choosing 2 colors to go next to eachother, pick a boring color that lacks saturation (white, gray, black, or a really dull color) and then pair that up with a color packed with lots of saturation (blue, orange, red, green, etc). In general, this will look better than trying to put two exciting colors next to eachother in the same design (unless you're designing a comic book site).
And then this site has a cool gallery where you might find some inspiration and good color combinations:
http://www.cwd.dk/
But I'll tell you that my methods have changed drastically since I first started out. A little creativity is good, but I now place more importance on usability than anything. I try to keep every design I do simple and usable... kinda like Stackoverflow. I only mention that because my focus on usability tends to influence my design decisions.
A couple of my favorite sites on usability and optimization are
http://www.useit.com/ and
http://www.websiteoptimization.com/
If you are programming for some platform it is better to follow that particular platform's guidelines. (And not to alter system colors without a reason)
If you are programming for the web you might appreciate following a theme from some major web-application, such as gmail.
I have used this one in the past:
http://colorschemedesigner.com/
I would recommend turning on the tooltips (go to 'About & Help' > 'Show Tooltips') so you can see the descriptions of the different types of color schemes offered when you hover over them.
Personnally, I'm a big fan of UI Frameworks like DevExpress which implements skin technology. So, the user has the possibility to switch to his favorite look. For us, it is just five lines of code and our users are always satisfied to have this option. Vista, Office 2003, Office 2007 are just a small set of different options offered to our customers.
Give your users the most bizarre bling colour scheme
(like a combination of purple, green, glaring red, pink)
and you will be assured of a deluge of suggestions from your users.
Even though your colours are bizarre, you have to ensure that the pages are still technically usable but aesthetically unbearable. Ensure the words and widgets are visible so that lettering should use darker colours like crimson, blue or dark grey on light coloured backgrounds. Pastel the background so that they won't impede the user's sight.
If you wish to defend the reputation for your taste of colours, place a "Contact web master" link which leads to a disclaimer saying your colour scheme is deliberate because you are forcing users to design and submit and vote on a colour scheme. Why not write a cheap lil' web app to facilitate the voting too?
Ask your users. Just that. Just ask them, and take their advice. They're the ones who'll have to be staring at the color scheme for hours or days on end; take their advice.
Update: I'm not suggesting that you give your users the complete range of options; the way this usually works is with a small group of users, generate a few styles of the site that seem reasonable, and ask the small group to pick the one they like the best. That way, there's a coherent look to things, but you still get user input from your end users.
I take you have some users. I suggest asking them what they would like in colors.
Aside from that, to deliver data effectively you have to keep visual clutter to a minimum. Gray is a time-tested agent for helping with that.
I see from your comment that gray is despised. Well, you could spell it "grey" -- British-isms are are classic chic. Seriously, you need to go for three pastels in this situation.
I would say stick to what you're comfortable with and make them grayscale but just add hints and accents of colour.
Adobe Kuler is a good tool for which colours to use.
Stick with greyscale, and use colours only when they can have some meaning. E.g., use bright red for negative dollar amounts, blue for email addresses, bold black text on a yellow background for phone numbers, etc. This sort of thing really helps users find their way around your app, especially when there is alot of information.
Have a look at AVIVADirectory.com
"The Canonical List of Online Color Resources for Designers
(updated periodically with neat stuff)"
Just a massive list of links and resources about pretty colours.
And lets just agree to disagree on the 'u' in colour, ok ; )
Also, a +1 for colorschemedesigner.com mentioned earlier by John Rasch
I asked some friends on the Internet who pretty much represent the userbase for my apps. The general consensus is that certain shades of blue and cyan are nice. Not entirely unlike the default in MSN Messenger 8.5. I then used that to colorize what started as grayscale.
That's where I get my ideas.
Why are comments different colors in different programs? Is it just aesthetic or is there an actual reason?
It depends on the settings in your IDE or editor. Comments don't have a set colour. They are just letters.
I assume it is to make them stand out so people do not easily confuse them with code.
To confuse color-blind managers.
purely aesthetic
Comments are colored differently to make them stand out from the rest of the code (making it easier to read and follow along the comment trail).
Why they are certain colors is entirely up to the makers of the editor in question (usually based on usability studies), but you can almost always change these using the settings of the IDE.
As Aiden said, it's really up to whoever is implementing the IDE to choose. I'm familiar with green code comments, as both SQL Server Management Studio and Visual Studio are green by default, but there's no reason why a developer couldn't (for instance) choose fuschia, or lemon yellow, or chartreuse, in their IDE. Loaded into another IDE, the "code comments" would display in that IDE's colour.
It is strictly aesthetic. If you use a good IDE or text editor, you can change the color of the comments to be whatever color you like!
I use Visual Studio 2008 at work and I see a lot of the guys changing the colors for reserved words, to class names, to you name it.
Most programs allow you to customize color schemes, including the color of comments. Coloring source code, comments and other things, allows the code to be more readable. The choice of particular colors is personal and aesthetic.
I am assuming you mean "development environments" when you say "different programs".
But in general, you are correct. There is an aesthetic, as well as usability, component to it. Development Environment (IDE) makers (e.g., Microsoft's Visual Studio) do usability studies to determine what colors are "best" for development. Like what color to make keywords, comments, etc.
But these default color preferences are generally easily changeable by the user.
Gray or green are used for comments, as the other colours have more desirable properties and so are reserved for more impactful areas of the code.
For example, tight loops are often in red to make them go faster, and code for children is often blue (for the same reason they learn handwriting in blue), to make it less difficult and more familiar. Blue is often also used for language keywords and APIs to make them easier to understand.
Very important code or comments are in green, due to the increased ability of the human eye to discern green.
Black and grey are used for tedious and boring areas of the code, to encourage you to look elsewhere, such as the bright and exciting interfaces and documentation (which are in blue and green as above).
Viruses, trojans and the like are always written in white, so they can evade detection by the majority of desktop themes.
It's just for aesthetics and usability, it makes it clear what will and will not be compiled into code, and what's important to read to understand what's going on.
I'm not really sure what you mean, but I'm assuming you are wondering why different IDEs use different colors for comments in their syntax highlighting. It's mostly just aesthetic, but you can usually change the colors if you want.
back in the day, the screen was black and all of the letters were green! they are various colors to help you determine the usage of each (comment, command, variable, etc.) isn't progress grand!