Content is Design King

fig 1:

I recently began to understand a trend in my impression of website design. I would regularly cross paths with a design I felt looked great, but the next day it would have lost its freshness.

If the copy was the main source of delight, this mattered very little. As long as the initial impression is good, that's fine. The writing will keep you coming back.

But still, design can do more than offer a good impression. When it's done well it will really support, even enhance, the content.

When I stumbled upon Garrett Dimon's site after he implemented his new design something started to click. His design, a major inspiration for Humte.com, blew me away. It looked like a book! Then I read his thoughts on his design and it got me thinking...

Today I came across another rare example of design that looked like print. A Brief Message's tag line is: 'features design opinions expressed in short form—200 words or less,' but I think it is the art direction that accompanies it that makes it remarkable. Nothing is boxed in and the images interact with the text by flowing in and out of it. Most importantly it is individually tailored for each piece of content. It's the kind of design we see in print all the time, but it's rarely seen on the web (fig 2).

fig 2: Web design inspired by print design. It takes more work to art direct a page, but it's totally worth it.

What I find particularly interesting is if you take away the main content, the design would look quite bland. It would look fine, but it wouldn't stop you in your tracks. It's like the frame for a painting. The frame on it is nice, but nothing special. But put in the content and everything changes.

So many beautiful web designs focus heavily on the frame, so every page looks the same.

Focusing on content design, makes every page fresh and unique.

There are problems with this design method.

• One of these is time (though personally I like to be forced to spend a little time tweaking a post as it makes me think about a topic a little more deeply.
• Another is expertise. You probably need to hire a layout artist to get this right, and they are going to have to tweak the CSS for individual pages to make their vision a reality.


fig 3: When a reader resizes the text (one of the beauties of web design over print) they mess up the design. But if this were print, the reader's only choice is magnifying glass.
• Finally we lose some of the flexibility of a page, such as the ability to resize text. I like the compromise that A Brief Message has taken though. It's optimised for a certain screen and text size, but it is still flexible enough to accommodate those flexed conditions. Look at the image right (fig 3). The larger text may start covering up the image and upset the design, but in print you wouldn't even have this option.

Says site developer Khoi Vinh:

It’s a nontrivial amount of work to design something unique for every article, but that’s what we’re aiming to do here — and hopefully with brilliant, evocative illustrations every time, too.

[...]

In a way, this is a kind of wager that this kind of design can be done online. I’ll concede right out of the gate, though, that while it will aim to be pretty, it may be frequently ugly. If you peek under the hood from time to time, I’m sure you’ll find some semantically improper or just plain goofy code, and cross-browser consistency will not always be exemplary. It’s going to be a learning process, so your forbearance will be greatly appreciated.

It's a good idea to stretch the boundaries of a technology I think. Set the vision then build the tools to make it easier and cleaner under the hood.

Go read A Brief Message