Case study: porcupine colors

The latest redesign of this blog was a massive one. Each designer’s approach must serve certain needs. So let’s analyse this work the proper way.

Problems of the previous design

(for those who don’t remember here is a screenshot:)

• Moody colors (1)
  The purpose of these colors was to provide a grunge look of the website, but it didn’t. Despite the fact I still like the combination of the colors the specific layout includes huge empty areas which makes the whole design somewhat pathetic and cold.
• The main navigation area is not prominent (2)
  The navigation should not be (almost) hidden. At the same time this design practically doesn’t permit the positioning of the menu somewhere else. We should make the life of our visitors easy, shouldn’t we.
• Not good enough typography (3)
  The white thin lines on the top and the bottom of a post are an interesting design element but they prison the text. I always got the feeling that I couldn’t play with the typography of the main area of the blog.
• Too much empty space (4)
  Scrolling down was boring. There was nothing interesting in this. The whole design of the blog may seem appealing but when adding the previously mentioned issues all this empty space became a problem.

So I wanted to change.

The new design (based on the Hemingway theme) seemed promising. Here is a screenshot of the original Hemingway theme:

Comparing the original Hemingway with this realigned theme there are three main differences.

• The post area is white instead of black (1)
  I didn’t want a truly dark theme. It just isn’t me. Furthermore I didn’t want the visitors read on a black background because this is generally not a good practice (OK Veerle’s amazing blog is an exception). I also wanted to give an impression “lights are on”. By using the specific orange, green and blue colors I think I made it. Notice that the green and the blue do not very well on white background but the orange does! So I used the orange for some of the headings too.
• Space for navigation (2)
  The search bar was moved underneath the categories at the first column so I had abundant space to place the main navigation exactly where I wanted. (One more link, the Work area, is yet to be added there). Now the menu is obvious without sacrificing the design of the blog.
• Interesting closing (3)
  This theme gives me the opportunity to add content at the bottom of the screen. Just as Derek Powazec says: Embrace your bottom! As you can see there is enough space to add navigating options (Recent Posts and Categories) and other important elements (Links, Flickr photos, favorite books and music).

Other design issues

• No need for images.
  You see? There are no images in this layout design. I like it this way and not only because the page is downloaded easily. In this layout you can add design elements but you can’t remove any. The page is divided into three distinct areas which act harmonically one to the others.
• No serif typography.
  I love serifs but in this case there was no way to use e.g. Georgia. The absence of images and the three parallelograms impose me to use sans-serifs (in this case Verdana).

Overall I like the final result. Since I cannot design something absolutely original for me (I have the most difficult time when I design for myself) this work seems to be quite satisfying for the time being. But then who knows? I may start over tomorrow.