Design for Web

After the web session and having my scamps crited i then started to create thumbnails of different layouts i could do for both my home page and then for the different pages, from that i then started to create larger more detailed scamps which i then scanned in and created on in-design.


More detailed scamps of my website plus thumbnails for layouts for pages. 

Layout for pages with the nav bar on the left.

For the individual pages i feel like the two circled thumbnails are the best and the layout would work well with what i want to display.

Layout for pages with the nav bar at the bottom

Hompage thumbnails

I think the 2 circled images are the best for the hompage because they are simple and work well with the pages that i have drawn. They may need to have an explanation below the ring so the homepage isnt pointless and it gives an insight to the website.

I think these thumbnails show the simple nature i wanted to portray in my website. 


I then drew more detailed scamps with a template i made on indesign and printed off. 

The image above shows how the website will look when the person first views it, with the nav bar on the left having small illustrations inside them and when the mouse is moved over them it reveals the name of what that page is. I may also put the ring around the name or title.

This what it looks like when one of the pages on the left is pressed, the rectangle on the right falls down and the small black dots are subheadings that are pressed and a small amount of information is revealed, by pressing the down arrow the pages can then be moved between, the title then stays there the whole time and is fixed. 



I then created the scamps on indesign. 


I firstly created this hompage that was how i drew one of the sheets above with the nav bar on the bottom, i feel this doesnt work as well with the nav bar on the left, when a person comes to the website they will automatically look to the left 

I then created the scamp shown above of my favorite design, i also used a grid so i could line up everything so it was in a well organised way.

Below is the homepage without the grids on it, as can be seen it is very simple and doesn't bombard the person visiting the website with information. 

I then using the scamps for the pages created this layout below of one of the pages. Again i used a grid to lay it all out, it gives the viewer something very easy to look at and the colums all work together with the rest of the page.

 

This is the page without the grids on it, i will change the images that are at the bottom right of this layout.