Website Wireframes Overview & TASK for w/c 15th Nov

Website wireframes are commonly a layout stage that is worked-through by the design team who are building a new site after agreeing on site maps. They can represent a number of things as can site maps but primarily show content 'elements' on each page. These are 'chunks' of content or facilities that are required by both the client and users [and would most likely be supplied to you either in an early client meeting or possibly on a written brief if you were to receive one]. As such, they're not typically considered 'design' - more layout of required elements on the page.

To help explain further, please see these two simple wireframe samples related to the University of Worcester corporate website:

1. Homepage sample wireframe [correct as of Nov 2010]:

Click to enlarge.

This is the corporate front end of the UW website. As it's mainly 'sales'-oriented the content tends to be oriented to potential groups of potential students, researchers, business links etc. There is a hierarchy of visual elements - denoted by mainly their size o the page. It has a large visual element on this page which rotates around to show 4 key areas that the University is trying to put across. Second largest is the lower panel about Worcester's building developments. Smaller elements include: Course Finder, University News and Accommodation etc. It has a very clear main navigation bar up towards the top of the page and a very clear corporate identity/logo top left [normally the first thing we see as we read left to right here in the west]. Note especially the 3 column grid used here - grids are very important both in print and web in helping organise a hierarchy of elements on the page.

2. Student homepage wireframe [correct as of Nov 2010]

Click to enlarge.

As you can see, this is a very different break-down of elements on the page as it's a different requirement as it's for existing students [and not a more 'sales'-oriented page as is the University homepage]. Visually it doesn't have [or need] the big visual elements on the page like the homepage has. Instead it's much more 'customer' focussed and answers the needs much more of the users of this page [i.e. you the students] such as: Student News, Learning Support, Life Support and Recreation and Living. Note again that same 3 column grid - even though the page is oriented to a very different audience than the homepage [i.e. a similar base template].


Here's some useful additional reading and resources on webpage wireframes:


1. http://graphicdesign.about.com/od/effectivewebsites/ss/wireframes.htm
2. http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
3. http://www.zurb.com/article/348/website-wireframes

TASK WEEK COMMENCING 15th NOV 2010

Simple Wireframes of Your Chosen Websites

Introduction
Task instead of sessions w/c 15th Nov 2010 as we're bringing both groups together to see the talk/demo from 'Getme.co.uk' on tues 16th Nov @ 10am.

Whichever site [Hurd or Storytelling] that you've decided upon then you'll need to think about how this will translate into wireframes. While every single element on the site's pages [see brief for their titles] isn't final as yet, we can never the less say with some certainty that the following will be on each of the sample pages we want you to look at:


Hurd Library: Homepage
[In no particular order]
• Identity [will this be the existing or one that you agree with the client to design?]
• Rotating slide show.
• Main navigation [see brief for number of links this will be].
• Supporting navigation [will mirror main navigation but is smaller and tucked-away].
• 2x overview paragraphs of text [room for].
• Supporting imagery [imagery of the library and important individuals associated like Bishop Hurd etc?]
• Address and disclaimer
• Other elements as you see fit [you will need to justify these to your group though] 

Hurd Library: Interactive Virtual Tour Page
• Identity
• Main navigation
• Supporting navigation
• Intro paragraph [space for]
• Image section [Flash or similar] for virtual interactive tour [see brief for more details about rooms etc].
• 'How to Use the Virtual Tour' [4 to 5 points summarising it's potential use]
• Address and Disclaimer
• Other elements as you see fit [you will need to justify these to your group though] 

Children's Storytelling: Homepage
[In no particular order]
• Identity [this will need to be a new design of ID associated with the identity of 'Environment'.]
• Rotating slide show.
• Main navigation [see brief for number of links this will be].

• Supporting navigation [will mirror main navigation but is smaller and tucked-away].

• 2x overview paragraphs of text [room for].
• Supporting imagery [imagery of the festival and important individuals associated like storytellers etc?]

• Address and disclaimer
• Other elements as you see fit [you will need to justify these to your group though] 

Children's Storytelling: Interactive Virtual Tour Page• Identity
• Main navigation
• Supporting navigation
• Intro paragraph [space for]
• Image section [Flash or similar] for virtual interactive tour [see brief for more details about rooms and areas covered etc].
• 'How to Use the Virtual Tour' [4 to 5 points summarising it's potential use]
• Address and Disclaimer
• Other elements as you see fit [you will need to justify these to your group though]

Please have your 2x wireframes either worked-up in Illustrator or Photoshop [saved so they can be displayed on screen in session as a .gif image or .jpg image] or neatly penned-out in your layout pads for next full session w/c 22nd Nov.

N.B. You will also be bringing-in your 4x rough concepts in your layout pads in the same session[s] that week [no computer work accepted re these though - all sketches in rough with colour ideas etc].