Wireframes

For my wireframes I looked at and thought a lot about websites that use big background images I wanted to do something a little bit differently to the examples I looked at. Instead of just stoping the image or fading it by using a wrapper I wanted to build around the background image. I experimented a little with different images and layouts and finally found one that I thought showed of the background image really well.   

This is the wireframe for how I want the site to look at desktop the white space being the big background image. As I said I wanted to build around it and show it off as much as possible. The navigation goes on the top of the page with the logo's coming in off of the right hand side. Then again on the left I am going to have a text box and a gallery in a two column layout. With the footer at the bottom. The gallery will be links to the other pages and the colours will fit with the background image and I will play around with there opacity to see what looks right. 





At tablet the layout is pretty much the same the elements of the page come closer together leaving less space for the image to show. Another reason to use some sort of opacity change on the content and logo's etc. 


Finally on mobile the navigation will split into two rows of two so everything fits nicely and the logo will sit directly under these. The content will go to a single column layout for the gallery and the text box will fill the screen making it easier to read.