Top 10 Website Design Don’ts

By July 3, 2008 May 8th, 2014 Strategy

1. Don’t be ‘Mrs. I Don’t Know What I Want, But I’ll Know it When I See It.’
This kills budgets and…sometimes…graphic designers. Have a clear understanding of how you envision your site, including what you want and what you don’t want. With the help of the project team, nail down your aesthetic values and preferences. If you’re lost, start with 5 sites in your business vertical and make lists of 10 visual likes and 10 visual dislikes. Write them down. If there are several people involved in design decisions, you may want to hold a meeting with them beforehand to make sure there aren’t any internal conflicts. Have everyone do this exercise and then compare notes. This will allow the design team to better meet your needs and expectations and avoid wasted budget.

2. Don’t play “Stake-holder Surprise!”
Waiting too long to involve decision-makers can lead to costly changes, timeline extensions, and frustration for everyone involved.  If the words “time and materials” fill your heart with joy, then by all means wait to unveil the designs to your boss or your owners until the last moment.   But if you want a product delivered on time and on budget, keep all stake-holders involved from the beginning. Time invested upfront reviewing progress, will save these busy people more time later.

3. Don’t make design changes after design is approved.
Understand that once the designs are approved and build-out has started, it can be extremely costly to make any design changes. Any design changes to the site will involve more design time, and the developers may need to partially rebuild the site. Just as you wouldn’t tell your architect to add another bedroom to the blueprint after construction has started on the foundation, don’t change your website blueprint in the midst of development.

4. Don’t build that inscrutable moving-target, chinese character flash nav because it’s cool or edgy.  You are niether.
It’s great to come up with unique ideas and stand out from the crowd, but be sure your design follows established usability principles. Conventions are the good guy here. Your web designer should have a clear understanding of these rules, and should let you know if any of your ideas are breaking them. For more information on usability, read Steve Krug’s Don’t Make Me Think. It’s a one sitting read.

5. Don’t break visual hierarchy.
The basic hierarchy should go: Logo > Page Title > Body Copy.  Never enlarge body copy to a size larger than the page title to make something stand out, you will only confuse your users and your site will not look professional.

6. Don’t use long lines of text.

Magazines and newspapers use columns of text on a page because it is hard for the eye to follow a long line of text. The same holds true for websites. Keep the horizontal length of your lines of text short.

7. Don’t display more than one motion graphic on a page.

It is very distracting and confusing for a user to have two motion graphics fighting for their attention while they decide what their next action will be.

8. Don’t use more than 3 fonts throughout your site
(This doesn’t include your logo). Using more than 3 fonts will give the site a cluttered, inconsistent, unprofessional look. Also, maintain consistency in typeface and size for page headers and body copy. Pink, bold, 30pt text for that one event teaser (because it’s so important!) will only make people look to a more professional site for event information.

9. Shoot for a content-area with a width of around 900 pixels plus or minus 

The 800 X 600 pixel days are gone. Those with screens at that resolution either live in  Baluchistan or an old folks home. For the latest stats on browser display sizes, visit the wc3 (http://www.w3schools.com/browsers/browsers_display.asp). Similarly, if you’re on a gargantuan late-model iMac, don’t ignore the standard screen size of 1024 X 768 pixels. Many of your viewers will approach your site from laptops and will need space for scroll bars on either side. Gutters allow the page to breath. It may look small on your 30 inch monitor, but your site must cater to the status quo.

10. Don’t use drop shadows on navigation.

Heavy drop shadows (on just about anything) will make your site look so 1996. On navigation, it will usually make the text harder to read. Other lame 1990s tricks include glaring gradients, anything to do with rainbows, flashing gifs and garish backgrounds.

Leave a Reply