Website Update

I've finally completed my portfolio site... however i use complete loosely as i know i will change aspects and add to it between now and the final deadline.

As can be seen with the above design i developed the concept from the one day project to form the main heading image and background. The heading sets a theme and colour style for the site with the white clouds on the two shades of blue which expand out. 

Initially a problem i had with this was that the white of the cloud and the edge of the rays cut out with little fade, as shown in the concept image below: 

As seen it blocks off on the edges. This was amended with a gradient fill and the blue background colour being overlayed all sides on all layers, and rubbed out below the cloud so not to be doubled up on the left side of the background. 

Once the background was finished i created the individual white background boxes in photoshop and placed them within the CSS for each individual division. Initially these were just plain white. However as i developed the site further i found that it was better to make them with the header text such as "Blog" for the blog section, which allowed use of the same gill sans text that i used in the header. 

I added link boxes on the lower right side of the home page and portfolio pages. 

I created all of them in twitter using renders of the blogger and twitter logo, and the mail app for iPhone logo.  These boxes provide a direct link to my twitter and blogger page, aswell as a direct mail link which activates any mail app on a computer. 

The idea for these boxes deveoped after seeing the partner boxes on YouTube where paid members of the site are able to use a box image to link to an external site. Example given below from the user channel Charlieissocoollike

When i saw these i thought of them as a simple way to link external sites rather than just putting a plain list link and flooding the home page with text.

Idea and Mock up

Over the past week i've found myself working on and off with various ideas for layouts. The ideas have evolved from what i came up with on the one day project to the the following:

I wanted to keep the same header style and background theme so worked more on the box layout, in this case i made it more curved, around edges with a straight cornered cut down the right side splitting two columns with a small gap. 

The main section is intended to hold the blog. The section next to it will hold an about me and all of the link contact boxes i intend to make within photoshop. 

Following the sketch up, and finally deciding that i was content with an idea i moved onto making a mock up in photoshop, which can be seen below:

I intend to now push on with this design and develop it into dreamweaver. The title for the header will be developed as a separate overlay, however i may play around with attaching it to the background.