Skip to content

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.

http://gregorywood.co.uk/journal/surviving-the-inevitable-z-apocalypse

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!


http://jasonsantamaria.com

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).


http://desandro.com/articles/nclusion

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.


http://dustincurtis.com/you_should_follow_me_on_twitter.html

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.


http://chriscoyier.net/2009/10/29/10-years-of-simutronics

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.


http://www.stainlessvision.com/blog

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.

Share

17 Comments »

    • Noels plugin is pretty cool. I did consider using it here but decided the functionality was probably more than I needed for something that I could do quite easily myself.

  1. Your way does seem a bit better than my option, although arguably an easier way (although would result in slower loading times) to do it would to be to add the CSS through a custom field inline after the stylesheet loads and so overwrite styles in the stylesheet – if that makes sense :)

    • I did consider using inline styles but I like the idea of keeping the styles and the content separate. Another bonus of using external style sheets is that I can reuse styles in the future. Not great for the movie reviews but for a post series it would be quite helpful I think.

  2. Thanks for the mention. I’m also keeping everything to the site’s flexible grid layout (read: it scales with your browser) which makes this tricky.

    Take a look at Trent Walton’s site http://trentwalton.com/articles/ he has a much better approach to the post teasers than me :)

    For the record I’m just piling extra styles into my main CSS file for each post. There is a post-id class on each post’s container which allows me to target the styles.

    • Thanks for the comments Tom – and thanks for the pointer to Trents site. That looks really nice.

      Regarding the body class thing, I actually do that as well, but I chose to split things out separately to stop the site from growing too large. I think it would be harder for the sections that have more than one post on a page though

  3. Pingback: Content is King | Gilbert Pellegrom
  4. Great post! I liked the term that you gave for it, Art Direction.

    BTW, thank for leaving a comment on the Design Informer. I will add your site to the list when I get the chance. Keep up the great work!

  5. Well you can “Art Directing” is good for blogs that have different people for different roles ,as you mentioned its highly time consuming and at times could take even longer then it for you to write and format the post.I prefer doing this for some of my pages only (ex- Contact,portfolio,about,and some others).
    BTW you have sweet writing skills.

  6. It’s nice to see someone taking time over their blog. This world’s become too easy and sometimes it’s nice to place the occasional hurdle in your own way to raise the standard. A nice concept.

    Cheers

    Col :-)

  7. Hey there, I think your site might be having browser compatibility issues.
    When I look at your blog in Safari, it looks fine but when opening in Internet Explorer, it
    has some overlapping. I just wanted to give you a quick
    heads up! Other then that, fantastic blog!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

I seem to find myself working with Youtubes thumbnail images quite a lot (for instance on Miniclips videos section) – and I am always having to go searching for the parameters to use to generate those thumbnail images. So I […]