Making blog: Intro, wireframes & design


I have been on and off blogging on this address for some time, mostly it was off. And I think it is time restart blogging. First of all I want to announce that I will blog every Monday starting today and may be some Thursdays too. On Mondays I will blog mostly about Web. Which means that for next couple of weeks I will publish posts about redesigning my own blog. At the end of this series will be a documented process from wireframes through design and static HTML code to WordPress theme.


This website is only a blog therefor I wireframed three most important pages: front page, post and search page. With this attitude I am probably shooting myself into my leg but this is my regular attitude, thinking in big picture first and finalizing details later.

First wireframe I made is front page. It contains header space, menu and footer which are common for all pages. Front page has three specific features. Most dominant one is an excerpt from Featured article which takes whole width of the page.

Below the excerpt are sidebar on the right side and blog excerpts of older posts on left side.

Front page wireframe

The second one is a post wireframe which is composed of post block and sidebar block keeping the same theme as on front page.

post wireframe

To compose search page I used post page as template. It contains simple search form and results are list of titles of posts.

Search wireframe


Previous designs I did for this blog were more skeuomorphic. But this time I am thinking about something more minimalistic and definitely not skeuomorphic. As an example is one of previous prototypes.

Old Blog on a paper prototype
Old Blog on a paper prototype

Here are six pages of my new planned design:

404 page archive front-page post quote search

This is all for this Monday. Criticism is welcome.