Design Brief. Personal Blog. D4D Workshop

A brief summary of the business / site goals.

The focus of the blog is to promote myself and my company as an expert developer in iOS and Android. It should help project authority and expertise of the company on the readers of this website.

The key users.

Most likely Android and iOS developers who are searching the web for some programming answers.

Scenarios in which your app or site will be used.

  • From users perspective they would most likely stumble upon the
    website on their search for answers to iOS/Android development

  • I should be able to see visitors stats.

Design style principles to follow.

  • Simplicity
  • Disciplined
  • Consistency
  • Emphasis on the content first

Hey @alexbush this looks good. I’d like to see one more style principle but thats not that important.

Should’ve posted it here.


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 :smiley:

@alexbush these are a great start. The one thing that I would want you to pay attention to is you alignment. How does the main content align with the navigation (Since those are pretty much the only two elements on the page)? Other than that I like the simplicity.

@kylefiedler after speaking with Devon I now know that I’m gonna have the content as a “hero” in my blog.
Yes, there are essentially only 2 elements on the page: 1) main content/post/listing in the center and 2) navbar uptop taking the whole width of the screen