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.
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”.
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.
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.
In order to correct this situation I had to make this sidestep in the design process.
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.
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.
I was rather happy with the design at this stage. So I refined everything a bit and added some “interaction” details.
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:
- a C.R.A.P. analyisis of the design
- the design for the home- and other pages
- S.W.O.T. analysis of the design
So what do you think? Picked up something usefull here? Or not? Pray tell.