A Design Presence: Website Mockup

I firstly began by looking at a few websites that I like the layout of, and I feel that are close to what I would like my own website to look like, below are a few...

http://constructlondon.com

I like the larger image and the small one with the text I think that it is leading and can show off work appropriately, I also like the white space around it makes the work stand out.

http://sociodesign.co.uk

This website has a similar sort of aesthetic, except this one the image spans the screen and one image is the focal point, however the logo is two letters similar to my own that I designed, I think there is a good hierarchy in this website, of work, logo and then the navigation.

http://designspiration.net

I like this website for its grid layout, I think it shows of work well, however it contains more links than I would have on my website, and I think it is busier looking than the two sites above.

Anyway I began designing my website, I chose one focal image, and I added my logo, I felt that it was a good start but it was perhaps too boring, it didn't quite look like a webpage. 

I tried filling out the space which would look better if the colour was the background of the image, but it isn't and so it doesn't look very good, I need to start taking images of my work from further back so that I have the space around, and I need to start photographing my work properly. 

And so not really liking the layout above, I tried a similar grid layout to designspiration but I felt it was too similar and I did not like the big white space in the top right.

And so following a more similar layout to construct, I had one larger image, and a smaller image from the same project, I feel that this would show of the work better, and I also had a small description which could act as a link which the user could click on and be taken to more information and images of each project.

I had also changed the navigation bar, it was now right aligned and met the outer margin. The grid on this design is more concise, and the design has benefited from this structure. 

However I did think that the navigation buttons where still a bit plain, and so I experimented with lines, like boxes...

I also noticed my other colour of my identity wasn't present on my website and so I felt that it needed to be and so I changed the lines to the green colour. 

I also tried a central layout... 

In the design above I felt that the lines where a bit over complicated and so I deleted the top ones and left the bottom as an almost underline, this worked better.

I changed my design back to a left aligned layout as it actually matched by identity better e.g. letterhead, invoice and creative cv. It also balanced the white space more evenly.

I decided that by website would be a continuous scroll and to show this I added more work to the bottom of the page, I felt that it would be continuous to repeat the same as above, and so you can only see two top parts of an image.

I did not like this layout however I felt it was two repetitive, and so I changed to one larger image right to left ( same size as the first large image) and the text now at the left, this would work so there'd be two image and text then text and one large image, so on so forth. 

After designing my homepage, I decided to mock up how my site would look on screen

iPad

I changed the layout to a slightly simpler version, with no type, this would below when you scrolled.

iPhone

As it would be on the iPhone.