Task 5:Layout and Grids (960 grid)

Task 5:Layout and Grids (960 grid)

For this task i was asked to mock up page designs using the 12 column grid from the 960 grid template used to design webpages.This task will enable me to consider and use the 960 grid to create a grid based web design in Photoshop and to create a structure using the 960 grid library.I will take one of the musical themes i have used in the previous examples, and use the musical theme to develop a web page design using the 12 column grid from the 960 grid layout.I will continue to develop the children's website with the 960 12 column grid.

960 Grid Examples

I have looked at examples of the grid based layout on the 960 grid website http://960.gs/ some of the examples include:-

This is Hugh Griffith's webpage design using the 960 grid layout with 12 columns, you can see that each of the components to the webpage fit inside the 12 column grid layout .

This is Gantry Framework's webpage design using the 960 grid layout with 12 columns, as you can see again it is using the 12 column layout but in a different manner still each component fits well inside the 12 columns.

This Screen shot is of Sacramento international airport's webpage layout design which uses a 16 column 960 grid layout instead of a 12 column layout, this may be because it needs to fit more onto the page or it wants its components to be bigger.I looked at this page to see what bigger grid layouts looked like aestetically.

Mock up Sketches

Design Sketches

Final design sketch 

My mock up page design

My 12 column layout grid design:-

The above image is of my own mock up from my webpages 960 grid 12 column layout design, as you can see it resembles that of the other webpage grid layouts i have looked at as each component fits neatly into the 12 column grid layout.I made this 960 grid 12 column layout  webpage design on photoshop by adding each component onto the grid layout then manipulating them to fit within the grid, i think after doing this it looks aesthetically pleasing.

My CSS Trail 

Click here to view the 'Childrens music Grid system' layout

As you can see i have made a HTML version of the grid system applied to my webpage, one thing that has changed from my design mock up is the size of the giraffe because i had to fit it into the grid layout of columns 12.I also did not include a working button bar because this was just a trial run of the CSS principles which would be applied to my webpage.Also i changed the design of the header image and made the misspelling more prominent by placing it backwards therefore showing that it is a play on the title as most children cant spell properly because they are still learning.

Task 4: Navigation Menu Bar Design

Task 4-Navigation Menu Bar Design

Research behind the button bars:-

I have looked at different button bars on various websites, I have found that the button bar is usually placed below the website title, this is probably so that it is easy for a user to find, also the button bar is sometimes stylised to suit the page.some of the designs i looked at were very complicated with search bars and tools, i thought that those desighns wouold be too complicated for a design on a childerens website which is obviasly going to be used by mostly childeren, therefore i will be going for a simple design.

This is a button bar that i have print screened from the hobby craft website , as you can see it is a very innovative design which allows you to select a button from one of the tabs which have been made to look like some kind of filing system. this image of a navigation bar was taken directly from :- www.hobbycraft.co.uk

The first image is an example of a button bar / navigation bar which takes up the side view of the page, it has a different layout position from other button bars that i have researched.the second example only uses images as its buttons in the navigation bar,i believe that this could cause some problems in deciding where they would navigate you to therefore it is too simple.these images of navigation bars were taken from :- http://www.awwwards.com/31-examples-of-icons-in-navegation-menus.html

I would like my button bar to be friendly and easy to use and find, this is because i am designing it for the childerens music website that i designed earlier.I will try to design it around the HTML page that i designed so that it fits in with the webpage.

Making my button bar:

To make my button bar i created the first layer of the button bar , which will be the object you see first, i then created a second button bar with different colour writing , this was to be the rollover button so that when you went to click on the buttons on the button bar each would change colour so you knew which one you were about to click on.

I then proceeded to place it into my webpage in dreamweaver which you can see in the screen shot below:-

In this screenshot you can see my work in the dreamweaver stage , as you cans see i have used CSS and HTML code to place the button bar into my webpage.

My button bar:-

Click here to view the button bar

Click here to view the webpage including the button bar