Design for web//'A history of...' design

Here is the Y-Frame for a potential website design. The website is going to be 1024 x 769 pixels. The y-frame is based upon the scamp below. 

To measure out certain areas of the web page, in Photoshop, the sizes of columns, borders and boxes were experimented with to see how the layout would look. 

Using illustrator, a grid was set as the background to attempt to layout grid based on the y-frame. It is centred around three colours so it's equally divided by the width of the page (1024px) including a border.

Using the type from the original 'History of' project, a grid made up of subject areas was created. For now, the border was taken away just as their may not be enough space with it. Therefore, with all the content it make look overcrowded and ruin the aesthetics. 

The illustrations from the project were then inserted in the same place as their matching type description. The idea is that when you come to the homepage the type images will appear and as you roll over each of these images, the matching subject illustration will appear. A title was also put in on the type right hand corner. 

The layout was getting a bit overcrowded so it was decided to centre the type images/illustrations on the web page so they are more a focal point. The title was taken away and the bottom pattern and shape was copied and mirrored to be placed on the top, creating a sort of border. 

The same was then done with the type images. 

To see what the web page would look like, the grid was taken away and the boxes surrounding the images. The layout of the image still look like they are in a grid set up with makes the aesthetics clear and legible. 

Here is another Y-frame based on a different scamp. It is much more simplistic and not as much imagery involved. Once again it is the same height and widths as the previous Y-frame. 

On Illustrator, a gird was set as the background to make sure images are placed in correctly. Using the same pattern as before, this has been inserted as a separator between where the title/content will go and the page links. 

The page links were then placed at the top. The width of the page (1024 px) was divided by six as that is how many subject areas there are going to be. 

The content will go where the 'Istanbul' title is on each subject, therefore it is the same layout on each page. An additional patterned border is added at the bottom of the page to give an illusion that the content will be in a constricted area.