Design for Web // Design Boards

Here are my initial idea's.  I wanted to create a website that was a bit different from an average website with column structures.  However I was advised not to create any of these pages as I had designed a landing page without really realising.  I still would like to create a page like this as it's more interesting but I found it difficult enough creating a simple structure.



So I then simplified my idea to have the buttons at the top of the page and for the information to appear in two columns like you can see in my Wire frame below.  My main influence to my website was the 'Oh Comely Magazine' site.  It is simple and fresh and is really easy to navigate.

Oh Comely Magazine Website:

The digital mockup below was very helpful for me when creating my website to refer back to for measurements.

Creating the images for my website took me longer than it should have.  Creating rollover images meant that they had to be placed in exactly the same place on the canvas/art board.  I drew the images first, then digitalised them in illustrator and then took them into photoshop to resize them correctly and 'save for web' use.  The photographic images I used are images sourced from pinterest at the beginning of the 'history of' brief.  I drew up some frames to put round the image so they fitted the style of the overall website better.  I was initally going to use lightbox to display my images however I thought that this suited the website better and that I didn't really need more than one image per page.

This is how my final website appears.  You can see when you hover over a button that it fills with its rollover image.