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

Unit 8.2_Lesson 2_CD Resource 2c_Structure and layout presentation http://www.snowpatrol.com/ 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

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

The Shivers web page layout http://www.theshivers.co.uk/index.html 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

The Shivers web page layout The Shivers web page layout http://www.theshivers.co.uk/index.html 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

The Kooks web page layout http://www.thekooks.co.uk/ 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

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

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