Initial Layout

A flat of what the final page design will look like:


The Design:
As mentioned in the last post, I wanted to give the website a rustic, vintage feel. Like you had discovered it in the shed out the back, all browned with age but still pretty to look at.

The background photo was one I took earlier in the year of Lake George, overlayed with a paper texture and using a vintage sunburst pattern in the headder to enhance the colours of the background. The main body uses a repeating paper pattern so that it blends seamlessly.

The site is designed within the confines of a centred 960px wide page however the top and bottom background layers extend to 2000px before fading into the paper texture to account for larger screen sizes.

The header and navigation are again inspired by woodpress labels and posters designed to integrate with the background layers and building the colour scheme:

White: #fffae5
Black: #111111
Russet red: #75220e

Note that pure black and pure white are not used. They are too harsh and would kill the softened look of the site. Even the forms use the off white colour.

The image beneath the navigation and the header introduces the page and will change depending on which section of the site the user is visiting. This is particularly functional on the Location Pages (used for the placement of a Google map) or the artist pages, which will show a large image each performer.

There are three columns within the main wrapper. The left hand column (200 px) is reserved on the home page for twitter updates or as a column for sub-navigation on other pages.

The centre column (480px) is reserved for the main content.

The right column (280 px) is a Woodpress inspired shortcut menu. Many festival websites use shortcut menus for the most frequently visted links on their site. This is also where I will be placing the search bar.

The site only uses two/possibly three main fonts:

Verdana for text
Georgia for certain headers
League Gothic (a font licensed for @font-face use) for main headers.

At the moment, I don't know what size the text and line spacing will be, I'll have to test out what looks best in-browser.

All links, on mouse over, will be underlined to make them more noticeable to users and differentiate them from other emphasised text. In text links will be bold and russet red to make them stand out.

All images used will either be mine, those used on the original website or artists performing at the show.

Web Design Project quick links:
Post 1: Country and/or Western - Project Choice
Post 2: Inspirational Bits and Bobs - Research and Inspiration
Post 3: Initial Layout - Website Flat Graphic
Post 4: Now Showing - Website Link
Post 5: The Making Of - The Making of the Site