When it comes to website design, there are definite dos and don'ts.
However, sometimes it can be hard to tell which design choices will lead you astray. In today's blog, I've compiled a collection of real world examples of poorly designed websites to give you an insight into what mistakes they made. Of course, these may be more extreme cases, but the lessons you can learn from them are still undeniably valuable.
1. Penny Juice
When I've discussed website design in the past I've said that factors such as simple but good aesthetic design, clear navigation and offering your visitors a clear description of your product/service should be some of the chief goals you try to achieve. Unfortunately, Penny Juice fails to achieve all of these things.
What you get when arriving on the website's homepage is a confusing mess of bright colours that run the entire gamut of the rainbow. This is accompanied by text that is almost completely written in caps and bright white. Other issues include the fact that there is no clear navigation above the fold and the entire page is comprised of testimonials. What you can assume from reading these testimonials is that the product may be some type of fruit juice formula for babies.
Suffice to say, the design itself is too intense, lacking clear navigation and doesn't really tell you outright what the product is. The design of the site does not fare any better on its other pages, which you can only navigate to by scrolling right down to the bottom of each page.
These days, most online classified sites adopt a web design sensibility similar to the likes of eBay, Amazon or Gumtree. These designs work because they don't simply overwhelm you with a wall of products or services. Most of them list the categories of products first and foremost, and then may complement the home page with a few product listings - but nothing to confuse the viewer. And once you search for a certain product, those fitting the description will be placed in a neat list.
However, Arngren.net does not adhere to these rules with its classifieds website. Instead, it is a nearly incomprehensible mess of different products and services that don't necessarily have any similarities between one another. But along with being generally confusing to look through, Arngren.net also doesn't keep its design to fit in the one screen space. So instead of only having to scroll vertically, you also need to scroll horizontally. This is one website that has taken no care in its design and has not even considered what the experience would be like for users.
3. Pacific Northwest X-Ray Inc.
While this website manages to explain what its service is basically straight away (albeit in a somewhat confusing manner), that's essentially where it ends. The design is comprised of notably conflicting colours or text colours that blend way too much into the background colour, making it a chore to even read. If the text colours aren't conflicting or hard to read, then they've failed to have any anti-aliasing applied to them, causing the text to have clear jagged, white edges around them.
The colour scheme is unpleasant and the navigation is fairly perplexing, as well. It genuinely looks like a website that was originally designed back in 1997, when design faux pas like this weren't uncommon, but then it has never gone through a much needed redesign over the years.
4. 007 Museum
When it comes to utilising white space on your website, this is not the way to do it. While you'd think a website that's completely dedicated to the world of James Bond would pretty neat, it's unfortunately hurt by a design approach that is simply jarring. Random text is boldened and can be of a reasonable font size at one point and then excessively large or painfully small the next.
The issues with text are not helped by the fact that a lot of the website is also filled with white space, but this isn't in a good way. Most of the white space is due to poor formatting and a weird decision to throw almost every news story into their own separate frames. Nothing is listed coherently and the design as a whole clashes in a very bad way. You'd have a hard time navigating yourself around this site with ease.
There's no denying that mrbottles.com has issues. Its text colour constantly changes, images are randomly thrown in here and there without consideration for formatting, navigation is all over the place and the main page simply has way too much text than anyone would ever want to read. This is made worse by the fact that it never really utilises any white space to break up the text.
However, one offender on this site that didn't creep its way into the other sites listed in this blog is that that, when you enter the site, a Flash animation automatically starts where a man pops up on screen and starts talking. This effectively blocks some of the screen and acts only to annoy the user. Websites shouldn't contain autoplaying content. People should have the option to view/listen on their own accord.
If there are any other poorly designed websites you think deserve a mention? Add them to conversation in the comments below.