blog design #2

The sketch I posted in the previous part of this series was nothing more than a sketch and should be interpreted in that way: as a sketch. Jotting down, very quickly, some lines & text to SEE (note this word: SEE) is an idea has any potential.

Normally this phase in my design process is very much restricted to my sketchbook and needless to say extremely personal. What you see here is my own way of working on a design (I feel somewhat as an exhibitionist here). By all means: copy what you like, discard what you don’t like.

Anyway: continuing from the last “snapshot”, I added the comment part of the content and toyed around a bit with the different parts of the content. The idea with the “lines with a bend” is to guide the eye to the logo (the green line in the upper lefthand corner) and down the page and to seperate the different parts of the content. I pushed the meta information to the background using grey while pulling the article itself and the comments to the foreground.

blog design step 2

Then I noticed that using the same “lines with a bend” for two different functions in the design wasn’t really a good idea at all. So i decided to drop them as separators of content and use them exclusively as “guides”.

blog design step 3

Which works better, I think. One of the fundamental priciples of typography (or design in general is “break relations in content with whitespace”). I decided to go along with this principle and played around a bit more with the “lines with a bend” guides.

blog design step 4

By flipping the blue line up I removed the righthand boundary of the design and emphasised the left, green guide a bit too much. Around this point I ignored the breaking of relations in content by means of whitespace and decided to use a background color for this purpose. Which brings imbalance and tension to the design.

blog design step 5

In order to correct this situation I had to make this sidestep in the design process.

blog design step 6

At this point we’re a very long way off of the original idea. Time to change the direction back to the original idea. This “fidgeting” with background colors is too cheap.
blog design step 7

There’s still something wrong here. Attention is too much distributed over all of the different parts of the content. I want to emphasise the article, not the metadata. In second place the comments should be a bit more emphasised. I also noticed I had forgotten to add the tagline in the header.

blog design step 8

I moved the meta information to the righthand side of the design, which moved the comment up a bit. No escaping the backgroundcolor for the comments though: the problem you’re facing here is one of “scanability” of the page. By moving the meta information out of the way I was able to create a direct relation between article and comments on the article while retaining the relation between meta data and article.

The use of the background color for the comments improves the scanning potential of the page. The green line around part of the comment area iw a mistake however: again I’m using this graphic element for “separating” content instead of “guiding element”.

I also added the first version of the footer here.

blog design step 9

I was rather happy with the design at this stage. So I refined everything a bit and added some “interaction” details.

blog design step 9

I put separating lines between the different posts, connected the footer to the rest of the design and decided to stop here.

I still have a few doubts with e.g. the title of the article, and of course translating this to a WordPress template will not be easy…

Coming up next:

So what do you think? Picked up something usefull here? Or not? Pray tell.

One thought on “blog design #2”

  1. I find it very interesting to follow your creative process. (Maybe a psychologist student can use this information for a study about creativity? 😉
    I’m all in favour of the result. It looks very Web 2.0, very intuitive. You have my vote!! I also like your technique of “coming up next.” It realy pulls you to the next article.

Leave a Reply

Your email address will not be published. Required fields are marked *