Student Rough Concept Examples

Roz Port

Click to enlarge

Click to enlarge

Click to enlarge

Click to enlarge

A. What were your main references for inspiration when it came to your rough ideas?

When looking at websites prior to drawing my roughs I was particularly inspired by Beamish (http://www.beamish.org.uk/Home.aspx), a world famous open air museum; and The Old Library (http://www.theoldlibrary.co.uk/flash/), which is in Birmingham. The Beamish website had a good structure and displayed useful content, the Education section in particular. I didn't find The Old Library website as helpful, the loading times for Flash were very off-putting. However this made me think of the problems that I want to avoid. I did like the concept behind the design of the webpage and this inspired me with some of my ideas.

B. Was there a particular idea that you think that you might take forward? If 'yes' then please explain why this is.

I am keen to take my idea to make the webpage like a tree or tapestry forward. The menu may be animated when particular menu buttons are selected and then take you to different areas of the website. I would also use a decorative font and explore different types of paper and binding which I could use for colour and texture. I'd like to do this to represent the age and history of the library.


C. It's still early days in terms of site development but we will start to expect some progress in Dreamweaver in the next few weeks. What issues do you anticipate may be problems at this stage in the game and how do you think you might get around them?

The problems I anticipate at this stage are that I am still learning Dreamweaver and I don't know how to animate with software confidently. Therefore I know that I need to spend more time familiarising myself with the software, through Adobe TV videos, online guides and tutorials in my own time.

Vicky Harris

A. What were your main references for inspiration when it came to your rough ideas?
The Hurd Library, The Old Library, Birmingham and the British Library gave me the most inspiration; I really like the idea of using an ancient manuscript theme, with illuminated decoration. http://www.bl.uk/onlinegallery/virtualbooks/index.html

I also wanted to use various elements of the Hurd Library, (The coat of arms 
stained glass windows, old wooden floors, portraits, plans, and books.
The Old Library, Birmingham also had a really nice flash website, where they used an old book for displaying information, I would like to use something like this for displaying images of the Hurd library. http://www.theoldlibrary.co.uk/flash/oldLibrary/

B. Was there a particular idea that you think that you might take forward? If 'yes' then please explain why this is.
I would like to create an old book with turning pages for one of the multimedia elements; I would also like to use the shape of the stained glass window as a background for the rotating slide show on the homepage or for the virtual tour.

C. It's still early days in terms of site development but we will start to expect some progress in Dreamweaver in the next few weeks. What issues do you anticipate may be problems at this stage in the game and how do you think you might get around them?

I think I will be OK with Dreamweaver as I’ve used it quite a bit before, although I still have a lot to learn.  I think I may have some problems creating the multimedia components I’d like to use.
 

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].

Gdes2000 Example Site Maps - Nov, 2010

Site maps are an important stage in the production process when planning a website. When I used to freelance on a regular basis I used them all the time and they not only acted as a visualisation of the potential site [that was clear to both myself and the client] but also like a visual 'contract' in many ways. These don't replace formal contracts obviously but once the site map is signed-off by your client then you have a clear mandate to work to that structure/size/scope of site [I used to put notes on them too from client meets so that I was aware of all of the refs mentioned from early stages of devt]. Below is a couple of examples of site maps and associated devt/construction thoughts.

Andystevo example: [Click to enlarge]

Click to enlarge.

Roz Port - Andy Stevensons group, Thurs evening

1. I used colour to identify the three levels, Homepage, Main Page and Subpage, and then used the brief as a guide for pages on my site map. I added notes about possible issues I should take into account for my future reference and also begun to generate ideas whilst doing this.

2. Although my site map is incredibly useful for my reference with the notes, I am planning on producing a simplified version, showing the pages planned only, which I would present to the client. As Andy pointed out to me, the site map is an incredibly useful record of your agreement with the client, and I think it will be useful to begin working in this way now.

Click to enlarge.

Creative Ben [Andystevo Group - Thu Eve]

1) I tend to try to maintain simplicity when dealing with any piece of planning the client is going to be viewing,  in this case a site map. 

This method makes it easier for the client to add to, change or amend anything we discuss during the client early meetings by drawing and making notes on a printed a draft site map. 

Once this meeting is over I would then draw up a master version of the site map and make sure that all the changes are confirmed and then this is the version that is signed off and kept on record.

2) A useful area that helps bring simplicity forward is the use of colour coding. 

Keeping the colours relevant to the corporate colours of the client is always a nice touch. 

The colours should also demonstrate a clear division between the multimedia elements, external systems and the various levels of internal pages.

Also, avoid long labels for elements. Try to keep the number of words on the page down when it comes to the actual names of pages etc but try not to abbreviate.

This allows you to set out your site map in an eye-friendly way, making use of whitespace to separate different elements, the more clear and easier to understand you can make the site map appear the better.

Click to enlarge.