7 principles of good web design

1. Visual hierarchy

When you open a webpage, you should be able to tell at a glance what the most important part of the page is, whether that be a headline, a product image, or whatever you decide is the focal point of the page.

Usually your pages will have multiple levels of importance, and these should be clear to the viewer. The easiest way to make part of your page “more important” is to make it bigger and bolder.

Another thing to consider is an element’s placement on the page. Since we read top to bottom and left to right, the most important place on the page is the top left (that’s why most sites have their logos in the top left position).

Apple’s website always has a very clear focal point: their homepage consists basically of the site navigation and a huge product image. The featured product is clearly the most important page element.

Why is visual hierarchy so important? If everything on your home page is big and bold, your viewers won’t know what to look at. Their eyes will be confused, and they will probably leave your site frustrated.

If you emphasize everything, you emphasize nothing, so choose carefully what is most important and then make a big deal out of it.

2. Breathing room

Nothing is worse than a website that crams content into every square inch of the screen! White space is an important design element. Your content needs room to breathe, and your viewers will have a much easier time using your website if you make good use of white space.

White space doesn’t necessarily mean that it has to be the color white—the term just refers to areas of a design that are not filled with content. White space can be any color, but it needs to be blank space.

White space is a vital design element! Use it to space out your content, and your viewers will be grateful.

3. Does what you expect it to

Don’t make your viewers think about what they’re doing. In other words, there should be nothing about your site that confuses a user or makes them wonder what will happen next.

Example: Don’t have underlined text that is not a link. If it’s underlined, people will click on it, and when nothing happens, they will be frustrated or confused.

There are certain ways of doing things that are generally accepted and understood by most internet users. These widely accepted techniques are called “conventions,” and you should use them unless you have a good reason not to.

Examples of conventions include underlined links (or links that change color when rolled over), your site’s logo in the upper left of the page, navigation horizontally across the top or vertically down the left side, etc. These conventions can be broken if you have a good reason, but before breaking them, consider the risk of alienating users who may have a hard time navigating your site.

Steve Krug has an excellent book titled “Don’t Make Me Think,” in which he discusses web usability and the importance of designing your website so that your users don’t have to think about your site—they just use it.

4. Easy to find stuff

An important feature of most sites is a search bar. This is especially important if your site has lots of content. I’d much rather type in a keyword and hit Search than scroll through a long table of contents, even if the content is well-organized.

Also, try to make your navigation as intuitive as possible. A link to a page with job listings should say “Jobs,” not “Employment Opportunities.” The second link takes longer to read, and if I’m quickly scanning the page to find the job postings, I might completely miss “Employment Opportunities.” The first thing most people will look for is “Jobs,” so give them what they expect.

5. Concise

Content should be tightly written. Eliminate unnecessary words and phrases. Nobody wants to read wordy content online, so be as straightforward and concise as possible.

6. Scannable

I should be able to scroll down the page and quickly understand what the page is talking about, just by glancing over the headlines and paragraphs.

There are several ways to make your content scannable—here are a few of them.

  • Use bulleted lists.
  • Use headlines where appropriate.
  • Write short paragraphs!
  • Use bolded text within paragraphs to highlight the important parts.

7. No dead-ends

When I finish reading through a blog post or any other web page, there should be several links for me to choose from to continue to another page. If I reach the end of a page and see no links, I will probably leave the website.

Your web pages should all be connected to several others, so that your viewers will continue consuming your website’s content, rather than reaching a dead end and leaving your site.

Here are a few ways to eliminate dead ends on your site and lead viewers on to more content:

  • Have a list of “Related posts” links at the bottom of each blog post.
  • Link to popular articles in the sidebar or footer of your site.
  • Have a “Return to top” link at the bottom of the page so that the viewer can easily return to the top and view the site navigation.
  • Repeat the site navigation in small links in the page footer.
  • List multiple links to additional content in the page footer.

What principles of good web design would you add to this list? There are many more factors of good web design that I have not included, so please comment below and continue the discussion!

  • Stumbleupon
  • Delicious
  • Google Buzz

Related articles:

  1. New look
  2. Why design isn’t free (and why many people think it is)
  3. The Logo Design Process
Comments (7)

Track comments via RSS 2.0 feed. Feel free to post the comment, or trackback from your web site.

Leave a Comment