Web Design Tutorial: Clean Web Site Design

Take a look at this web page. Is it easy to read? Is it easy to identify the site's navigation bar? Are there any animated gifs blinking on and off? Did the page load quickly? Are the various page elements easy to distinguish? These are all aspects of usability.

Too many designers feel that in order to appear serious and professional they must create a visually complex web page. Others create complex web page layouts to show that they have the technical prowess necessary to implement such designs. While I am impressed by the amount of work that went into creating these complex graphic laden web pages, that's not why I'm there. I visit web sites for one or more of the following reasons:

My focus is on the content. I want it to be easy to read (no dark red text on black backgrounds), fast to load, and simple to navigate.

I am a proponent of the virtues of simplicity. I believe that a web page can appear professional without being weighted down by a lot of bells and whistles. My emphasis is not on how sophisticated a web site I can create. My emphasis is on creating a web site that is primarily user friendly and secondarily easy to maintain. Time spent creating a visually complex web site is time not spent creating content. And content is the reason that people visit web sites.

Following are a few simple rules that I keep in mind as a web designer in order to design a simple, user friendly web site.

Make your site's navigation elements absolutely obvious.

I recall one site I visited as a result of a post to an email list by the site's creator. I thought the site consisted of one page. Why? Because I couldn't find any links! Fortunately I wasn't alone and the site's author had to post a follow-up email to the list explaining to people where the site's navigation links were (disguised as textless graphic elements within the larger banner image). While it was a cool looking design, it was totally worthless from a usability perspective. Fortunately, the webmaster for that site listened to the feedback and redesigned the site so that its navigation links were obvious.

User's don't want to think. Nor do they want to be forced to imitate Sherlock Holmes. Put your site's navigation at the top of every page; keep it consistent from page to page; make the area of the links obvious; make the link text self-explanatory. Do all this and even a newbie will be able to navigate your site.

Keep graphic design elements to a minimum.

Many sites feature complex three dimensional graphic layouts with intricate parts. While I agree that these designs can make a web site look cool, I'd rather be creating new content. The advice that I would offer is not to allow your design to overwhelm your content.

Avoid animated gifs unless necessary for presentation of content.

Loud screaming colors trying to convince the visitor to "click here". That's what comes to my mind when you say animated gifs. I find the flashing "You're our millionth visitor and you've won a laptop" one especially annoying. Especially funny is when I go back to the same site a month later only to find that I am still the millionth visitor and that I have won yet another laptop! That doesn't say much for the web site. It says even less about the webmaster who would put such a ridiculously stupid ad on their web site. Back on the subject of animated gifs, try this experiment at home: get a friend to flash a flashlight off and on into your eyes while you try to read a book. That is what you are doing to visitors to your web site. Don't.

Make good use of white space to isolate individual elements on the page.

White space is the open, unused space that appears between different elements of your web page. Provide your content with some breathing room. Good use of white space improves a site's readability.

Use few colors and fewer fonts.

Using too many colors can make your web page harder for people to read. To involved for this tutorial is the whole issue of color theory and how colors can either pull together as a team or work against one another.

Too many fonts can also be hard on the eye. Best to stick with just one. If you need to distinguish text elements, then alter the text's presentation by using properties like size, bold, italics.

Use colors that provide high contrast between text and background.

A pet peeve of mine is unreadable text. I have visited too many web sites where the designer obviously felt that light gray text on a white background or dark red/blue/gray on a black or near-black background looked cool. Unfortunately I don't think they ever stopped to consider whether or not anyone would be able to actually read the text. Or perhaps their monitor's gamma is such that the text is readable on their monitor. Please think of your site's visitors first. Provide significant contrast between your text and your page background.

Functionality and simplicity are not oxymorons

When creating a web site, you are building that site to serve some purpose. It could be for hosting a forum, performing e-commerce, providing a photography gallery, or simply writing on some topic. It really doesn't matter what the purpose of your site is: your purpose should be to implement the necessary functionality in as simple a manner as possible. I recall reading on a blog about design that "complexity destroys value," a sentiment I agree with. And who am I to argue with Albert Einstein: "Make everything as simple as possible, but not simpler."

Keep your site design simple and easy to use and your visitors will thank you.

Return to the Web Design section index.