Visual Hierarchy

Friday 28th September – Week 1 Tasks

Task 1:

Choose 2 examples of desktop websites that make effective use of the principles of visual hierarchy such as size, colour, contrast etc.

Create annotated screenshots that clearly illustrate where these principle are used. Write a concise project blog post that makes use of the annotated screenshots to discuss the examples in question. Suggested word count 250 – 500 words.


I have analyzed two websites using the visual hierarchy system of design principles. The results that I have are quite interesting.

Let’s begin with the first website. This will be Facebook:

I chose Facebook because It’s a good example. Their design is well structured and I do believe it applies the visual hierarchy system, as the design is well integrated with their functionalities that they are offering on their homepage.

Figure 1: Facebook (Click to Enlarge Image)

  • When I opened this facebook page, my eyes straight away looked at “Create an account” – I realized this directly correlates to the fact that “Create an account” has a greater visual weight in terms of size, hence why my eyes personally looked there first. I can imagine that Facebook has done this to emphasise on the idea they will always be free to encourage users to sign-up, that is also another reason as to why they would make it dominant in terms of size compared to the other elements.
  • I then looked at their main website statement which is “Facebook helps you connect and share with the people in your life”. This helps viewers know the purpose of the website. It is very important for viewers to know what a website directly, otherwise why should they be compelled to use your website?
  • The sign-up button contrasts very well with the website, why? because it has the unique colour of green. It stands out and takes more attention than the general elements existing on the website. General elements such as the footer, the form, and the blue header bar.
  • The blue bar at the top of the website with the login form as well contrasts well and stands out. The rest of the website is white in colour, and the blue bar, therefore, has a greater ranking position within the visual hierarchy.
  • The forms elements are placed in close proximity to each other, therefore creating the appearance of groups. In other words, the “Create an account” area is a group of its own.
  • The footer has very small-sized text, what does this mean? this means that the footer has a low ranking in the visual hierarchy, making it appear the least important segment of the website to the eyes.

The 2nd website that I chose, is old school Runescape, why? this is because there are things that I believe are missing and have been executed incorrectly.

Figure 2: Oldschool Runescape (Click to Enlarge Image)

  • The statement of the website, which shows the purpose of old school Runescape and what it is, requires users to scroll down in order to read and see. This is a problem because users on lower res screens such as 1600px and less have to scroll. Not every user has a high res screen that doesn’t require them to scroll.
  • The three buttons “New User? Signup Here”, “Free Player? Play Now!”, and “Member? Play Now!” do not have a visual hierarchy system. They should change the colour of New User to perhaps a blue colour or even green to increase the visual priority of it and therefore encouraging more users to sign up that don’t have accounts.
  • Another issue that I felt is actually an issue, the whole bar at the top of the website that contains “log in” – it is barely prominent and why exactly use a whole bar just to implement a login link? it could have been moved to a more encouraging section that makes it more prominent, just below the three buttons, vertically and horizontally centred with a big font-size.
  • There is a great lack of contrast in the header section, it feels as if everything is the same colour, sure there are a few elements here and there with different or slight changes in color, but it simply isn’t enough to create a great amount of visual contrast.

  • The end of the news area of the old school Runescape website is lacking. You can see they are linking their social media or simply just Twitter. I don’t think it’s encouraging or prominent enough for users to actually see and click. How likely are users to scroll down to the end of the website to see the link? unlikely in general. Social media should be at the top or simply more eye-dominant and have a higher ranking in the visual hierarchy.