User Interfaces - Colors and Layout

Question

Although I'm specifically interested in web application information, I would also be somewhat curious about desktop application development as well. This question is driven by my work on my personal website as well as my job, where I have developed a few features, but left it to others to integrate into the look and feel of the site.

Are there any guides or rules of thumb for things like color schemes, layouts, formatting, etc? I want to ensure readability and clarity for visitors, but not be bland and dull at the same time.

As for my knowledge in this area - If you hand me a picture, I have enough knowledge to reproduce it on the screen, but if you ask me to design a new interface or redesign an existing one, I wouldn't know where to begin.

Answer 1

Usually, each operating System has user Interface Guidelines. For Windows, have a look here. (Edit: The links in that post are broken. But a Search for "User Interface Guidelines" on MSDN has articles about everything)

Apple has it's own as well. Also, you may want to keep accessibility in mind.

Answer 2

One tip to check if your colors have good contrast is taking a snapshot of it and converting to grayscale. If you can't read something, colors were surely bad choosen.

Plus, although it's not about user interfaces, Before & After Magazine can give you some pretty good hints about color, design and related topics. It even has got some free pdf's to download.

Answer 3

The book Designing Interfaces, by Jenifer Tidwell has a entire chapter on the subject (Chapter 9, excerpts accesible online). The entire book is worth recommending.

Answer 4

I'm horrible at finding colors that look good together, so I cheat and use pictures from nature that are mostly the color I want (say, green) and then I use this website to pull out the main color scheme. Generally nature does a pretty good job of setting its own nice color schemes.

Answer 5

For web UI, I'm going to go out on a limb here and say that the most important color in web design is white, or "light". This is the color on top of which you place dense tracts of content.

Dark text, light background, always, when it comes to your primary content areas.

And the most important rule in layouting is whitespace. Let the content breathe.

Following these two simple rules is worth more than most "user interface usability" guidelines.

And by the way, the MS user interface guidelines are (by and large) horrible. Read Jakob Nielsen, look at Apple design aesthetics, but stay away from the MS "neutral gray/blue crunchbox" 12-step Wizard 10pt text philosophy of UI.

(And I say that as a long-time MS GUI programmer)

Answer 6

Use high contrast color combos; Black text on white background is the best example of a high contrast combo.

A bad combo is green text on red background. It's horrible for color blind people (like myself).

See what your site looks like to a color blind person: colorfilter.wickline.org

Answer 7

As for desktop applications: Whatever you do, do not use hand-picked colors. Stick with the named system colors such as "Window Background", "Menu Text", etc. Otherwise, people relying on OS accessibility features will be locked with your color choices (unable to choose a high-contrast theme, for instance) and to people who like to customize their desktop themes will think your application is fugly.

Answer 8

Here are some simple pointers for usability in your typography. These things mainly address readability and accessibility concerns.

DOs:

• Use relative font sizing (em)
• Identify language changes within a document using the LANG attribute
• Black text on a white background
• For headings, use H1, H2, etc. and nest them appropriately
• Chunk up content and organize with headings that fit what your users are looking for
• Write clear and simple copy
• Align left, ragged right
• Text-to-background color must be high contrast

DONTs:

• Use "click here" or "more" as link text
• Use underline for emphasis
• More than 2 font-type families
• Italics
• Blocks of text using all caps
• Use true red or true blue text on white background (chromatic aberration)