Scamps

As I had completed some designs, I believe it was time to create some scamps to mock up and understand where everything will be positioned on my website, the scamps will allow an easy design when taking the measurements to dreamweaver. 

I designed all 5 pages and then mocked them up on illustrator to see how the designs would work on screen.

This was the template I used, as all the parts surrounding the content in the middle stay the same on each page, so I used this to easily create the template and make sure that each page had the same measurements for the surrounding content.  This includes the logo, and the navigation bar. I like the way the design almost frames the content so this will work as a website. 

After producing these scamps I created these designs in illustrator and mocked them up using the actual sizes.

This shows all my testing and experiments in illustrator to mock up the actual layout of the website and how it will run, I worked with illustrator to produce this on screen design as the website will be viewed online I wanted to view it on screen as it would be viewed when visiting the website. 

In addition, The artboards made to be the same size as on screen placements so I am able to take the specific locations of items on the artboard and transfer them over into coding to make it easier and quicker when applying the code.