Six Basic Web Design Mistakes

Whether you are designing a website, a banner, or a flyer for a magician, you’ve probably thought this to yourself at some point: “Why isn’t this design working? Is it because nobody likes magicians?” The answer to that question is yes, but chances are, you are also making one of these six common design mistakes. You would be surprised how often fixing the small stuff can spur you on to creating a great design.

1. No call to action

I went to this page to download the Headspace2 Plugin. But where is the download button? It's not immediately apparent
design-mistakes-call-to-action

I went to this page to download the Headspace2 Plugin. But where is the download button? It's not immediately apparent

Say you are creating a landing page for a product. You could have a beautiful landing page with lots of great information on it, but if the user can’t find out where to buy your widget, they will quickly abandon your page. The call to action should be the most prominent item on your page, and the user shouldn’t have to scroll down to see it.

2. Alignment

An example of pixel perfect alignment
design-mistakes-alignment

An example of pixel perfect alignment

One of the most basic mistakes new designers make is not aligning things correctly. For example if you have a heading, a paragraph, and a button, they should all line up vertically. Breaking the user’s line of sight will make your page confusing and difficult to read.
If you have 3 boxes, the space between each box should be equal.

3. Too many different fonts and colors

This website isn't that bad, but the overuse of drop shadow effects, bad colors and fonts make it somewhat confusing to look at.
design-mistakes-effects

This website isn't that bad, but the overuse of drop shadow effects, bad colors and fonts make it somewhat confusing to look at.

The easiest way to make something look tacky is to add several outlandish fonts and colors that don’t match. Less is always more. It may be helpful to start out in black and white, and then add colors gradually. Generally, you’ll only need one to four fonts in any given design.

4. Lack of Contrast

The text on this site is too similar to the background color.
Screen shot 2012-02-16 at 11.43.32 AM

The text on this site is too similar to the background color.

So you’ve designed your page and everything looks great, but nobody can read it because you are using black text on a purple background. If you want to play it safe, a white background with black text will always work. You can sometimes get away with the reverse, but you will always take a hit in readability.

Contrast can also help the user differentiate between parts of your website. If your sidebar looks the same as your main content, the user won’t know where he’s supposed to look.

5. Trapped White Space

An example of trapped white space
trapped-white-space

An example of trapped white space

Sometimes the things you can’t see are as important as the ones you can. This one is easy to miss, but it can potentially ruin your design. Trapped white space is like a hole in your shirt. Everybody will stare at the hole, not the shirt around it.

6. Arrows that point off the page

The bird's orientation directs the viewers attention away from the text.
arrow

The bird's orientation directs the viewers attention away from the text.

Arrows are everywhere, and we have been trained to follow them, sometimes to disastrous results. If you put an arrow on your website, make sure that it is pointing inward. Keep in mind that an arrow is not always an actual arrow. It can be anything that directs the viewer’s eye gaze. It could even be as simple as a picture of a bird or a man.

Subtle differences can often make or break your design. If you have the feeling that something is not quite right, but you can’t quite figure out what it is, you might be making one of these mistakes. Leave a comment if you’ve seen other basic design flaws that often go unnoticed.

Start call to action

See how Portent can help you own your piece of the web.

End call to action
0

Comments

  1. Love the last two. I was totally unaware of those two mistakes. Thanks for opening my eyes a bit.
    One flaw that I see every so often is the use of drop shadows on elements that already contrast well with their background.

Leave a Reply

Your email address will not be published. Required fields are marked *

Close search overlay