You Are Reading

OUGD504: Design Production - Design For Web Workshop 3

Today we had our third studio session for the web brief. The first part of the session had us working in small groups and collectively coming up with a list of answers to a series of questions. We were asked to identify what common and uncommon conventions of navigation were.



My group said:

Common -
  • Scrolling
  • Links to other pages
  • Menu Bar
  • Drop down menu
  • Search bar
  • Homepage
  • Nav bar at the top or left hand side
  • Social media links
  • Auto updates intuitive to user
  • Breadcrumbs*
  • Navigation indication
*Breadcrumbs - Other links to pages which are not included in navigation bar (sub-categories)

Uncommon -
  • Holding/Landing pages
  • Navigation bar at the bottom or at the right hand side
  • Type to search (designspiration)
  • Eye tracker (Samsung)
  • 3D View
  • All content in one place (one page)
  • Dynamic content (refresh by scrolling)
Compiling these lists was not as simple as we might have thought. It was clear that there were quite a few overlapping features of conventions and some which might have transferred from different categories. After we had come up with these lists we shared them with the whole group and added to our lists. It was very clear that most other groups had had the same problems as us and found it difficult to identify the conventions. With some help from Loraine and Phil we were able to improve our lists and gain some understanding of the conventions.

We came up some questions as a whole group and explored into one of them:

How do we know it is navigation?
  • Underlined - some links are underlined which helps people to identify that it is a link
  • Colour - can change for links (blue is usually a link)
  • Content indicators
  • Writing the word underneath
After this task we were asked to create a flow diagram which illustrated the different pages we were going to have on our website. This task was not as useful as I had hoped because we had completed it in a previous session. In the previous session I created a flow diagram for my website and found it quite difficult to decipher which pages I should include. 

Before I carried out this task I created a mind map about what my target audience need to know.



After I had looked at this quite broadly I tried to whittle it down and make it more directed at my target audience. As I am targeting Graphic Designers some of my research becomes quite redundant and unimportant. For example, I have looked into the history of the tube and how it was built and who by, graphic designers do not necessarily need to know any of this information and probably wouldn't click on the link to learn about it. 

I had 4 pages which were quite solid:

  • Homepage
  • History (timeline of the map)
  • Harry Beck (designer)
  • The design of the map
I was stuck on my fifth page option. When talking to Phil I asked if I could just produce a 4 page website, he said that it would be better if I made a 5 page site because it is an odd number and would be more interesting in terms of grid systems. I went back to brainstorming and came up with another page which would apply to my target audience. 
  • The typeface
Though this is quite off topic it is perfectly suited to the target audience I have chosen. There could be an argument that it could be merged together with the design of the map into one category; Design. This would work well but could be too much information for the audience to get their heads around.


4 pages


5 pages


To conclude the session we were asked to look at the 5 website examples we were asked to bring in and identify the different grid systems which were used and draw them on top of the print out. 

INSERT PICS







Comments for this entry

Leave your comment

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.