Ok, here it is. All 3 are sketches for the same design just in different states. I really would like to emphasize the content of my blog and want to add a couple of neat on hover/scroll animations.
The first sketch shows the index page for the blog with a small navbar on top(it suppose to have a “cloud” look :D) Main content(excerpts list) has some borders on the sides and the user can see the navbar itself and a small block on the right with tags and categories, etc.
Second sketch shows the same page(now when I think of it probably should be post show page) but the content doesn’t have borders and tags/categories block is gone too. I was thinking to do a fading animation of borders and the block when the user isn’t moving his/her mouse… assumption is that they stopped for a while to read and want to remove maximum of distraction from the main content by fading unnecessary stuff out.
Third sketch is again the same page(index or show for the blog) but in this case not only content borders and tags are faded out but also the nav bar is “collapsed up” in a way that it has only the logo left(the “cloudy” thing on the top left. it should have different color/image than before) and a small line of text telling the user what it is(this is a so and so blog, thanks for stopping by, blah, blah, blah). This 3rd state would be triggered on scroll down(and broad back to the previous state by scrolling up and hovering on the nav bar area and/or the logo). To get a better idea think about Chrome and Safari on iPhone - when you scroll down on a page it animates out the top url bar letting you see the content without any distractions. And when you scroll back/up it shows it again. So I want something similar 