Wireframing and Mock ups

Whilst coming up with ideas for my website I did create many wireframes and mock ups in order to visually imagine how my website will be laid out and look like. Below are a couple examples of wireframes i created for my ideas for the website.

Above is what the homepage would look like with the 4 different chapters as navigation, i added navigation at the top, however i'm not going to be using that. At the top of the page will be the logo and there will be two columns for the navigation boxes below the page, where two boxes will sit per column, so it is laid out nicely.

Here is a mock up above which is more visual of how the main homepage will look like . To the left is the desktop version and the the middle is the tablet version and to the far right is the mobile version of how the main page will look. With the desktop version i'm thinking of using a crack separator for the navigation, but it will be invisible for both the tablet and mobile versions because of limitations with space. 

 Above is an example of the how the content could be laid out through a wire frame of a desktop version and mobile version.  However I realised with a lot of space on the desktop I could potentially have it all on a simple column. Below are some mock ups of how it could visually look.

Here above are examples of how the website could look visually and the layout. To the left i decided for the desktop version that I could add all the content on a single column. For the tablet version i would use two pieces of content per column and for the mobile version i would have one per column to make it easier for the user to understand and follow the content and make it more visually easier for the user to look at the content.