Tuesday 17 December 2013

Study Task 4- Type Hierarchies- Websites

Lloyds Bank





The very first thing that strikes you as soon as you open this webpage is OFFERS it is literally thrown in your face as it is in the boldest font and is the biggest point size.  


Your eye is then drawn down to what the offer actually is. Then a bold purple link to get people to find out more about the deal. 



Underneath the purple button is some more white text but in a harder to read font, that blends well with the background. They make it hard to read on screen as they don't want you to bother reading it, and they just want you to click 'find out more'. 


 At the top they have a bar with all useful links, and at the side is a link for existing customers, this is very small as they don't really care if you are an existing customer, they just want to draw in the new.

I have found with this website that the text is quite small and the image is very irrelevant to what they are trying to achieve. The fonts are very similar, but I like the layout of the website how everything is quite central. 

   

BBC News 




BBC News is an ever changing webpage and gets updated hourly depending on whats happening around the world. Every news website has a very structured and easy to navigate layout. 


Naturally my eye started at the top left hand corner of the page, with 'BBC News' the date and time it was last updated, this lets me know I'm on the right website. 


Then your eye gets drawn to the subtitle as it is the next biggest point size. And then links to the main stories that are happening. Again there aren't many typefaces used to keep everything simple and easy to read. 


Ever changing on the right is things that don't involve reading for other users that want to know the news without having to read. 

There is alot more type than image on this website however this is expected as it is a news website. It doesn't really interest me, it is more for a middle aged audience. It has a very similar layout to the banking website, clear and simple, but there is no terms and conditions to read on a news website. I like how they have kept the background white on the main body text keeping it clear, though doing this they have made 'BBC News' stand out more at the top, this is a good thing. 


Above is a screen shot of when you click through to a link again on the right is more stories, it loads with a quick video to watch and you scroll to read. The title is the main thing to catch your attention and then 'top stories' on the right, and the main body text below. 

Topshop 



The Topshop website has a very clean cut appearance, the background is white which draws the eye more towards the photography used within the website. 




The first thing that grabbed my attention is the title of the first fashion style, I like the font used it is bold and clear but it is not in your face, and I then red the sub heading underneath. The next thing I noticed and my eye was draw to was the Topshop logo, a very subtle logo, but instantly recognisable because of the font used. 



Here is a quick thumbnail sketch of the website layout and the main things I noticed, what I did notice about the website is the white sides, this reminded me of tumblr and twitter almost replicating social networks to make users feel familiar. 



What I also like about this website is that when you scroll down the top bar also stays with the page, this is a useful feature. Also there is a lot of use of imagery compared to text, but this is understandable because they need to show off their products. As you scroll down the images become smaller, but still just as structured, almost like an app.  

The same font is used through the Topshop website, they use the whole font family, the bold, light and regular, this gives great variation thought the website.  



Many other fashion clothing websites use very large thumbnails with photography on as you load the main page, this is to show off there current collections, they roll round pretty quick and have a small amount of txt on each page. 










No comments:

Post a Comment