Tuesday, 29 October 2013


We started the session by getting into small groups to discuss the two questions regarding website navigation.

What are the common conventions of navigation, what are uncommon conventions?

We started by splitting the question in two and listing the common conventions of navigation;

  • Navigation bar - Links bar.
  • Navigation indicator.
  • Title or logo link.
  • Side bar.
  • Photographic links.
  • Gridded photographic links - Often found on portfolio websites. 
  • Side scroll arrow.
  • Infinite scroll.
  • Drop down menu.
  • Search bar.

Next, we listed the uncommon conventions of navigation;

  • Interactive link - play to navigate. 
  • Random page generation - Stumbleupon.
  • Navigation bar - Placed at bottom of page.
  • Infinite upwards scroll.
  • Multi-directional single page scrolling.
  • Loading menus/pages.
  • Google street view navigation.

After creating our group lists we discussed the different methods of navigation that people had generated. After covering points relating to what makes a websites navigation successful we created a 'Flow diagram' to visually communicate the paths viewers will take when accessing our websites. 

Finally, towards the end of the session we drew out the underlying grid structure of our five examples collected for last weeks task. For each site we had to answer the following question;

How do these structures help/hinder the design of the website?

  • The structure is very simple, focusing the audiences attention on background image and surrounding links.
  • The website is functional and easy to navigate, the links placed at the top of the composition so viewer attention is attracted to them.
  • The page is aesthetically pleasing as there is an effective balance between imagery and links.

  • Again, the structure is very simple and directs viewer focus to the important date.
  • Similar to the first example, this website also places its links across the top of the sites composition. 

  • The structure creates negative space at either side of the websites elements, this focuses viewer attention on the images and information displayed.
  • Furthermore, the structure also centrally places an image browser on the page, this improves the sites functionality as the purpose of the website is to showcase and promote some upmarket villas.
  • Minimal aesthetic reflects the style of villa the site is promoting. 

  • Infinite scroll website.
  • Structure creates negative space that focuses the viewers attention on important page elements, this helps the audience navigate the page improving the sites functionality. 
  • Negative space is key to ensuring the website looks balanced.
  • Colours have been used to help viewers distinguish between pages, this is useful as the website utilizes an infinite scroll feature.

  • Infinite scroll website.
  • Structure helps guide the viewers eye across important page elements, this improves the flow and functionality of the site.
  • Different fonts have been used to attract the viewers attention, this also places importance on the key parts of the text to help communicate the sites message instantly.
  • The minimal aesthetic focuses the viewer attention on design elements such as the logos, type and imagery.

No comments:

Post a Comment