OUGD504 - Design for Web: Analyse Websites

On my Context blog I have written about some websites that I feel have particularly bad or good design, I have decided to redesign a couple of ones I thought had some problems. This is so I can get a better understanding of how to create a website that is easy to use and looks good.

Vancover Traveller B+B
On the context post I wrote about this website:

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.

I then redesigned the home page to look like this: 

My design decisions:

• As the original site had no logo or name, I created a quick design which looks legitimate and more trustworthy. I added a subtle drop shadow and created it in capital letters so that it would stand out more
• I added a full width image, and chose one of the internet as the ones on the website were too small. I also added a 'Book Now' section over this in a slightly transparent box. You can still see the image beneath, but it also highlights the search options and I think this is a contemporary feature. I have made it straight forward to understand this process giving drop down options so the user doesn't have to type anything.
• The navigation bar is now at the top of the page, and is clearly positioned on a pale background above the image so that it's separated from the content of the website and the user can easily see it. 
• I also decided to add an arrow under the link what page its on so the user can clearly see what page they are using.
• As there are only three rooms, and it is something the user wants to know about as soon as they go onto the site I decided to have a small thumbnail of these on the home page, and when you hover over one the name will pop up as well as a link to go to that page, as demonstrated with the cursor.
• On the original website the amenities were written together with the about section of the page, so I separated them on this new one. The amenities are in a column on the right side to match the Book Now column, and they create clear margins for the user as to where the information is placed. 
• By having an amenity on each line it is easy for the user to digest.
• For the colours used, I used the eyedropper tool to take a green from the main photograph and use different shades of that. I think the green creates a trusting, nature related atmosphere which relates to the B+B. 
• I kept the footer simple with a dark green to separate it from the rest of the home page, and with the site map demonstrated under each heading.
• I think it is a simple website which older people would find easy to use due to the conventional navigation bar, images and with how compact it is.

University of Alaska

On the context post I wrote about this website:

• 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.

Here is my redesign:

Design Decisions:

• I found the logo for the website, and edited it slightly so that the text was next to the icon and not underneath so it fit in better for layout purposes. I put it at the top left corner so you immediately knew you was looking at the official website when you clicked on the page.
• Luckily the blue used in the logo was actually quite nice, so I used this mixed with a grey and white for the colour scheme to keep it neutral and formal.
• The original navigation bar was overcrowded, so I tried to de clutter it keeping the important things and thinking how some of the links could be changed into sub navigation links.
• I kept an image of the Alaskan landscape as the main banner, but added a 'course finder' window so that it had relevance to the user. Alaska is so widely known for its landscapes so I wanted to keep that aspect.
• Next, I used four images and headers to highlight links that would be of interest to the viewer, so that they can scroll through the page to see whats available rather than having to click on specific links in the navigation bar if they wasn't too sure what they're looking for yet.
• In the 'About University of Alaska' section, I took the mission statement from the original page and posted it here. This meant I could eliminate that section from the navigation bar, and have something for the viewer to read.
• I also kept the University of Alaska Foundation, but arranged it better so it fit in the layout on this redesign. It isn't right at the top of the page either as it isn't as significant.
• I also included a tesimonial from a student as I think this is something that the user would want to know about when looking for a university.
• Overall I tried to keep it neutral, formal but engaging as well with the colour and image to encourage users to consider it as a university option.