Color.
One of the biggest roadblocks many of us have when designing is deciding on a color scheme. Whether it’s a logo, a brochure, or a website, the best layout design in the world will look awful if the colors clash with each other. (Have you seen some of the older websites out there? Have your eyeballs recovered?) Our reaction to color is almost instantaneous and has a profound impact on the choices we make.
Things to Consider When Choosing a Color Theme
1. Personality. Let the colors speak for your personality and image — whether it’s professional, fun, natural, whatever. Choose colors that align with your own style and taste. It’s why we ask our clients questions about they want to convey with their website. One of our clients Consoling Grace, is a church bereavement ministry. The color theme is soft, muted pastels of turquoise, rose and pearl gray to convey a gentle, supportive, soothing feel to the site. Bright reds and yellows would have been inconsistent with the purpose of the site. (Check out this article on Squidoo for a quick look at general responses to colors based on research, historical significance of color and word association studies.)
Remember that the color theme used in your website should also be used in your flyers, logo, business cards, whatever gets seen by others.(Obviously, not every color needs to be used in every piece.) Color is part of your identity!
2. Too many colors. How many is too many can be hard to answer, but in general one can say that the risk of using too many colors is greater than the risk of using too few. You will need a primary color (the main color of the page), which sets the tone for the design as a whole. Pick a secondary color that “backs up” the primary color. It is usually a color that is pretty close to the primary color. Select a highlight color which emphasizes certain parts of the design. It is usually a contrasting color and should be used sparingly. Depending on your image, more colors can be used, but remember that too many colors will make the page feel busy, cause eyestrain and make it difficult for the user to find the information he or she wants.
3. Contrast. Make sure there is a noticeable difference between your background, main text and link colors. Make sure the colors you choose are not too monochromatic or too similar to your text and links. For the most readability choose complimentary colors or stick with the classic black on white.
4. Avoid Seizures. Super bright and colorful makes a theme very hard to look at. While bright colors can be used as accents, if your site looks like a mashup of Pokemon, Jolly Ranchers, and an explosion in a paint factory, it will overwhelm the content of your site.
5. Complimentary colors. Complimentary colors are those which essentially make one another stand out — in other words they just look great together. They make people FEEL good when looking at them. It may seem crazy, but it’s a psychological response in humans. It’s also why the color wheel is used by many logo designers, marketers, and advertisers. My art teacher used to say that if you mixed any two paint colors together and if the resulting color looked like any shade of ordinary mud, you’ve probably chosen complimentary colors. Red and green are complimentary colors, but keep in mind that a darker shade of green and a lighter shade of red don’t compliment one another nearly as well as a darker shade of green and a darker shade of red do. Remember too that darker colors are easier to see than lighter ones. If you choose a text color other than black, make certain it’s the darker shade of whatever complimentary color you’re using.
Color tools.
Thankfully, there are a lot of tools available on the web to help sort out color nightmares.
One of my favorites is EasyRGB.com , which lets you put in a hexidecimal color code and it brings up a list of complimentary colors. This is great if you already have a primary color in mind.
Another great site is ColorBlender , a free online color matching tool. Simply play with the sliders below the colorblend images and it will show you colors that work well together.
Whitespace.
“Above the fold” isn’t just a newspaper term. On the internet, it refers to the part of a web page that appears in a visitor’s browser without scrolling. It’s the most valuable part of the page – but don’t stuff too much inside too small a space or your design will look cramped (look at the example under #2 above)
“Whitespace,” or “negative space” is the space between elements in a composition. Whitespace is space that’s deliberately left blank to better structure the page and emphasize different areas of content. It is NOT empty or wasted space, nor is it necessarily white. It is an integral part of a design.
A page with too little whitespace makes visitors feel uncomfortable because the page seems cluttered and hard to read. They quickly get overwhelmed and move on to another site. Pages with too much whitespace, on the other hand, seem empty, as if there’s not enough content to fill the page. Visitors may wonder: “why bother with this?” and go somewhere else.
“Passive whitespace” adds breathing room to a design. A common example would be the spacing between paragraphs of text, or between a header and the rest of design.
When whitespace is used to lead a reader from one element to another, it’s called “active whitespace.” It visually separates the navigation, content, header, and footer.
Take a look at these two pictures. The content is the same, the photography is the same, the colors are the same, but they convey a very different image. The one on the left uses little whitespace and looks efficient, a bit outdated, and (let’s face it) cheap. The one on the right uses a lot of whitespace and looks luxurious. Which facial mask would you rather use?
Whitespace affects the look and feel of a design. Use it!