There is a fancy wave of minimalism sweeping over the internet at the moment. It’s based on an idea that instead of littering pages with menus and banners and widgets and the like, we leave only the essential to be displayed. Off with all the crap and in with the stuff people are actually viewing.

Of course any purists would take this fad to the extreme and remove content as well (check out perdu.com, purple.com or tired.com for a couple of great examples), but instead of going all fundamentalist on the idea, I figured it would be more appropriate to view the whole process as a balance between form and function with a central focus on content. To figure out where that balance was, I let myself inspire by a couple of interesting blogs and articles

I first met drastically minimalistic web design on the blog of James Bennet, who in an interesting article writes about his own process minimizing the contents of his site. He has one point I find very relevant when doing minimalistic design:

“[...] it’s important to recognize that minimalism for minimalism’s sake is just dumb. Like any other design tool, it should be a means to an end”.

From his article I browsed to Ryan Tomaykos blog which has been designed from similar principles, but with the added ado of integrating the administration on the actual page. An idea I really like, but can’t be bothered to follow since Wordpress takes good care of that for me.

The last of my inspirations is Mark Pilgrim who have done a similar design, but with the extra feature of making the achieves page one simple listing of all pages, which I find is a really interesting example of avoiding complexity.

From their example I have been going through my own page, throwing the unnecessary away and trying to incorporating the rest with the content. While doing so, I realized that there are certain shortcomings of the end result I’m not entirely satisfied with. It seems to me that while the three blogs are giving content it’s deserved focus, the designers end condensing everything else away, resulting in a very compact design.

I don’t read minimalism as ‘compact’. Traditionally the act of printing on page was very focused on condensing while maintaining readability because of the physical limitations of the paper being written on. On the internet, this isn’t relevant any more. Sure, you still have to design a page to fit within the width of a normal screen, but height-wise there isn’t any compelling reason to minimize the page. In fact vertical whitespace is a very effective mean of separating content.

Another gripe I had after studying the three sites, was that they all looked alike. Of course there are minor differences, but when only the content is left, how do you actually know what page you are reading?

With this in mind I sat down to figure out where I wanted to go with my own design, and where my personal balance between minimalism and functionality lies. Functionality wise I pretty much agree with other minimalistic blogs before me, and integrated the necessary stuff from the sidebar into the content page while throwing most of it out. Design wise the decision was a lot tougher, because I love nifty design, and it seems to me that most other minimalistic sites sacrificed a lot of design to achieve their goal. Instead of doing that, I wanted to create a design that supports the content without getting in the way, while still looking good and providing an individual touch to the visual aspects of the site.

The straightforward way to achieve this without splattering the page with graphical elements was to use typography as a design element, as can be seen in the header of each page. The header is designed to fit in with the page, serving a functional purpose as a navigation tool (in the archives and category sections) as well as giving the page a distinct look and feel.

In a perfect world, I would have rendered the entire page in pure text, using standard fonts and specifying all measurements in a point-dependent format to create a true resolution independent site, but alas I wouldn’t work out like that because of a weird bug in Firefox that makes letters larger than around 130pt behave odd and floating left. Instead I resorted to generate images of text, while feeling very ashamed.

All in all the end result is what you are looking at. To me this feels like a good balance betwee content and design. Of course it’s just a first iteration with details being corrected every time I get a new idea I have to try out. So I’m open for suggestions I you have a comment or suggestion to further enhance the result and maximize the minimalism.