You Are Reading

OUGD504 - Design for Web: Analyse Websites

In preparation for next weeks introduction to web, we have been asked to look at some websites and see what makes them good or bad for a number of reasons. These could be because of their ease of navigation, whether their minimal or overcrowded and if they're appropriate for their target audience.

Good Examples

I think this is a good example of a website because
  • The white background keeps it clean and minimal, while allowing the images to stand out but not appear cluttered.
  • The full width image gives something the viewer to look at, as well as interact with which is appropriate as it gives an insight to the viewer what the product is.
  • By having the white text on all the images, it allows them to stand out against the photographs as well as be consistent with each other and the background. 
  • The different colour for the footer allows the different kind of information to be separated in a contemporary way without using a header.


This is a website for baby products and I think that it's successful because
  • It is aimed at parents and not children, which is a common mistake when designing for children's products
  • The colour scheme is simple and neutral, and although it uses pink and blue, they haven't been used to be gender specific
  • The photographs also help with the viewer to see the kind of company it is, and exactly what products they sell
  • The sans serif font used is also very friendly, and gives a trustworthy impression of the company.


BabyGroup | South African parenting community by Lisa McColl, via Behance

I think this is a really good layout for a website because
  • The full width slider is a focal point so engages the viewer, and the circle buttons which change image when you click on them are also clear as they are in the center of the image and change colour when selected
  • I also like how when there is a different section to the page, the background colour changes to represent this transition
  • The three columns also work really well here as the space is filled up, and is unlike the University of Alaska three columns
  • I also think the green works well on the navigation bar and logo as the white background allows them to stand out.


Restaurant Website by Diana NB, via Behance

Urban Organic
This website has a really simple, functional layout and I think it is successful because
  • Although some websites work well when they have a long layout, this layout manages to fit a lot of information in meaning you don't have to scroll down far and this is really functional
  • The colours used are also bright, but this doesn't make the website tacky or overcrowded because of the neutral background
  • The colours also correspond to the images used and the company as they are related to fruit and vegetables
  • I think the type hierarchy also works well on this website because you know what information to take in first and exactly where to look for things like the navigation bar and the headings.


Urban Organics - Web Design

I think this is a really good website for usability because of how easy it is to search for a holiday and then edit it to find one thats available. 
  • The search bar at the top is more complex than most holiday websites, as you can click on the link underneath the search box, for example Airport List, and it gives you all the airport names you can choose from, as well as being able to click multiple airports rather than a standard drop down menu
  • The search box also changes to how many you have selected for example if you choose nine destinations it will say 'Spain.. +8 more'
  • When you have pressed search it allows you to refine your search further by changing the duration of the stay, the dates you fly and the budget. By changing any of these options the page doesn't refresh, and so you don't have to wait for a page to load which makes the user more likely to stay on the page
  • The colour scheme is also neutral with a few block colours which doesn't create a busy page, but one where you can easily see where the focal points are.




Bad Examples

Vancouver Traveller Bed & Breakfast
I think this website is bad for several reasons:

  • There is no logo or proper name, which makes it hard for the viewer to trust and associate with a legitimate brand
  • The background has an aeroplane pattern on which has nothing to do with the content, and is very distracting with the text placed on top
  • The choice of colour contrast with each other harshly, and doesn't create a warm, inviting appeal
  • The two images on the page are the same which is pointless because you can already see it, and it makes it seem as though that's all there is to see - that it is the best part of the b+b. 
  • The links on the side navigation bar are in the default colours, which makes it seem as though they're not bothered about the site.
  • The bodycopy is all one paragraph which doesn't make it obvious that there are actually different sections to the bodycopy. This means the viewer might not read all of it and realise there is more to offer.




This website is already an improved version of a website which was considerably worse than this. I don't think this is a very good website for the following reasons:
  • Even though the university has a logo, it isn't on the website which makes it seem as though it isn't an official site. This is important for a university website because prospective students would want to inquire about courses, or arrange a visit with the proper institute. 
  • The colours and font choice make the site seem very drab and dull. As Alaska is known for being outdoorsy and cold, the dark colours and image don't seem to dispute this and make it seem inviting, which would put me off from wanting to go there.
  • The navigation bar looks very dated with the gradient background, and it doesn't stand out at all between a thick header and slider. The text doesn't stand out to the viewer which might make them look elsewhere as they can't find what they need.
  • The overall background gradient is very dated and this reflects on the university as to me I would think their courses and facilities were also dated.
  • If I was interesting in doing a creative course I would definitely think twice about applying here due to the lack of good design on the home page.
  • When you get to the actual content, the layout is very poor. There are three columns but the content doesn't fit well in these, leaving gaps in the middle column and too much information in the other two. 
  • The actual content also isn't something that I would want to see on a university page at first glance - I would want to see the courses, students work etc.




This website has a sterotypically roadside american diner feel to it, and this is why
  • The candy striped pattern at the top is quite distracting, especially with text over it, but it also creates a cheap, american diner impression which isn't appetising.
  • The designer also should have used better stock photos or took more appealing images of their own food to make the viewer want to try it.
  • Although the navigation bar has clear links, the striped background and italic serif is tacky and this reflects on what the menu could be like. 
  • The 'Est 1984' text on the header seems out of place and a space filler, and is barely readable against the background.
  • The social network icons are right on the corner of the page which makes them quite hard to notice as well.



I don't think website reflects the product and here's why:
  • The quote 'Bali voted "Best Island" in the world' is written in Comic Sans, which seems ironic considering Comic Sans is known to be childish, informal and it is an inappropriate choice of font. 
  • The design doesn't fit the width of the screen, which is poor design and unresponsive.
  • The pictures on the right are so small they can't be seen by the viewer, which isn't good as it doesn't allow the viewer to gain a visual insight to what the website is about. 
  • The text next to the images is actually a navigation bar - I thought this was a paragraph with short sentence lines, as it does nothing to stand out as anything different, but when I hovered over it, a house icon appeared.
  • There are so many different fonts and colours on the website it is hard to know what links and text are important and where your eye should go, which results in no information being taken in at all.
  • I also feel the website is too long, as space could be utilised on the right half of the page where there is nothing at all.
  • The header font looks like word art, and the clip art style of Bali also helps to make the website appear unprofessional and untrustworthy.  


This is a website for a disabled chrilden's organisation, and I think the design could be a lot better
  • The grass at the top of the page has no correlation to the content of the website
  • There is a lot of text to digest on the home page, but no headings as to what they are about or images to support it and make it easier to read
  • When I actually started to read the content I realised that they were paragraphs with headings, but the headings are the same point size and style so you can't distinguish them.




Comments for this entry

Leave your comment

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.