Josdigital 3: Shiller

shiller

Design is a very important factor to differentiate yourself from millions of other generics nowadays, another is to produce quality content and be consistent in writing. Some of which if fail to deliver at times, and will gladly be compensated with a digital makeover. “Quality of Design is an indicator of Credibility” is said, you know.

One of my new years resolutions was a much needed redesign of this blog. After more than 2 years with version 2, I’ve gotten pretty tiresome of the whole theme based around one header image (let’s be real here).
So I finally rolled up my sleeves, applied some elbow grease and got to the painstaken process. After a few months of trial and error code writing, photoshop painting and lots of coffee, I’m pleased to say this digital make-over is very much a fact.

For completeness sake and distinctiveness its codename is “Shiller”, named after the magnificent opening track to Ratatat’s LP3. It almost sounds like chiller but not quite. Also seems like an unintentional typo, resulting in a more aesthetically appealing 7 letter word. Listen to the oracle of pretty at the bottom of the page.

“This thing is so new, I’m still playing with the bubblewrap.”

I’m still fine-tuning some code, flipping some switches, working out a few kinks (and all that), but all should be well in a few. Also IE6 needs to die, this site demands a next generation browser.

As you might have noticed I love contrast in imagery and lots of depth in field. Like my previous design I like to bring that forward as much as possible. Whereas version 2 was a light on dark color scheme, this is somewhat the opposite, making it easier to maintain and change the background and color palette, which I plan to do in the future.

I also willingly followed some design trends (web 3.0?) like contrast in font size and the usage of lots of images, mainly to be as functional as possible, which I care to explain further below.

Design

I’m going to do a bit of a write up from the designer point of view, without getting too technical. Mainly because I used to get questions asking about my previous design.

Concept

Version 2 was centered and built around one obtrusive image which lived in the top right corner and has been force-fed to you for the past 2 years, whereas this design drives more focus to the most recent post with a more subtle, but still distinctive header.

Other flaws in my previous design were that I listed all the blogpost content on the homepage, which resulted in a high bounce rate (i’m getting technical here). This just basically means that people visiting my blog came to the homepage and left on that same page, meaning most of them clicked on a link outside my domain or closed that browser tab/window.

Another reason is that visitors couldn’t get a quick overview of what’s on my site. The most important part of a website is what’s being displayed when a visitor first loads a webpage. Designers refer to this as the content “above the fold“. This originated from magazine and newspaper design meaning that before you flip or open a newspaper, that quick glance at the top half is the most crucial. For most people that might just be a few seconds but largely enough to determine if this content might be appealing to them.

One of my requirements was, on a standard resolution browser window, to display part of my most recent blogpost with a big image, part of the following blogpost and a few featured items. After some puzzeling and placing, I’m quite pleased with how it turned out. Another thing, which completely contradicts my intention, is that lots of images attract more visitors, just like a catchy radio tune gets more sales.

Code

I built everything from the ground up with the intention to be the most effortless solution to maintain afterwards (I admit to being quite unproductive at times). I made custom PHP functions, hacked wordpress plugins code and read webdesign blogs. But regardless of all the code I wrote, I do have to give some credit where credit is due. Here’s a rundown of what’s important:

This make-over was long overdue and the results are, for now, exactly what I had in mind. I’m again fully committed to the content, so enjoy it and feel free to contact me at anytime. This rant is now officially done.

MP3: Ratatat – Shiller

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

website | myspace | itunes | amazon

First time visitor? Get the feed.

Leave a Response