Mock-up

Having created a scale model of my site idea, as a wire-frame. I was able to take that and start building a mock-up of how I imagined the site to look once it was complete.

I used Photoshop to add to my previously drawn guides.

Shown above: The first mock-up, using lorem ipsum as textual padding.

As you can see, I've already incorporated a logo, which was developed in my sketchbook, bar the two black and white boxes to the right, which I shall explain in my next post. The navigation is self-explanatory in the fact that it's simply horizontal and separate from the content. This seems to be a trend across small, informational websites that have less than double-digit pages.