Many beginners to website design ask “What are the best colors for a website design?” Well, before you can even decide a total color pallet for your website, you need to know what are the best colors for your website’s content.

After reading this post, you’ll know.

It’s all about the eyes

What’s the number one reason a person visits your website? Is it for the ultra-cool graphics and design? Nope. People come to your site for one thing only: to read your content. Granted, your eye-popping graphics many intrigue a visitor enough not to click the back button on their browser right away. But if your content (the main text of your website) is hard to read, then they’ll abandon your website and you will have just lost a visitor for good.

Choosing the best colors your website begins with choosing the best colors for your website’s content — colors that make reading easy on the eyes. But just what are the best colors? Before getting into that, let’s look at some bad color choices.

What not to do

If you really want to strain people’s eyes and annoy them to extremes, then by all means do any one of the following:

• Put white or light text on black or dark background
• Use two colors that have little contrast between them
• Have lots of black text on a yellow background

Take a look at this example:

I don’t know about you, but reading that white text on a black background really bugged me. And you know what? It bugs most website visitors.

Here’s another:

One more:

The best colors for a website’s content

I realize that it might not be the most flashy and eye-catching, but the best colors for a website’s content are black or dark-gray text on a white or very light, pastel-colored background. These combinations create the right amount of contrast for reading while avoiding or lessening the strain on the eyes. (By the way, Newbie Website Design uses dark-gray text on a white background. The headings and bolded text are in black.)

Final thoughts

As stated above, the main reason people visit your website is to read your content. Even if your graphics are stunning and the design is top-notch, no one will stick around or visit again if the text is hard to read. Make it easy for them by choosing dark text colors on a very light or white background.

Now, the only thing you need to worry about is writing good content!

The blog Your Logo Makes Me Barf is a wonderful place to gander at some of the world’s worst logo designs. I came across this the other day and decided to pull some valuable design lessons out of the garbage heap of logos.

Let’s begin today’s “what not to do” lesson:

No-no #1: Confusing acronyms

If you’re going to take your company name and make it an acronym, please, PLEASE, make sure that it doesn’t look like some other common acronyms.

No-no #2: Bad letter substitution

Substituting a letter (or letters) in your logo for an image can be quite effective — when done correctly. Just make sure that the image actually looks like the letter it’s replacing or that the non-image letters don’t spell out something else!

(The Eiffel Tower makes a bad letter “h”.)

Yes, I know that “arousel” is correctly spelled “arousal”. But at first glance you might not pick up on that.)

(Is that “St. Rage” or “storage”? Don’t confuse people!)

(C’mon! A cat’s hind end makes a truly disgusting letter “A”! And why is it for a women’s clothing store?)

No-no #3: Art unrelated to your industry

Yeah, I know. “Swooshes” are cool and “interstellar globes” are hip. But please don’t use them when they have no relation to your industry! (They are already overused to begin with.)

(In addition, the upper case “D” overlaps the lower case “a” making it difficult to read the photographer’s name.)

No-no #4: Bordering on indecent

Be careful of how you place people and animals in your designs. One mistake and you might give people the wrong image about your company! Also, please be careful when you choose the artwork… it could be taken the wrong way.

(That dog is getting just a little too friendly with the cat.)

(It might be a logo for a physical therapist…)

(Nothing says “Family Dentistry” like a tooth flashing his privates…)

No-no #5: Choose a color scheme, please!

Do I really need to say anything about this?

Wanna see more?

If you’d like to see more of the “best of the worst” then check out Your Logo Makes Me Barf.

What does that mean?

Take an image. Any image. And ask Photoshop to increase the image’s size by say, 200%. This is what you’ll get:

As you can see, after the image was increased to 200% of its original size it became jagged, blurry, and uncomfortable to look at for any length of time. (And yet, there are millions of websites on the Internet that use such images!)

How could our beloved Photoshop do this to us?

Photoshop must “fill in the gaps”

In order for Photoshop to increase the size of an image it must add extra pixels to fill in the gaps. Now, if you are only increasing the size of your image to about 120% of the original, then a little bit of sharpening will (in most cases) produce an acceptable image. But anything larger than that and no amount of sharpening can make a passable and eye-pleasing result.

Go from big to small

In a perfect world, you would always have at your fingertips an image of the exact size you need. But as experience has taught me, the world isn’t perfect — you’ll have to re-size your images 99.9999% of the time. Since this is the case, it’s much, much better if you can find images that are LARGER than what you need and then decrease their size. Take a gander at this example:

To shrink an image’s size, Photoshop must take away pixels to make the change. This creates a much better result. The only thing you need to be careful of is shrinking an image too much — which will result in an image that lacks quality and contrast.

What to remember:
If you can’t find an image that is the exact size you need for your design, then try to find an image that is a little larger than what you need. You’ll be pleased with the results (and so will the visitors to your website!)

Yuck!

In this post, I’ll talk you through the steps to clean up this weak design. To begin, first view the “what not to do” example. (Note: this example uses the Lorem Ipsum text – so don’t try to read it.) Here’s the image:

Now let’s clean this mess up!

Get rid of the all-caps

Nothing is more annoying than large blocks of text written using all capital letters. As you may or may not know, all-caps is the text equivalent of shouting. Let’s get rid of that first:

Left-aligned text is just “right”

Only in very rare design situations is all-centered text acceptable (and this ain’t one of those times.) Kiss it good-bye:

Divide up the heading and the sub headings

Headings to a full article should always be in a large-sized font while the subheadings should always be smaller. Let’s do that next:

The final touch

As you learned in a previous post, one of the four main concepts that make up good design is the concept of proximity (i.e. putting related information close to one another.) Let’s do that now by putting the heading closer to the text right below it and doing the same for the subheadings and their text:

Your homework

Look closely at the websites you find neat, clean, and attractive. Most likely you’ll NEVER see large sections of centered text, all-caps, or content the seems to flow endlessly. And, of course, make sure that you never do the same in your designs as well.