Once i’d sorted out the making of the home page, I had to start constructing the project type and specific project pages. Using the PSDs I was provided with, I decided that both pages would be constructed a the same page, with differing content. The pages consist of a left sidebar containing titles, headings and information relating to whatever was held on the page, a footer containing navigation to other pages in the website, and an area on the right in which to display the work or relevant page content

design pg2

To begin with, I simply created two divisions on the page – aptly named ‘left’ and ‘right’.  I coloured these in red and blue for visual benefit, as they hold no content currently and it was a good contrast to be able to see the proportions and dimensions of the divs. The background is not the background I plan to use for these pages.

basic div construction pg2

 

Navigational structure was left up to me. I thought that the navigation used on the home page was pretty much what I wanted to see on these pages, and as long as it fits it was worth plugging into this page as something to work with for the time being. I repeated the code used on the home page, translating it to the right hand div in the footer, along with links to the other pages. I’ve also added two headers in the left, and an area for information which like in the design, is made to scroll if there is excessive information. I’ve simply used lorem ipsum to fill this gap.

basic page construction pg2

The image below shows how i’ve tidied up the  footer to allow the links to project pages to fit in. I’ve also set the right hand content div to have white borders which like the red and blue left and right divs, is being used so that I know the constraints and dimensions of the div whilst i’m working in and around it.  I’ve also made sure that the left hand div lines up with the right.

less basic page construction pg2

Underneath the information, I’ve added the three hero images from the home page as featured links on these pages as well. I’ve also downloaded the websafe version of Bebas Neue – the font being used for the title banner on the home page. I’ve assigned this font to the h! headers, as well as the h2 headers. This is the primary font in this design and will be used as the headline font on every page. Finally, I set the font to white on everything, as the black background is best contrasted with the colour that stands out on it the most.

even less basic page construction pg2

Now I have created the page itself, I can begin translating content into it, by plugging in some jquery sliders – I will research a few good ones if I cannot find one exactly to the specifications of the PSD, and will go through these with my client to see if he likes any of the alternatives.

Advertisements