12 Tips for Great Web Design

When I started designing Web sites 11 years ago, I had no idea there was such a thing as a WYSIWYG (what-you-see-is-what-you-get) editor. The result of this lack of assistance for the novice designer in general was an abundance of Web sites that were so ugly you had to take Pepto-Bismol to control the nausea. Thankfully, the days of the ugly Web site are now few and far between, though the spectrum may have now shifted too far to the other side.

Ugly Web sites may have been ugly, but for the most part they were at least functional. Gaudy and tacky, yes - but still functional. Now that anyone with a computer can create a beautiful Web site, we come back to the issue of functionality. Functionality is a product of good design, so just because you have a beautiful Web site does not mean it's worth visiting. If I need something from your site but I can't find it amongst all the shiny graphics, animation, and streaming video, then it has failed the functionality test and I won't bother coming back.

Regardless of if you're an amateur or a professional designer, and regardless of whether your site is for business or pleasure, there are basic rules of good design that should be followed in order to keep your visitors happy and keep them wanting to come back.

Here are my top 12 tips:

1.) No Splash Screens

Yes, splash screens are sometimes very pretty and can showcase something special about your company or site, but if you want to make your visitors happy (as opposed to your Marketing Dept.), do not include a splash page on your site. Splash pages are extremely annoying to the end-user, and they also can prevent your site from being properly indexed by search engines - two very important things required for a successful Web presence. When you think 'splash screen,' think of Nike's slogan, with a red line through it. Just [don't] do it!

Jared Spool, of User Interface Engineering at Macromedia, said it best:

"When we have clients who are thinking about Flash splash pages, we tell them to go to their local supermarket and bring a mime with them. Have the mime stand in front of the supermarket, and, as each customer tries to enter, do a little show that lasts two minutes, welcoming them to the supermarket and trying to explain the bread is on aisle six and milk is on sale today. Then stand back and count how many people watch the mime, how many people get past the mime as quickly as possible, and how many people punch the mime out. That should give you a good idea as to how well their splash page will be received. That's the crux of it."

Matthew Inman, of the SEOmoz blog, offers more anti-splash-screen ammunition here: http://www.seomoz.org/blog/how-to-convince-a-client-they-dont-need-a-splash-page

2.) Limit Page Length

Limit each of your pages to the length of two screens. Pages that go on forever take too long to load and also tend to lose the interest of visitors. If you have to put more than two screens of information on your page, you should be dividing your content into more sections.

Carve up your content into organized sections and separate them all out so that each one is an easily digestible chunk. This will allow your users to not be overwhelmed by the information you offer, and will allow them to go through it in the order that works best for them (which may not be from top to bottom or left to right!).

3.) Be Consistent

Just as in any document formatted on a word processor or as in any brochure, newsletter, or newspaper formatted in a desktop publishing program, all graphic images and elements, typefaces, headings, and footers should remain consistent throughout your Web site. Consistency and coherence in any document, whether it be a report or a set of simple Web pages, project a professional image.

For example, if you use a drop-cap as a special effect to start each of your paragraphs, you should use drop-caps on all of your pages. Link-colors (including selected and visited) should be consistent throughout your Web pages. Typefaces and background colors, too, should all remain the same throughout your site.

Color-coded Web pages in particular need this type of consistency. Typefaces, alignment of all your text and headings, background images and effects, and all the special effects on graphics (shadows? borders? etc.) should remain the same. The only thing that should change is the colors themselves.

4.) Avoid Animations

Avoid overdoing animated elements in your site. While dancing bears and singing rhinos are cute and funny, they can also become a detriment to the display speed the site will require, and will get in the way of more important information being offered. Too many bells and whistles will make the experience of visiting the site a negative one. A site with so many moving parts can become confusing and not informative.

5.) Avoid Browser-Specific Features

Avoid the temptation to use the latest in moving graphics if it means that it only works with one browser and you have to put the phrase "Best viewed with ..... browser". You will not only turn away many would-be visitors but alienate them as well if they perceive that you don't like their favorite browser. Many people don't have a clue about how to change their browser version so if they can't see your site with what they already have, they won't see your site.

Make sure to test your Web site with all possible relevant browsers (Internet Explorer, Netscape, Firefox, etc.) to make sure it renders the way you want it to no matter how someone is viewing it. Remember also that there are many versions of browsers within each type, so that I.E. 7.0 does not render Web pages necessarily the same as I.E. 6 does.

6.) Consider Navigation

Avoid poor navigation within your Web site. It is very important that Web users be able to access all the pages of your site from every page. Users will often enter your site from a search engine listing with a link other than your home page, so they will need to be able to get around from anywhere they land.

