Art Direction

Categories

Web Design, WordPress

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

Unfortunately, as of 2023, none of the examples on here work. All of the websites have been changed but I have left the post up for posterity.

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.

Website Screenshot

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!


Website Screenshot

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


Website Screenshot

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.


Website Screenshot

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.


Website Screenshot

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.


Website Screenshot

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.

Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).

Link to this page

Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.

WordPress News

The latest WordPress updates from the WPBriefs Podcast.

Related Posts

30 Jun 2007

WordPress tips and tricks – Custom Page Templates

Some time ago I posted the first of my tips and tricks for WordPress, and I thought it was about time I posted some more so, to start things off, here is a short tutorial on custom page templates in...
19 Jun 2023

Modern Art Direction: Making Your Website Stand Out

I love art directed websites. There’s something about the way people use beautiful design to make engaging content that always draws me in. But, let’s be honest, art directing your own site is a lot of work. The thought of...
30 Mar 2010

10 WordPress query_posts tips you probably don’t know

I have written a really brief query_post tutorial before, and it did quite well, but both WordPress and my own skills, have advanced considerably since then. So I thought it would be interesting to revisit the query_posts command and see...
13 Mar 2018

WordPress: The Difference Between is_home and is_front_page

When making WordPress themes there’s 2 functions that are really handy. is_home and is_front_page. I use them all the time in both themes and plugins. But I can never remember the difference between them.is_home vs is_front_pageOn the surface they are...
28 Aug 2009

Binary Moon WordPress design vIII

As I briefly mentioned on Monday, I have finally redesigned Binary Moon.I actually started redesigning about 2 years ago. Initially it was going to be an update rather than a totally new look, and I even built most of it,...
25 Jul 2007

WordPress Tips and Tricks – Custom Login Page

It’s cool to have the WordPress login page customized to fit your own website branding. This is even more significant for multi author blogs, or sites you have set up for clients as it adds that little extra something.Since writing...