Planning | Website Wireframes

Mobile

Tablet

Desktop

Today I've been working out the order of hierarchy for my website at each different breakpoint. Above are some simple illustrations that show the order in which the different elements will flow. Naturally there will be more elements than this on the page, but this gives a pretty decent overview of the order I intend on using.

I stumbled across a view different issues when I was thinking about where to fix my navigation. I figured it would have to be on the left so that it wasn't in the way of the websites content at much as if it were in the middle. I then thought about applying a hover/ click state to it which would allow it to be out of the users way until they needed it. A site that I referenced earlier in this blog (http://www.fleeangrybear.com/) uses this tactic and it works perfectly for both desktop and tablet breakpoints. When it comes to mobile navigation I will ditch the fixed navigation and have it simply sitting at the top of the page, with a "scroll to top" button in the bottom righthand corner as the navigation is going to be too large for use on most mobile screens.