Content Comes Before Good Design

King on Chess Board, is Content or Design King

It was suggested a while back on this blog by SitePoint’s own Matthew Magain as to Why The 10 Commandments Of Web Design Are Complete Baloney. In his post Matthew waxed lyrical about how content was realistically not that important to the designing of a web site. To an extent he is right, but he is also wrong—yes, this is another classic case of web design not being black and white. I’m now going to put to you the case for why content is still more important than design.

Now we all know that design and content can mean different things to different people, so let’s start with a few definitions:

  • Design: the final visual interface design, the high-fidelity design for the site, not the interactive design or information architecture design, as these are separate to the final visual design process.
  • Content: this is about having an understanding of the content types and the information that is expected to be delivered. Also to know what information the users are expecting to see from their previous experience. It’s not about having every last morsel of the copy for the site.

Just to be clear, I’m also not discussing the separation of content and design in terms of the developmental process—that’s an entirely different topic.

Design and the Small Site

When we design a small site, we are usually presented with a business direction and some functionality requirements, an idea of the audience, maybe a logo, or previous marketing material (if we are lucky).

These are all good design starting points and sources of inspiration—there usually isn’t much content at this point. The outlining of the site map for the site really just follows the generic “products, about, contacts” structure suited for brochure sites; there is generally nothing unusual that will present any problem here. And even if there is an issue, you can usually just add a high level item to the menu, after some consideration without much of a problem.

The detail of the content that is delivered later on may present a layout issue—for example, suppose you were suddenly presented with a series of short testimonials for insertion into a shopping cart site. However, because you can design the main content area to be very open, genetic and modular, this issue can be easily accommodated for.

In this case, design is more important than the content. But wait—what of larger sites?

Content and the Larger Site

When we consider a larger corporate site, other than the basic design specification information (as I’ve elaborated on above) there is also often a history of previous legacy designs, as well as a large amount of content both online or waiting to go online that needs to be considered. It’s at this point that the sheer volume of information starts to out weigh the design in the overall developmental process. This information becomes the driving force behind the web site, and it is at this point that content becomes king over design.

Ideally we really need to consider the content; I know this often isn’t possible on smaller sites, as demonstrated above. However when it is taken into account I have found that it allows for a considerably more robust design of a site in terms of the positive user experience it delivers.

When I design a site, I really want the design to flow with the content to the point that they become seamless. Sure, in reality that doesn’t always happen—I know I have worked on sites in which I have forced content into a design that just doesn’t suit the topic of the story or the conversation the site is having with the user. When that happens, it’s bad design, and it really needs to stop.

Understanding the content of a site completely before you begin any design allows you to glean a number of design elements that may not be specified, for example:

  • The number of navigational areas that will exist on any given page.
  • The width of the main menu buttons: if the information architecture is not complete, how else can you finalise the structure and labels?
  • Any themes in the content that could be extended into the visual design, by the telling of a story or visual conversation with the user.
  • Requirements for any breakout content such as testimonials, side comments, explanations, definitions or the like.
  • The general length of the page coming from the amount of content that is going to be displayed.
  • The use of new media elements, such as video, screencasts, inline audio players and the like.
  • The length of the content title elements, and if you are going to expect them to wrap. Mind you, you should be allowing for this anyway, as you have no control over the fine details in the future content.
  • The size and style of images: you really need to know if there are going to ever be large images, such as graphs, charts, or maps that often don’t scale well as bitmap images (JPGs, GIFs or PNGs).
  • Allowance for marketing adverts, product links or ad-hoc content.
  • Any other requirements for ad-hoc content, such as news items or emergency response information.

Without knowing any of this information you are just second guessing from your own experience the type of site the client and users really want represented in the design.

For instance, you could specify a minimum and maximum content area width size incorrectly, due to a requirement for the insertion of large maps on a section of the site. In this example, without knowledge of the content, as soon as the client inserts the large maps, they’re likely to suddenly find that the entire visual design breaks.

What of Content Management Solutions?

In the corporate and government sectors it is common to have the majority of the design in place before the content is delivered. This occurs when an enterprise level content management system (CMS) is used within the final solution. These content management systems vary; often only allow a reskinning of the base design template to complete layout customisation. In a way it could be seen that a lot of the design decisions have been made for you with the CMS implementation.

Isn’t this design before content? No — in such a scenario, the content is known, as in most cases the majority of the information architecture will have been finished before the CMS implementation. Having the IA completed means that a good deal of the design considerations will have been dealt with, as the information architecture looks in-depth at the content to design issues.

For any items that have not been covered off by the information architecture, I have often found, in the last few years, that the system design and development team for the CMS vendor have developed such a generic template design for the CMS that most of the design issues have been already taken into account. This will of course vary from platform to platform.

Like it or Not, Design Doesn’t Matter

Of course these points all become moot when you discover that users really don’t care a great deal about the visual user interface elements as long as they can find the content. Getting to the information is their primary goal.

Sure, they have to use the visual interface extensively to get to the information, even if it’s an application. At end of the day, though, they’re only focused on one thing — the content. If the content is poor or unfindable, they will leave, no matter how pretty the site is.

This is why getting the information architecture right is so important; it’s also why content is king.

