Think content first, then get the web designers in

by Sonja Jefferson on October 7, 2008

If you’re thinking about designing or redesigning your company website, it’s tempting to focus on how it should look to impress your customers. Design is important, but if you concentrate on colour schemes before content you run the risk of creating a great looking site that customers either have no use for or cannot use.

Most business web projects I hear of go something like this:

  1. We want a fantastic looking website that really impresses our customers.
  2. Let’s find a web design agency to help us design and build the new site.
  3. We’ve decided on the design we like from the 3 concepts they presented.
  4. (Oh – now we’ve got to write the content for each page – that’s hard).
  5. Finally, our new site is up; people are saying it looks good, but we’re not really seeing the benefit in terms of good leads.

This strategy prioritises form over function, aesthetics over information. It’s an easy trap to fall into. Design agencies can dazzle you with the importance of ‘messaging style’, ‘corporate identity’ and ‘brand personality’. ‘It’s all in the design,’ they say. But this design-led approach fails to consider how and why people buy your services and what customers want from a professional business website.

“With a few exceptions, people visit the web for its utility, not its beauty. Having a visually appealing site is good, of course, but content is golden,” says web usability guru Jakob Nielsen

Before you pick up the phone to a web designer, think very carefully about what you and your customers want from your site; what does it need to say to convince them to buy your services and how should this content be laid out?


Build a ‘wireframe’

A good way to get this clear is to create a ‘wireframe’ for your website. Wireframing is a powerful web planning strategy that helps you construct a successful business website.

“‘Wireframing’ takes its name from the skeletal wire structures that underlie any type of sculpture. Without this foundation, there is no support for the fleshing-out that creates the finished masterpiece.”

Here’s the process:

  1. First work out what you want to accomplish with your website.
  2. Ask your customers what they want from their visits to your site.
  3. Identify what each part of the site needs to do and what it needs to  say to respond to your customers’ requirements.
  4. Build your ‘wireframe’: this is a non-graphical layout of each page of your site. It enables you to organise the content and test the layout before you start building the site.

If you wireframe first, before a single graphic is chosen or line of code written, you have a far greater chance of web success, for you and your customers, and you’ll avoid expensive and time-consuming revisions at a later date.


If you’re thinking about investing in a new business website, place content at the heart of your project. First think what you and your customers want from your site. The colour scheme can wait.

Further reading:

Bookmark and Share

{ 10 comments… read them below or add one }

Kate Strange October 8, 2008 at 6:49 pm

Sonja, I couldn’t agree more.
On too many occasions I have found myself trying to develop effective marketing campaigns using a badly designed website as a major part of the communication – Sometimes you can feel that however great the product or the stuff you’re writing is, you may aswell not bother because the structure of the site is such that navigating to it is just too difficult, confusing or time consuming for the visitor.
Thanks for link, its always interesting reading your articles!
K

Dick Willis October 8, 2008 at 8:06 pm

Absolutely right. Function first, then sort out the design. Make sure the dog wags the tail not the other way round

D

Iain Claridge October 9, 2008 at 12:38 pm

There is a lot of truth in what you say.

37 signals have a good article on this subject with some interesting comments on the subject of style over substance in web and user interface design – http://www.37signals.com/svn/posts/642-ask-37signals-do-i-need-a-designer-to-make-pretty

Iain Claridge October 9, 2008 at 12:45 pm

Oh… and you mention the Barbarian Group website – a great example of a big web agency that ‘gets it’… well here is another – http://method.com – lots of good content intelligently presented with just enough technical wizardry to help the flow of information.

Caroline Nisson October 12, 2008 at 10:22 am

.. want to know more – might just be the way!

Jim O'Connor August 2, 2011 at 12:01 pm

Totally agree. In my experience, most people design the site then ask me to “back fill” it with words. I can do it, but it’s not the smart way to approach things.

Mark O'Brien August 2, 2011 at 4:50 pm

I completely agree on the idea of form following function. At Newfangled, we’ve found that including the visual designers in the function conversations has a very positive impact on the project. Also, when wireframing, I highly recommend creating web-based, fully clickable, grayscale wireframes that mimic the intended web functionality as closely as possible, as opposed to trying to describe web architecture through paper-medium derivative platforms such as paper itself, PDFs, spreadsheets, excel, or powerpoint.

Sonja Jefferson August 2, 2011 at 5:11 pm

Thanks Mark. I had a feeling you might agree having nodded enthusiastically when reading the ‘Don’t Lead With Design’ section in your brilliant ‘A Website That Works’ book. Your web-based wireframing sound good. Is there a tool you’d recommend for this?

Chris Holleman August 2, 2011 at 5:17 pm

I couldn’t agree more. As a visual designer, we have to be patient and let the messaging of the brand drive the process. Establishing the form of the site in the beginning will never hinder the design. We can always design a beautiful site. Change the way your clients think of their website. We’re not designing a website. We’re designing your content.

Sonja Jefferson August 2, 2011 at 5:31 pm

I like your style Chris! It’s a shame more visual people don’t think like that.

Leave a Comment

Previous post:

Next post: