Which Comes First: Web Site Design or Content?

When you work on putting together your web site is it best to start with content or design?

It’s a bit of a chicken or the egg conundrum. You really should not work on one entirely before the second.

Here are two scenarios we’ve worked around and let me say, they are not ideal.

1. Working the design around a finished content document

There have a been a couple of cases where a client hands me a finished Word doc to start a web site with and announces grandly: “I’ve got the content nearly finished for you.” On the one hand, it’s great that they’ve been thinking about the content of their web site.

Unfortunately, if you write web site text as one long text document, you are misunderstanding how most of your visitors will proceed through your site. Most people who write a long content document like this expect visitors to start on the home page, read top to bottom, then proceed page-by-page thoroughly reading each.

Your web site is not a book with a defined start and end.

Many web viewers may not start on your home page. Wherever they start, I can bet you they won’t read all of your text (especially if it’s long). They will skim text and skip around to different pages.

2. Designing without content (it doesn’t work)

On the other end of the spectrum, we’ve done some preliminary web design when we have little or no content. We place in the obligatory Lorem Ipsum Greeked type and hope that the final content fits well.

Honestly, we don’t even work on projects like that anymore. We can’t design without a sense of the content.

Content and design working together builds the best web sites

The amount of content will drive the navigation.

If you only expect to have a handful of pages on your web site, you can have one horizontal navigational bar with a header for each page. These types of sites are ubiquitous.

However, if you realize that you will have more than about 8 pages, you’re probably going to group those pages so that you have sub-pages within a category. This leads to different navigational treatments such as drop-down menus, sub-menu lists or sub-menu bars, etc.

Content should be more than words

Often, the best way to explain something is not with long, narrative text. We all know the expression: “A picture is worth a thousand words.” Photography, illustrations, charts and videos are just a few ways to convey a message without written words.

Many people rely on words because that is the form they know how to produce. But your web designer (or photographer, videographer, etc.) can help you convey a message more clearly and more memorably using alternatives.

Mesh your web design with other grapics

The framework of your web design should always mesh with the visuals. Details about the color, typography, size etc. all need to be considered with how these non-text elements work with the design. The cohesiveness between the web site design and the placed graphics are the details that make your site look professional.

Conveying your message with design and content

Your message gets conveyed most effectively when design and content work together. Content and message are sometimes used interchangeable, but I think after reading about these possible scenarios you have a better understanding about the difference between message and content.

In my recent post about what to expect when you hire a web design firm I outlined the 5 steps we take on most of our web site design and development projects. Making decisions about how to best convey the messages you need to express, are handled at step one of the process. The final development of all the pieces—the finalized web design, the development of final text, and the creation of non-text content all take place once these goals are determined upfront.

I put together some examples of some recent work we completed where the design and content really worked together to effectively communicate the key messages on a web site. Please read: Message-Driven Web Design to see examples from the recently launched RelaxAmerica.com

Photo credits: Chicken by barryskeates. Egg by Steve A. Johson.