Week 2: Examples of Bad and Good Websites

People usually talk about good and bad websites.  I think there should be a third category to add to the good and the bad, namely the UGLY.  One of the strongest candidates for this category is Justine’s website (http://www.justines1937.com/).  There is nothing on this website except a filthy, nudist, low-resolution video which has absolutely no relationship to the website.  You would not even be able to tell what the website is for.  Apparently it is for a restaurant in Austin, Texas.  I cannot figure out the purpose of this website.  Apart from that filthy video, there is nothing that tells the user what Justine’s is, the text is too small and hard to read with that video in the background, and all it does is to provide the phone number for reservations and an email address (which the phone book would provide anyway!).  It is only if you happen to hover your mouse over the word “Justine’s” that you can see a menu.  Again the other pages on this website are hard to read with that video still running in the background.

justines

Examples of Bad Web Design
There are many examples of bad website design, some of which are:

1. Penny Juice (http://www.pennyjuice.com/htmlversion/whoispj.htm)
The colours are awful with no apparent reason for using all those colours.  The text is too small and hard to read with those colours in the background.  The front page is merely testimonials from customers about the juice this website sells, with a few links in a small-size text that is hard to read because of the colours.  The rest of the pages again use those too many colours.

pennyjuice

2. After Life (http://heaven.internetarchaeology.org/heaven.html#bottom)
This website is nothing but animated pictures that keep scrolling upwards without any control from the user (and may malfunction in Internet Explorer).  There are no links or any type of navigation whatsoever.  What is the purpose of this website?!

AfterLife

3. Great Dreams (http://www.greatdreams.com/)
This is a clear example of bad combination of the background colour and text colour which makes the text hard to read, especially when its size is too small.  The page is too long which reflects a bad layout design.  It should have a few links on the front page and place the different parts of the content on other pages.  The page displays a weird message at the top saying:”PLEASE REFRESH YOUR PAGE TO GET THE LATEST ISSUE”!  Most importantly, there is no clear theme for this website – it looks like it is an all-in-one website that attempts to be an online encyclopedia!  The width of the page changes as you scroll down and the choice of colours in some parts is awful.

GreatDreams

4. Ingenfeld (http://www.ingenfeld.de/)
This is a German website that God knows what it is for.  Even when it is translated to English, it stays the same, apparently because it is all images!  There is a message displayed at the top that says: “Windows Media Player is required to display some elements on this page”.  If you try to close this message, it comes back again!  There are so many images on the page, many of which are animated and some of them are x-rated!  Even if you accidentally hover your mouse over an image, you get more images!  You cannot tell what the theme of the website is.  The choice of the colours and the text-background colour combination is awful.  The page is too wide and you have to scroll horizontally.

ingenfeld

5. Bella De Soto’s website (http://www.bellads.info/)
This is an example of too, too, too, … much on one webpage.  The image below is obtained with the maximum zoom-out that Google Chrome allows (25%), yet it still does not show the whole webpage.  There is so much material on the webpage, with so many images, some of which are animated.  The page is too long and too wide; so it scrolls both horizontally and vertically.  In addition, there is text moving across the page.  This is probably as bad as it can get for layout design.

Bella

Examples of Good Web Design
Luckily, there are also many good website designs, some examples of which are:

1. Tinkering Monkey (http://www.tinkeringmonkey.com/)
This is an online shop managed through WordPress that sells simple wooden goods for everyday use. Everything is made in the garage-turned-woodworking-studio of Mike Cheung.  The website is simple and easy to navigate, loads quickly, provides a lot of information about each product, and allows users to choose their own logo to place on the product.  It also provides a section for do-it-yourself activities with detailed pictures.  It even contains a blog and a live video stream of the woodworking studio.  The choice of the colours is excellent and the text is quite clear.

tink_monkey

2. Food Sense (http://foodsense.is/)
This is a website for healthy food recipes.  The page layout is nice, the text is clear and navigation is easy.  The photos are crisp and the pages download quickly with excellent use of white space.  It allows users to contribute recipes to the website, and has a blog and a search engine.

FoodSense2

3. Optilead (http://www.optilead.co.uk/)
This is a Web marketing company, so there is no wonder that their website is a good example of website design.  The layout is simple and the pages download quickly.  Navigation is easy and the use of white space is excellent.  The choice of colours is also great.

Optilead

Advertisements
This entry was posted in Blog Design and tagged , , , . Bookmark the permalink.

5 Responses to Week 2: Examples of Bad and Good Websites

  1. Pingback: Week 4: Website Organisation | Interactive Web Design

  2. We are glad you like our website. We have been working very hard over the last couple of months making tweaks and improvements – so hopefully you will still like it as much!

    Ben Speight,
    Marketing Executive at Optilead.

  3. Pingback: Free Download CSS Templates for Online Shopping Websites - Online Store How To

  4. Pingback: VISUAL LUCIDITY

  5. Pingback: Basic Web Design Good vs. Bad – VISUAL LUCIDITY

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s