1. Web Design
  2. General

Art Directed Posts: Blogging, with Style

Scroll to top
Read Time: 6 min

Ever picked up and read Time Magazine or Wired before? You have? Then you'll be familiar with the fact that each magazine article features its own unique layout, formatting and graphic design that tailor beautifully to the content. Brilliant, right? Not only does this deliver an article's message insightfully, but also gives the reader an aside to look at.

If you're at all familiar with what I'm talking about, then you should know that this kind of style is also present on the web. Blogazines (an uncomfortable term) bring magazine-styled articles to traditional blogs on the web. This theming of posts on a blog (also known as the popularized, often-misused term, art direction) gives each article its own look, unlike the average single-themed layout for articles most blogs have today.

Not only does it make a blog look unique (and sometimes even, the talk of the community for a while), it also gives an article's writer a chance to design and play with the content— or even practice and sharpen the skills of complementing a design (the delivery) with its context (the article's message).

Jason Santa MariaJason Santa MariaJason Santa Maria

Magazine-styled blog posts like Jason Santa Maria's have been floating around the web for quite a while now. Although there are relatively few on par with it, it's never too late to start.

Art Direction, with Style

Now that you have your hands ready to start designing each of your individual blog posts, you should know that the main purpose of the blogazine is not just to 'customize and color' a post, but to deliver a meaning through art.

"Magazines don’t set out to simply decorate stories individually. Their goal is to combine visual imagery and language to enhance the story’s meaning." — Dan Mall, Art Direction and Design on A List Apart.

As the term is misused by many (embarrassingly, myself included) the meaning behind the phrase, art direction, dissipates and unfortunately, becomes misunderstood. Art direction, is simply the practice of strategically enhancing a meaning behind something. In this context, art direction is not design (as Dan Mall says) neither is it just the term for customizing a blog post's look, but intensifying the message behind it, through design.

Trent WaltonTrent WaltonTrent Walton

Trent Walton's art-directed blog post called 'Where to Start' shows not just beautiful design, but well-thought meaning behind its design. In fact, all of Trent's articles display similar individuality and attention to detail.

While designing the look of your blog posts, it's always paramount for them to actually make sense. A bespoke design should improve the way you think by linking logic (its art direction) with instinct (its design). And it should satisfy your gut feeling.

Moreover on the topic of quality, customizing every single blog post is a matter of hard work. Unless you're running a team of art directors and visual designers behind a blog, you shouldn't be forced to theme every single post. It's quality over quantity, and that should be a priority.

Recognize this? It's Smashing Magazine.

Coding, with Style

Apart from improving your design intuition, blogazine designing also improves the way you work with code, or CSS in general. Because you're essentially working over and overriding a design you've built before (unless you're making a new theme from scratch, implementing art direction) the way you work with code will become much more efficient.

As I've learnt from my own blog, it's handy to use efficient selectors, optimize HTML and make it work under certain scenarios. Given enough practice, you should even be able to make your art direction change responsively, and adapt to almost any given screen size.

This could be seen as a downside, however. In order to carry out bespoke design work for individual posts, you do need to know your way around front-end designing and coding.

You'll also have to make sure you're doing it well. Be sure that your repeat visitors know who they're dealing with and that the strength of your online presence isn't weakened as a result of your playing around.

That said, you're a designer, so flexing your design muscles in the public arena is always going to pay dividends if done properly.

Making it Work, with Style

While most of you reading this already have the know-how to start working on an art-directed blogazine post right now, there are also a few of you still wondering how to get started with all this. There are a few ways to implement this on your current blog, and the examples I've listed below should suit almost any blogging scenario.

Working With WordPress

Art Direction Plugin on WordPressArt Direction Plugin on WordPressArt Direction Plugin on WordPress

The most popularized content management system of all, WordPress, has support for plugins which make it easy to implement customizable blog posts right away. A plugin called 'Art Direction' (lo and behold) gives your blog per-post styles, making it easy to override HTML elements within an article. In fact, it's also the same one Trent Walton uses for his personal weblog.

Working With Tumblr (or any non-plugin platform)

Code SnippetCode SnippetCode Snippet

I use Tumblr for my personal weblog. In spite of its wonderfully easy-to-use design and service, the platform doesn't offer support for the installation of advanced plugins.

Saying that, the service does offer the option to customise HTML and CSS in the form of custom blog themes. If you're at all familiar with HTML, then building a theme with Tumblr's theme syntax should be relatively easy. To implement art direction, all it takes is a simple block of javascript to insert CSS dynamically within a post's article page.

<!-- the separate body tag wrapped in Tumblr Syntax... -->
<!-- ...makes sure the code works *only* on the post permalink page -->
{block:permalinkpage}<body onload="art();">{/block:permalinkpage}
<!-- and the original body tag here -->
<!-- finally, when writing posts, insert this code snippet in the Tumblr post editor for each post -->
<script type="text/javascript">
function art() {
var css = ' #your-css-here { color: #000; }';
if ('\v' == 'v') {
    document.createStyleSheet().cssText = css;
else {
    var style = document.createElement('STYLE');
    style.type = 'text/css';
    style.innerHTML = css;

If you're using any other service that works with custom theming, then the above code should work as well with a few alterations.

Bring-Your-Own Platform

Anchor CMSAnchor CMSAnchor CMS

Of course, blog publishing isn't limited to just the popularized Content Management Systems, as there are a handful out there that work just as fine as any of the above mentioned. In fact, some might even offer full support for art direction and implementation. Anchor CMS, (designed by Visual Idiot) being one of them is a publishing platform centering on full art direction implementation. It's also incredibly well-designed.

A Conclusion, with Style

Now that you're all set, designing and art-directing your blog posts should be a great way to sharpen your code design skills, whilst honing your design intuition.

So get started- and get blogging, with style.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.