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 valuable.
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.
Penny Juice realised the error in their ways and have updated their website design to be (slightly) more user friendly. They've stuck with the bright, clashing colours, but they have cleaned up the design, utilised more negative space, added a call to action and clear navigation at the top of the page, and made it slightly more obvious what they are selling.
However, despite their best efforts, it's still not a great website. The colours are one of the first no-no's, the low-res, dated images don't help, along with the off-centre headings and dated rainbow font that transports you back to the late 90s. But the biggest no-no is the header image, which is badly cropped and rather than showing any products, is just a close up of children's eyes. Creepy.
See the updated design below:
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.
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.
Website design has not changed.
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 where it ends. The design is comprised of conflicting colours or text colours that blend way too much into the background colour, making it a chore to 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 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.
Website design has not changed.
4. 007 Museum
When it comes to utilising white (or negative) 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 be pretty neat, it's unfortunately hurt by a design approach that is jarring.
Random text is bold and 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 filled with white space, but that 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. You'd have a hard time navigating yourself around this site with ease.
The 007 Museum have made a few updates to their website over the years, but mostly it's just updating their banner image and everything else below the fold is still a mess.
Do you think it's an improvement?
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 has way too much text. This is made worse by the fact that it never really utilises any white space to break up the text.
However, one offending thing that didn't "pop up" on any of the other sites is that when you enter Mr Bottles, a Flash animation automatically starts where a man pops up on screen and starts talking. This effectively blocks some of the screen and only annoys the user.
Mr Bottles has definitely upped their game. They've cleaned up their banner image and navigation, improved the background to make the foreground imagery and text clearer, and actually included some really clever interactive navigation features above the fold.
Where they still need work: there's way, way too much text on the home page, low-res and varying sized images, and a weird 'back to the top of page' icon that has nothing to do with their brand.
Take a look at the updated website below:
All of these websites could do with a complete design overhaul. If you think your website could too, why not download our free Website Redesign Workbook to help you get started. Simply click on the link below.