Art Direction

I have recently published my first ‘Art Directed’ posts on Binary Moon – namely my reviews for the movies Coraline and Up. Ever since I saw Jason Santa Marias art directed site the idea has brewed in my head that I would do something similar, so when I redesigned I kept that wish in the back of my mind so that new designs could be slotted in easily.

What is ‘Art Direction’?

To be perfectly honest I have no idea where the phrase comes from, but I assume it’s some sort of carry over from the print industry. What it means (on the web at least) is taking normal, generic, content; and then giving each page a different, more artistically/ design oriented, layout.

Drawbacks of Art Direction

There are a couple of drawbacks to art directing your websites design. The biggest is simply the amount of extra time it takes to create a blog post. Forget just writing something and pressing publish – you have to come up with an idea, create images, and write new css. As such it’s unlikely I will Are Direct every post, but now that I have done two (three counting this page) there will be many more to come.

Another problem is that the website loses some of its consistency and identity – the user experience becomes more random. Most designers seem to keep the navigation the same across all pages (possibly altering colours) which helps anchor the user and makes the first thing they see as the page loads something they can easily recognise.

How to develop an Art Directed post

For me designing and developing the art directed posts was very quick and painless. I design and develop themes on a dev server which is on a sub domain of one of my sites. I then use a simple Bash script I wrote to copy the files from my dev environment to my live site.

Technically I used a custom field called “css” and then load an extra css file on the post, if the custom field is not empty.

   $css = get_post_meta($post->ID, 'css', true);
    if ($css != '') {
?>
    <link href="<?php echo get_bloginfo('stylesheet_directory'); ?>/styles/<?php echo $css; ?>.css" type="text/css" media="screen" rel="stylesheet" />
<?php
    }

For WordPress users there is plugin that does all this for you (the Art Direction plugin is available from WordPress.org), but since I have the awesome Elemental WordPress theme as my child theme, and since the code was really simple, I didn’t see the need to do anything more complex. One other thing I should point out is that Elemental has built in custom post templates (like WordPress custom page templates, but for posts) which makes hiding the sidebar really easy – you just have to select a different template. Alex Denning recently wrote about a post template plugin that does the same thing but obviously you will need to create the templates to use with it – these also come bundled with Elemental.

Examples of Art Direction in blog design

There are a few blogs I have seen doing this, and it’s something that seems to be growing in popularity. Below are some of my faves.

Gregory Wood – this is by far my favorite example of the style. Each page has a unique design, and they are all wonderfully structured. The navigation across the top of the site pulls everything together. Love the favicon too!

Jason Santa Maria – Jason made the first Art Directed site I had seen – and I was instantly won over by the designs. I had to go back through the archives looking through the different layouts (I’ve actually done that on all of these sites).

David DeSandro – David is a web designer from Virginia, and he has a really nice style about his art directed posts. I like that he often combines JavaScript with the pages to make something truly unique.

Dustin Curtis – Dustin has actually been doing the custom page layout thing for a while, but I’m not convinced he’s using a content management system.

Chris Coyier – Chris is almost as new to art directed posts as I am and like everyone he has taken a different approach. The posts are laid out in a bloggy fashion but the colours and images change every time.

Stainless Vision – I included Stainless Vision because Thomas has gone one step further and styled the blog listings page as well. Each (recent) post on the main blog homepage has a style that relates to the style of the post making his site quite unique.