This can be accomplished in many ways, but most designers these days use "tab" functionality, making links across the top of the content page that look like tab folders. Many sites provide graphical buttons for their content as well as text-only links elsewhere on the page (usually the bottom). You can also provide your visitors with a site map, which will provide a link to all content from one centralized location that is devoid of graphics or any other distractions.

7.) Consider Color

Not only should you consider color from an aesthetic perspective, but you must also consider it from a disabilities perspective. Color-blindness affects about 8% of the population, the most common problem being telling red from green. Again, just designing something that looks "pretty" does not mean it will be functional for all your visitors. No matter how "pretty" something is, if people can't use it it's not functional, and it won't get used.

For best results, make sure to make the lightness differences between foreground and background colors very pronounced, regardless of the colors you choose. If you have two colors that are close in terms of lightness, it will be difficult for many to tell them apart from each other.

As far as aesthetics, there are many Web sites with great tutorials on how to choose your color scheme. One great example is the one by About.com: http://webdesign.about.com/od/colortheory/ss/aa040907.htm

8.) Create Balanced Content

Try to balance the content in a page by avoiding "centering" the key elements of a page or displaying them off-balance. Picture that your page has been divided into three portions in both horizontal and vertical directions. For horizontal divisions, you have the top third, middle third, and bottom third, and for vertical divisions, you have the left third, middle third, and right third. Place graphics and text into each "third", but avoid putting everything in just the middle third (the center) or any other third. It would look funny to have everything on one side, but empty on the other. If you put a large graphic on one side of the page, you have to put something similar in scale on the other side in order to balance it.

9.) Consider Usability

• Ensure a quick download - something useful in 8 seconds max.

• Beware of cutting-edge technology - visitors are not prepared to spend the time working out how to find your content.

• Keep it calm - moving images have an overpowering effect on human peripheral vision.

• Limit your frames, it sometimes make printing or bookmarking difficult

• Keep scrolling short, and horizontal scrolling is a no-no.

• Make sure every page has a clear indication of which Web site they belong to

• Choose a simple Web address that's short enough to be remembered

• Always list contact information on the front page, instead of burying it anywhere else

Keep in mind, the user who views a site wants to be able to find exactly what they are looking for in as little time as possible. Look at your site through their eyes. What is the number one thing most people visiting the site are looking for? Make it easy for them to find it right away. This is a key point to consider because quite often what the Marketing Department wants to showcase is not necessarily what people are looking for when they go to the site. If you give your visitors what they want right away, they may be agreeable to sticking around (or coming back) to see what else is there - and that's when you get the chance to show them what else there is to offer from your content. If you want happy visitors, fulfill their needs first, and THEN yours (or your company's).

10.) Consider Resolution

Your Web design should work at almost any resolution, regardless of what resolution the site is being developed in. Although there still may be many unfortunate people who run their monitors at 640x480, I will advise that these people can be ignored from a design standpoint. However, it should work starting as low as at 800x600, and all the way up to at least 1680x1050 (widescreen high resolution), with optimization suggested for 1024x768 (until widescreens become more the norm, at least).

So, in addition to testing your site across browsers, you also need to test across resolutions.

11.) Keep it Simple

"Everything should be made as simple as possible but not simpler." -- Einstein

Keep the point of the Web page in mind. The reader wants to get to the heart of your content without a whole lot of distracters. Many an English composition teacher will tell you to be clear, concise, and to the point, and any photographer will tell you that what you leave out is more important that what you put in. The average user will not be impressed by irrelevant fluff that detracts from the point of the Web page and the information you're trying to make available.

Give them what they need, and nothing more (or at least bury the "more" in a place accessible, but not right in their face.

12.) User-Centered Design is Key

Just as we all have learned in writing classes about reader-centered writing, user-centered design is just as important when it comes to Web layout.

Your Web site should be designed to appeal to the demographics that will be visiting your site. You should research the demographics and needs of your target audience before you begin design. According to Web Style Guide (http://webstyleguide.com/interface/user-centered.html), "The goal is to provide for the needs of all your potential users, adapting Web technology to their expectations and never requiring readers to conform to an interface that places unnecessary obstacles in their paths."

In summary, there is a lot to think about and consider when designing a Web site. Too often a site is developed with no planning whatsoever, and it shows. For best results with your Web projects, follow these tips and then make sure to request feedback from a focus group. If a formal focus-group is not feasible, at least get feedback from those not involved with the design or planning so you can get an objective viewpoint and helpful criticism. As this article shows, there's more to the development of a site than initially meets the eye. Many people take a beautiful, functional site for granted without realizing all the planning and hard work that went into designing it. It takes work, but when you hear the positive comments from your visitors, it makes it all worthwhile!