Tuesday, 29 October 2013


In today's session we looked at further principles of designing for web. At first we looked at common and uncommon conventions of navigation systems and grids/underlying structure.

At first we gathered ourselves in groups and discussed the navigational systems of websites.

1. What are the common conventions of navigation?

1. Web Links - Underlined, Coloured Text, Symbols.
2. Navigation Bar - How you 'walk through the web page'. This is usually on the top or left of page)
3. Roll Overs - Clicking on a logo/image directing you back to the homepage/other specific page.
4. Infinite or Constant Scroll
5. Side Bars
6. Photographic Block Grid Links (PBGL - photographic links, blogs, behance etc)
7. Home Button/Logo
8. 'Bread Crumbs' - Links to articles and other sites.
9. Live Feeds - Images, Videos, News, etc
10. Drop Down Menu (Content Dependant)
11. Search Bar
12. User-Orientated Content Delivery (Content changes due to user preferences or recently viewed etc. For example, Youtube. 
13. Navigational links to social networking sites
14. Menu/Links at top and bottom of page if there is much content in between can be easier for the user to navigate.
15. Sign in/Log in Screen
16. Specific Search Options for User

2. What are the uncommon conventions of navigation? 

1. Interactive Elements
2. Random Search Button (Stumble Upon, Ted Daily etc) - the content is dependant on random navigation
3. Navigation bar on the right/bottom of page.
4. Holding Page/Landing Page - usually more relevant to moving image, loading time, internet speed - is this relevant to the target audience?
5. Infinite up-scroll
6. Google Street View Used to show the inside of a room etc specific to the website. For example, studios and schools use this to have a 'walk around view'
7. Eye Motion/3D View
8. Voice
9. Multi-Directional single page scrolling (all content in one place)
10. Dynamic Content Scrolling

I have been able to look at the navigational features of common and uncommon conventions. I found that many generic websites feature standard web systems such as search bar, navigation bar, home/logos etc. The unconventional systems of navigation were much harder to come up with. I was surprised conventions such as voice and eye motion/3d view came up and was interested to learn about new web features.

For the 2nd part of this session, individually we were deconstructed the 5 websites I chose to analyse in this session, considering the underlying grid structures.

Digital versions of these can be shown below, whilst hand rendered versions can be seen within my submission files for this specific module and brief. 

1. 'Gold' was website of the day when I researched websites of aesthetic interest. To gain an accurate understanding of the underlying grid structure, I used rulers to ensure that the grids were analysed properly. The top half of the homepage, where the navigational system is on the top right hand page shows an unconventional method used. This half of the page is split into regular horizontal lines. On the latter half, the horizontal lines double in size between each one. There are also common features of web design and navigation such as social networking links and logo, as well as interactive, responsive layout.

2. Grid London, use a minimal grid structure throughout. The only use of grid structure is with the drop-down navigation bar at the top. This drops-down when the logo is 'touched' with a cursor. 

 3a. Offset Festival is a Graphic Design related festival which targets young professionals and students. The image shown above shows two parts of their homepage which is a continuous scrolling screen therefore features different grids. There is no navigation system at the top of the screen, each different part of the website fits in live blocks on the page showing imagery and information using rollovers on images as shown above (mid-right). This is an unconventional feature which allows the user to have more interactivity. This grid is different to the previous 2 shown in terms of grid structure. 

3b. The image above shows the third part of Offsets website. It shows different news related articles, which are made up of a repetitive grid structure. The whole website is very linear, clean and makes use of block images and blog/portfolio style layouts/aesthetics.

4. Let's Go Rally, is a highly responsive and interactive website. The website is spread across 3 pages, which are accessed via the arrows on either side of the headline. (All pages are shown one after the other above). At the top of the screen is a navigation bar, but below is a headline, which features the same grid structure for each page. This is a 4x13 grid, which below sits imagery and body copy which also follows this grid.

5. Bitique is an online design blog/portfolio which follows a 10x10 landscape grid structure. The website follows a block structure which is stringently adhered too.

Each layout and grid structure which has been looked at has been entirely different to one another, however each different layout and grid follows its own rules and conventions, many of which are rather unconventional for web design.

For the 3rd part of the session we were asked to begin to look more into our own navigation maps/flow diagram, working out a basic structure for our own websites.

An image of my navigational map is shown below:

From this, I would like to build and develop ideas for each page showing the grid structure and how the content and navigation system would fit a design. I also would like to research into more detail aesthetic and interactive/responsive features which I could use.

No comments:

Post a Comment