Content driven web design

Web design, in a basic sense, is the process of creating the web pages that make up a website. These pages display information (content) that can be found and accessed by web users through the internet. Many visual elements of web design are the same as those involved in other areas of design that are not web-related; these include things such as layout, colour, graphics and fonts.

Content is another, one of the most important, elements of web design. It consists of the text, images and multimedia (the actual information) of a particular web page. Collectively these elements make up the content inventory.

There are two main processes that can be used to design a web page. One of these is a design-first process; this means the web page is designed before the content has been written and assembled. Filler text, such as ‘Lorem Ipsum’, is used instead of the content so the designers can accurately visualise (to some extent) what the web page will look like once the content has been provided. This is a useful way to design if content is not ready but deadlines for pushing the site live need to be met.

However, this process has its flaws. Although the design may look perfect, it can easily overlook small but important issues, such as headlines that span multiple lines, the layout of a page that is too short or similarly too long. It can also cause a number of problems when using web development tools and site builders such as Dreamweaver, in which the design view does not show what the live website will actually look like. Because of this, these problems may not be found until the site is ready to be pushed live or already has been.

The other design process is content-driven web design. This is the opposite of the design-first process, as it is built around content that has already been written and edited. This process also has some potential problems; the content needs to be created before the website can be built, which can delay the construction of the site. Another common problem is trying to build a website around content that is out of date. This halts the design and building process until the content has been updated. If time restraints mean this is not possible and the site is published with out of date information, the reliability, credibility and opportunities to optimize your site are vastly reduced.

Despite these drawbacks, a “content is king” approach to site designing will ultimately be easier, most probably cheaper and definitely produce a more attractive website at the end of the process than focusing on design first. Although the design-first approach can produce professional and interesting websites, they will never be as efficient or impressive as a site orientated around the content.

Benefits of content-driven web design

  • Websites are built around information (requiring the information to high quality), instead of just eye-catching designs and visuals.
  • It encourages traffic to website through good SEO linking, because of the quality of information (
  • Beneficial for branding – the design enhances and creatively displays information about the brand, not the other way round!
  • It prevents tedious and potentially time-consuming corrections having to be made to the website design.
  • Content-driven design is particularly important when considering mobile access – limited screen space means the design may have to change to successfully give the mobile user all the information provided on the site. This can’t be done easily if the visual design is already fixed in place.
  • Knowing the content of the site often causes the designer to make important decisions that otherwise may be overlooked. This has many benefits, such as allowing the tone to be kept uniform and the layout to be appropriate for the associated content.
  • This also applies for visual elements such as image use, colours etc – deciding on these based on the content ensure that everything perfectly highlights the information on the site, instead of being distracting or irrelevant.
  • Different audiences read content in different ways – some people may skim read and enjoy disjointed and unstructured content to keep engaged. Other people may struggle to do this and can only focus on clear, organised content – content-driven web design ensures the site is appropriate for the target audience.
  • Developing the code to display your content after the content has been produced makes it easier and quicker to edit and update your content without the need to redesign the page to account for the changes.
  • The process encourages unique and original design – there can be a tendency with design-first websites to use pre-existing stencils, with only basic elements such as images and colours being changed.

For more information on content-driven web design, have a read of:

The Five Content-Driven Steps to Creating a Great Website

Why Content-Driven web development trumps Design-First process

Content Driven Web Design

Content Driven Design

UXMyths: You don’t need the content to design a website

Content Driven Websites

Content First Design

Leave a Reply