P/R/D - Website development

I was thinking that even though I will get the website coded through someone else, it would be difficult to maintain and add content with multiple pages, ensuring that all links work and so on. I thought it would prove more beneficial for me (and my brother-in-law) to create a one page layout. 

I was inspired mainly by the site created for Build 2012 and others such as Beaver Lab. I wanted to keep the same visual aesthetic as the business card and other branding materials so I initially looked at how I could incorporate the grid / table I used for my contact details within the navigation. 

I started with an orange background which would hold the logo and brief text to give insight into Woodside. I also added contact details towards the top right but as this is one of the pages, I may remove this. 

The navigation links will take the user to the specific area on the site, despite being one page (I think it will simply link to the relevant #div). The navigation will be in the same place on all parts of the site to ensure consistency. 

I used the same content featured on the publication but instead broke it up into 3 different headers in order to break the content down and make it easier for the user to find the relevant information. I used the font I created for the headers and Gotham for the body copy (as in my publication). I decided to alter the spacing however, to create more space. I used a white background to ease reading and positioned this below the 'home' section.

I wanted to break up the content even more so I imported one of the photographs I took (the one used in my publication - though this may change), aswell as the quote from Munro Summers Architects. I looked at different positionings but settled on the centered composition with a black overlay to create more contrast.

I then began to add the portfolio section, using the content previously formulated in the publication and using the same type setting as the 'about' section on the website. Rather than overloading the site with multiple images, I decided to use 'sexyCycle' - a script which creates an image gallery which is controlled through a click. The images can be of varying in sizes which is useful as I have been given portrait and landscape photographs for each project.