Image Attribution: Mark Coggins

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Hendry Lee

    I can’t agree more.

    Even text content can help a website owner achieves his purpose, but design without any textual information is good for nothing. But content doesn’t necessarily have to be text…

    It can be images, flash videos, and so on…

    The sole purpose of design is to guide the visitors from one point to another easily so you make them do what you want them to do. Want them to look at your portfolio? Highlight them so they can’t miss them. Portfolio of designs, in this case, is the content.

    Another thing design plays a significant part is to make the first impression better.

  • http://www.magain.com/ mattymcg

    Nice rebuttal Gary. An admirable and comprehensive journey to arrive at this conclusion.

    A couple of points though:

    1) I did recommend at the start of that list to “grab a pinch of salt from the kitchen on your way through.” I’d acknowledged that overall, the original list of 10 commandments was sound, and that I took issue with the term “commandment”, which suggested that this advice was black and white, without any grey. So when I decided I was critiquing the list, I figured I might as well go all out rather than sit on the fence. Hence, the salt.

    2) I did actually suggest in point 7 that YouTube was successful because of the content hosted on the site, not because of the design.

    In summary, the gist of my post was “this stuff is not black and white — it’s a grey area”. This post does a great job of delving into that grey, and I really like the line you’ve drawn between large and small sites. Nice one!

  • http://www.heyraena.com raena

    @HendryLee:

    The sole purpose of design is to guide the visitors from one point to another easily so you make them do what you want them to do.

    Sure, but I hope that doesn’t mean you think purely functional designs are as effective as more decorative ones. Even totally decorative and apparently useless stuff can add to that overall first impression you described.

  • http://manwithnoblog.com tuna

    @raena – yes part of that direction of the users is going to be achieved by the design, from the emotional response to the overall visual design. Yes the decorative aspects have a place, it’s just that after a while, we are talking minutes, the visual design aspect does start to fade as the design becomes part of the learned experience. This is why the use of easter eggs within the design aspects can sometimes re-ignite this emotional response to the site. These easter eggs can sometimes be just a subtle thematic element that is revealed for example in a transaction. As expected this varies with the site audience and core function.

  • http://www.tabloidinternet.com TabloidInternet

    I agree with your title of this post. Content first, design will follow on the next. I used this way for my blog. Anda now my blogsite got PR4 from Google in less than 3 months. My first Alexa is about 3,000,000 when I start this blog, now was in 1,007,690

  • http://www.ciudadesmayas.com elviajero

    There is a lot to say about this, but at the end we have to admit people FIND our sites via Search Engine results, where content is king.

  • Slackr

    It ammuses me that this is an either-or argument. It should be a both-and. Content is ALWAYS presented in some form of design. The effort put into this design can help or hinder the content.

    Personally websites I like to visit that contain good content can skimp on their design and get away with much more than a good looking website with nothing under the hood.

    Ultimately design and content are entwined and we are looking for the synergy between them to be cohesive and additive in nature, not devisive and detracting for the user.

    Good luck trying to seperate Design and Content from each other. If it comes down to assigning percentages on which is ‘king’ I’m really not that interested. If it comes down to semantics about ‘commandments’ let’s just agree that it’s a colourful world (wide web) out there and not just black and white.

  • Possage

    I think there is a balance to be stuck. Yes you need content but it depends on the nature of your site. A fashion site needs design almost over content, if its a politics blog then the reverse is true.

    Web Design London

  • arcee

    This debate sounds an awful lot like one we have been hearing for more than 100 years, only the terms have changed from form to design, and from function to content. The argument over the relative importance of each continues to rage, but most architects and industrial designers accept the principal that form follows function. Wouldn’t that imply that the content should dictate the design of a Web site?

    I think that Mr. Barber’s comments are “spot-on.”

  • http://blogbuildingu.com/ Hendry Lee

    @raena, decorative design is fine as long as it adds value instead of just another distraction. Giving an impact on first impression is adding value. Overdone, it becomes distraction. I’m talking about e-commerce and lead generating sites.

    Decorative design has its place outside of those sites.

  • http://www.600host.net 600Host

    Content is certaintly the king! its knowledge the backbone to life.
    But a key factor you must take into consideration is that your content must be unique copying and pasting is not going to help your site in the long term. Write information in your own words can be great help.

    Robert

  • http://www.hunting-story.info pancevac

    Everything depends on what are you looking for.
    But I am for unique and quality content, more than design.
    If you have good design you get no rankings on google but if you have good and unique content it is one thing less for good rankings on SE.

  • Web Design

    Yes true you need to have good content on certain sites but sites like photography, fashion etc you obviously need good quality images. I’m personally ascetic person not saying that you don’t need content, but visually striking site helps.

    Web Design Northampton Logo Designer

  • Laurens

    Content is always more important, but design does not have to suffer from that!

    Just take a look at these great webdesigns from Belgium: http://www.tndmedia.nl/blog/webdesign/445/49-beautiful-webdesigns-made-in-belgium/

    What do you think about that?

  • http://www.leapgo.com LeapGo

    I love this article. I can’t tell you how many websites I’ve been on that have obviously been put together in Word or Frontpage and yet I’ve spend hours reading the great information. Then on the other hand, I’ve been to sites that try to wow me and all it does is get in the way of the information. A perfect site is designed to help present the information.