August 7th, 2017

Content first design. It’s pretty much what it says on the tin. Creating your website’s main messaging and content before starting the design process.

As designers we can completely understand the urge to charge ahead and kick start the design process. The content stage can often be far more time consuming and complex than you might initially think and usually requires the most investment from your end. When you have just signed off to start a website design project, to hold off on seeing the actual designs seems deflating after the initial excitement.

Design is the method of communication; it is what we communicate which is important.

It is, however, very important to remember what the purpose of the website is. For the user it is to find information and for you it is to convert them into customers. Users will visit your website seeking information and statistically you have less than a minute to entice them to stay and explore by showing them that you have what they are looking for.

Design first

Below we have mocked up a simple layout to show how artificial content, such as lorem ipsum, and specifically chosen stock imagery allow the creation of designs which can dramatically lose their visual appeal once examples of real content from the website are applied.

Design with artificial content:

Design first - without content

Design with real content:

Design first - with content

The reality is that content is messy. Titles do not always sit neatly on one line, paragraphs are not always equal lengths and professional images which match in composition and tone are very difficult to source. Most companies embarking on a website design project simply lack the time or resources to create the perfect content for the designs. The worst case scenarios which we design for are actually the norm.

Why content first

1. The designs can be made to fit real content.

Different types and amounts of content should be considered at the start of the project. Making copy changes to your new website will be very simple using WordPress. However, significant changes such as different quantities of text can clash with the design and may require coding changes in order to keep the site looking beautiful. It takes far less time to make amendments to the flat designs than it does to coded web pages so it is well worth getting it right in the design stages.

This will also give more flexibility in future as the designers will be able to allow for your preferences and limitations in content creation.

2. The whole process is more effective

When first landing on your site the user is likely to be unfamiliar with your company, therefore the content they see is brand new to them. 86% of potential buyers want to see products or services, contact information and an explanation of what you do on the homepage.

It must therefore be laid out in the most efficient way to communicate a message which peaks their interest, otherwise the user won’t find what they are looking for fast enough and won’t decide to explore the website further. If a designer starts with the content when creating a website then the initial focus matches that of the user. A design process which begins by figuring out the main messaging mirrors the process of the user discovering the content and aids the designers in presenting that information in the best way possible.

3. It will vastly improve the UX

Users will only respond to your website positively if the information they seek is set out clearly and if it is easy for them to navigate. Their decision about your credibility is 75% based on the aesthetics of your website.

If designers can tailor the designs to your specific content then they will be able to communicate that content in the most effective and attractive way. They will know the hierarchy of the content and will be able to draw attention to the key messaging. The designs and content will then work together to get the best outcomes for your business.

4. It is better for mobile design

Often considered the most difficult aspect, mobile design will force you to strip your content down to its most essential parts, as the real estate on smaller screens is so precious. On a small screen for example, large amounts of text which are undesigned will mean the user has to scroll and scroll through paragraph after paragraph.

If the text is up front then it can be presented in the best way to make it more digestible and appealing. This aligns your goals with the user as they won’t have to sift through large amounts of content in order to find what they want; it must be extremely easy to find.

5. Avoids the risk of the wrong copy getting published

Having multiple versions of the content going back and forth between you and your designer inevitably means there is room for human error.

Need your website project to progress before you can finalise the content?

The next best thing is to use draft content or if you already have a website, the existing content. Allowing your designer to create the website knowing the likely content which will be used further down the line is much better than placeholder text. The changes you make between a draft and final stage won’t be nearly as drastic as the difference between lorem ipsum and finalised copy. Imagery wise the designer will be able to either show off great quality photos or make use of other elements if you are not able to access such imagery. For more specific advice on imagery check out Lizzie’s recent post on how photos can make or break your website.

Either way it is clear that wherever possible you should be finalising or at least considering your content before getting started on a design project. In my next post I will explore how to prepare your content, share some tips to streamline the process and explain what to avoid.

SPREAD THE WORD:

[sharethis]