Visual Communications – Assignment 3 – 2 Double Page Layouts


I Started by researching a range of magazine from Fashion to Cars just to get some examples of how I could map out my double pages.


I don’t know what the magazine is called but I like how the image is on the left and side and then theirs a big outstanding sub header and then the text sitting bellow it in blocks, abit like my road map below:



Visual Communication : Assignment 3 – Double Page Layout Research


After my initial research on the front cover of my magazine i have come to a conclusion on how it is going to look like, so i have furthered my research to the 2 double page spreads i will have to do for the assignment.

So i got on the net and found these pictures showing a couple of layouts that i feel work with great effect :




I like the way how the picture is portrayed on the left hand side, this is a way i will consider and design in this stage.


Second Design (Best one)

Here is my second design and i think my best design. Here i have been looking at various websites on the web for inspiration, and i have mocked up this one which i think its going to be my main design. This index page will have a bit of everything on like Jquery, some text boxes. Also i have decided that i will have the global navigation in header because as you can see from the other design, it looks more stylish for the navigation to be in the header because the user will automatically know where the nav bar will be when they open the page. Unlike having the nav bar on the left, right or on the bottom. Also to make a point none of these two designs have a nav bar on the right because if the user happens to minimize the page it will cut the nav bar off and that will not happen in my web pages. This is my final design because i didn’t really have any more designs to give to Information Architecture so Kevin said that it was alright to stick with 2 if i couldn’t think of 3.


Final Idea (Site Map)


Following on from my final idea, i have produced a site map that is my final template on which my website navigation will be based on.


Index –  This will be the main page with all the links to other pages and basically introducting you into the website

History- This will display all the vital history of Liverpool Football Club

Timeline- Will display a timeline in javascript that will also show the history of Liverpool Football Club but show it in a more visual display, so the user will interact with the page more.

Gallery- Will show pictures via javascript of the History of Liverpool Football Club.

About Us- Details of website, admin and even maybe a contact form for feedback for the website

More to Follow……

First Design Drawings


In the photos below i have sketched a couple of designs that i may consider for my final design for my website.

First Photo Shows that the navigation bar will be below the header, and the content will be in the middle with space for adverts or tags etc on the side.

Image of Navigation Bar Close up

First Drawing with all detail

In this second set of images this was my other design. This one has the same header but i have changed the navigation bar from below the header to the side. The reason for this is that it Free’s up the top and gives the user faster navigation for example the user can see what content is without scrolling down because it will show up at the side of the nav bar.

Second Design Sketch

Side Navigation of the Second Sketch

My First Site Map


The Image below will show the first site map i have created for my project website that i am currently working. As the Site is still only being planned out this site map might change.

This site map shows how the back-end of the layout will be based on. The index page will be centralised as you can see with all the other pages being easy accessible on the page but as the user changes pages he can still navigate back to the index and all other pages related to the website.

First Site Map