1. Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation
Layout is about where we position content and navigation on each of our web pages.
How a web site or web page is organised is very important – if content is disorganised people will not think much of the site and go looking elsewhere – so planning what we want a web page or web site to look like is important and as such we should take time planning.
Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation

2. Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation
Snow Patrols Home web site – look at the colour scheme (matches their image i.e. they are dressed in black)
Whats the first thing you notice? Band image? The largest part of site and most colourful
Look at the Navigation bar – links to other pages – some ideas for your own here
Sample of bands song to listen too – main aspect of band is their music
Latest news shown – ie tour
An interesting page and its using some bland colours (black and white)
Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation

3. News Live dates Music Photos Band Shop Mobile Contact
Homepage
Animation
Photo of band
Recent news stories
Upcoming gigs
Sign up to mailing list
News
News articles
Live dates
Upcoming gigs with dates and venues
Music
Video clips
Audio clips
List of albums and singles (discography)
Photos
Links to photo galleries
Band
Biography
Band tour diary (blog)
This is the content found on the site
Look at each page – these are the links from the navigation bar on the home web page
Shop
List of T-shirts etc. for sale
Mobile
Downloadable ring- tones and tunes
Contact
Information on how to contact the band
Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation

4. The Shivers web page layout
The Shivers web page layout
Another example of a band web page – The shivers
All pages in the site have the same basic layout
What do you notice first? Maybe not so much of an impact as previous band
Very simple colour scheme – clear navigation bar at the top again
Just showing samples of the their songs to list to – well organised?
Different links at the bottom of the page – did you notice these?
Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation

5. The Shivers web page layout The Shivers web page layout
The Shivers web page layout
The Shivers web page layout
The Shivers web page layout shown schematically – this means each page looks the same except the content which appears in the centre box
The navigation bar stays the same.
Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation

6. The Kooks web page layout
The Kooks web page layout
Another example band web page.
What do you notice first?
The navigation is now on the left-hand side.
Is this as effective as Snow Patrol – why?
Very simple colour scheme again – lots of free space – why? – is this effective?
Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation

7. The Kooks web page layout
Band name
Band member
link
Band member
link
Band member
link
Band member
link
Text
Picture
Menu
Advert for
new album
The Kooks web page layout shown schematically.
Is this effective?
Media player
Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation

8. Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation
The Articulated Monks
Blah blah blah …
Page 1
Image
Page 2
Page 3
Page 4
Image
How are you going to get your web pages to look like?
Think about what parts from the previous band examples you liked and use them now you are going to design yours
Page 5
Page 6
Media player
Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation