OUGD505 - Website - Layout, Images, Design, Coding

Basic Wireframe

This is the basic layout of the website how I wanted it to look. There are three basic sections splitting the website vertically.

The top section (1) included the logo, links tab and moving slideshow. This will say consistent through every single page.

The middle section (2) contains the black speech box over the right hand side containing information about the Festival dates and this will also stay consistent through every page. The left hand side of the second section and the bottom section (3) will be a container for changeable information for every page.

Layout

I designed the layout of the website just in photoshop as I could use the different sliced up sections as images and then just add body copy over the sections that needed it. My layout was fairly simple. I opted for the bright pink to be dominant, just like in the rest of the physical printed branding. The images also relate to this colour scheme and the combination of black and white type.

This is for the home page. The grey box is where my slideshow images will be inserted and you can start to see the elements how they will actually look as oppose to the wireframe.

The 'read more' buttons will be clickable and take you to the about page, and the empty sections will be filled with bodycopy. The images will be sliced and coded together.

I added various other elements into the different pages and these will be used in combination of images and type.

Coding

The Coding wasn't too difficult, even though I forgot how to do a lot of things initially, I quickly remembered after some playing around. As I used the exact same layout throughout, and was using lots of images sliced up, It was a lot easier to make every page, once the first had been created.

Javascript Slideshow

As you can see from this bit of code here. This is the Title of the website just underneath inside the head, then the first bit of called javascript. This is something I found online and is a simple slideshow banner. I created every image I wanted to use in photoshop under the exact size I created the banner of '900px x 250px'. I then added the list of images underneath the javascript to make this work.

Links (rollover images)

This bit of coding relates to my links at the top of every page. I had to included these as images too because I wanted the rollover effect when hovering and I also wanted to use my chosen typeface relating to the brand 'Avenire Lt Std'. The coding shows the right aligned placement and the different images uploaded for rollover.

Text Boxes & Buttons