10 Worst Website Design Mistakes

Whether you took courses at the local community college, having been designing sites for years, or are an amateur learning as you go, there are some things every web designer should avoid if he wants visitors to enjoy spending time on his site. You’ve probably heard the term “sticky” in reference to a website. This simply means a site where the visitor wants to stick around–a site that stays with the browser and which she bookmarks and frequents. There are so many elements that go into making a site sticky that it is a whole other topic. However, there are definitely some web design mistakes that can make a site one that visitors want to run away from. Here are the design no-no’s that you should avoid.

Jarring Colors

Colors that are so bright they hurt your eyes or colors that clash with one another can make a site visitor want to run away from a web page. When planning the theme of your website, try to choose colors that complement one another. Yellow rarely works as a main color, although it can look good as an accent. Using every color of the rainbow is rarely a good idea either.

Site Title: Moradito

Bad Design Examples

Link: http://moradito.com.ar/

This site uses nearly every color imaginable in a puzzle-type pattern. The only way to describe it is ugly.

Too Many Graphics

If you clutter your webpage with graphics, two different things occur. First, the page becomes so busy that visitors may be unsure where to click or what they want to look at first. Second, if a browser has a slower Internet connection, the page may take too long to load. After 30 seconds, most people will leave and move on to another site. We’re living in an age where everything is immediate. If you don’t grab the customer’s attention in the first few seconds, you risk losing her altogether.

Site Title: Pine-Sol

Bad Design Examples

Link: http://www.pinesol.com/

This site has so many graphics that it just looks cluttered. On top of the numerous graphics, the images move around all over the page, so even if the visitor wanted to click on one of the images, she would have to chase them with her mouse.

Slow Load Time

Does your website load so slowly that the visitor has time to go grab a cup of coffee and a donut before coming back? Adding too many elements, such as flash, sound, tons of high resolution graphics, or java scripts, can cause a site to load slower and slower. Keep in mind that while most of your visitors will have high-speed, there are still rural customers who will be on dial-up and unable to access your site if it loads too slowly.

Site Title: The Museum of Me

Bad Design Examples

Link: http://www.intel.com/museumofme/en_US/r/index.htm

The flash on this website causes it to load very slowly. On top of that, there is not a readily visible link to skip the flash. Browsers with slower download speeds will find this site so cumbersome to load that they will likely exit out of the site and never return.

Too Much Advertising

Content websites and blogs make money off advertising instead of from selling products. However, where many website owners fail is by adding so much advertising that the visitor can’t tell the difference between content and ads. If the visitor has to search to find the article or the remainder of an article, then there is too much advertising on the page. One or two ads placed to the site are best. More than that and you risk annoying your browsers. In fact, in a digital advertising report conducted by Upstream and YouGov in 2012, they found that about 20% of consumers said that if a company advertised too much, they would never use that company again.

Site Title: Hemmy.net

Bad Design Examples

Link: http://www.hemmy.net/

On several pages of this website, the entire viewing area at the top of the page is about 90% ads of different sorts. To get to the content of the page, one must scroll down. Even there, there is additional advertising scattered throughout. It is so distracting that it is hard to focus on the site.

Amateur Photo Editing

Nothing screams amateur louder than an image that hasn’t been edited properly. Websites with this type of issue might have cut out images with fuzzy borders, auto-corrected colors that look off, poor layering techniques that make it obvious that two pictures were spliced together or strange resized proportions.

Site Title: Peter’s Buses

Bad Design Examples

Link: http://www.petersbuss.se/

There are several problems with the graphics on this page. First, there is the bus with a white instead of transparent background that is just plunked down on the page and looks amateurish. The two photos to the right are also problematic as they’ve been stretched and resized without ratios being maintained. The photos look off and the people in the one on the right appear so stretched out that they could be giants in the land of Lilliput.

Designs a Three Year Old Could Create

If your website looks like you opened Microsoft Word, created a piece of Word Art and threw the site up on the Internet, then you might want to rethink your design elements. While simplicity is a welcome relief from some of the busier sites, if you go too simple, you risk your site looking juvenile and cheap.

Site Title: Cyber D-Sign Clan

Bad Design Examples

Bad Design Examples

Link: http://www.cyberdsignclan.com

This design is so simple that it will be immediately recognizable as a basic Microsoft pattern background and Word Art. The designer hasn’t even changed the colors of the words from the standard design MS starts with. On top of that, a pop-up page tries to load. This might be overlooked if the design was better once you skip the intro and click through to the main page. However, the design of the linked page (below) is just as disappointing.

Poor Navigation

Even if a website has a visually appealing design, visitors can grow frustrated and leave over poor navigation. For example, sites without a clear link or with so many items that it is hard to decide where to go. One problem that many website owners face is a small site suddenly growing larger. Navigation that worked when the site had five pages simply won’t work when the site has 500 pages. Look at how the site can be reworked and restructured into categories and sub-categories so that visitors will understand exactly where to go for what they want. It is also smart to add a search box.

Site Title: LawnSignDirectory.com

Bad Design Examples

Link: http://www.lawnsigndirectory.com/

The visitor expects a searchable direction for their area, but instead there are dozens of links listed down the left side of the page, ads on the right, and a few featured businesses. This site could benefit from a revamp of the organizational structure, so that visitors can easily find the resources they are hunting for.

Text Issues

Web designers who use a busy background and then pick a text color that doesn’t offer enough contrast make their web pages unreadable. If a visitor’s eyes hurt after reading one article, why would she stick around to read more pages of your site? If you must choose a busy background, at least place a box, layer, or content table with a solid background and choose a text color that is opposite. Try to avoid gray on gray, but choose white on dark red, black on light pink, etc.

Words that overlap one another are also difficult to read as are paragraphs that are partially overlaying graphics and partially on a solid background.

Site Title: Bermuda Triangle

Bad Design Examples

Link: http://www.bermuda-triangle.org/

Not only are there contrast issues on this site, but the text overlaps other texts, making it nearly impossible to read.

Typos

Nothing screams unprofessional more than glaring typos and grammar issues. Although no one is perfect, you can attempt to come close. Ask friends and family to look over your pages and help you find these errors, or hire a professional editor to proof your pages. The example below is just for fun. This is not a real web design company, but a tongue-in-cheek look at how unprofessional some companies appear.

Site Title: Web Tek Rocks

Bad Design Examples

Link: http://webtekrocks.com

One typo can be overlooked, but this site shows how some shady sites are full of errors. For a company that wants to help you put your site on the web, they’d probably be better served spending some time correcting the issues on their own site before building yours. “Special” is spelled S-P-E-C-A-I-L; “expertise” is spelled “experteze”; They offer to “help put youselves” online; “We can built your site faster than anyone!”

So Bad That You Can’t Explain It

Some websites are just intrinsically bad in design. Sometimes it isn’t one thing that makes the site painful to your eyes, but almost everything on the site. There may be a combination of ugly colors, poor navigation and other items. Fortunately, these sites are rare, but viewing them can help you know what not to do when you design your site.

Site Title: The Afterlife

Bad Design Examples

Link: http://heaven.internetarchaeology.org/heaven.html#bottom

This site is so horrible that it’s hard to describe. First, anyone who is prone to seizures should stay away from this site, because it is likely to trigger a seizure in even a non-seizure prone person. The site scrolls, is filled with animated and flashing graphics. On top of that, the graphics are not appealing for the most part, ending with a baby in bandana playing the guitar. Visit if you dare.