NB Communication

The "Content First" Approach in Web Design

November 7, 2017

"Web design is an extention of page design, and page design was all about crafting the perfect paragraph. To craft the perfect paragraph you need to be working with the content".

Mark Boulton

Following our recent look at CRO (Conversion Rate Optimisation, or how to get visitors to convert into customers) we wanted to make some essential points about content and how important it is in the design process - especially in advanced UX and IU website projects.

Here’s why...

Building a sensible information architecture

Traditionally, the digital industry put content towards the end in a design project's timeline.

Content, however, is a key building block for the entire project. It can be used strategically to improve user experience (UX) and conversion rate optimisation (CRO), to achieve tangible bottom line results.

Smart companies use language to craft better experiences, even at the design stage. Language that will complement, enhance and bring their design elements to life while sketching them. How? By sketching with words. As Biz Sanford from the Shopify UX’s team highlights:

“Words are essential for helping users accomplish their tasks, and by thinking about them while you sketch, you’ll uncover problems early and be able to move faster later”.

In low-fidelity design sketches, Sanford advises that project teams work together, and use actual headings for pages and sections, key verbs and nouns, buttons and link text, using clear terms that are to the point.

Getting a variety of opinions and words will help create a natural user experience (UX) for website visitors.

A designer needs a skeleton plan to build on: answering the questions what is it that we want to say, and who are we saying it to will result in a clear idea of the content that is needed.

Knowing base messages and key information is vital before attempting to plan the general structure or skeleton of a website.

For example, sketching a layout of a landing page on services, or bundled product packages would be difficult without knowing key details about them.

We need to know not only the services on offer, but also details on the features of the service and how this should be worded (and whether it needs corresponding illustrations?) to plan the design structure accordingly.

It is best to map out all your content elements separately from design (using a blank page, spreadsheets or tools such as Mindmeister), which will give the designers, copywriters and developers a general idea from which they can work on. They'll create the website skeleton and think about content hierarchy (putting certain elements above others). Which will, in turn, dictate everything else.

Putting content first makes the whole process smoother

Going through from sketches to wireframes, low fidelity mock-ups and then to the high fidelity mock-ups with content involved in each stage is the key to success in the process.

Sanford explains in detail how and why content needs and can be involved at each stage here, giving actionable advice on how you should work with your design agency closely, from the start. You should strive to provide a good final version of your content and placement ideas, because every design stage poses different questions and everything evolves together, to achieve its natural homogeneous state – a harmonious union of parts, seamlessly working together.

This is advanced UX. Here every word and design element are perfectly tailored in a stretegic effort to communicate the message your company is trying to instil in the consumers’ minds.

John Moore Williams explains: “working together, copy and design play off each other to convey a complex concept almost instantaneously”. Read his blog here to see some perfect examples of how this is done now by the smarter companies and how it has been done ever since the very beginning of advertising.

Content can go through multiple revisions (John Moore Williams 2017). At each stage different people have input on content, miscommunication can happen, more comments add up. All this back and forth slows down the process substantially and everything needs to be updated all the time. Imagine how perfect it would be if the copy was set in stone at the outset?

Once you get to high-fidelity mock-ups of your new website, making last-minute content changes isn't alywasy ideal, for designers, developers and account managers alike. When your agency presses you for good detailed content, provided at the outset, it is helping to give your project a flying start.

The right copy needs the right design: content creates understanding - we design to optimise it.

As Sanford explains:

“Content heavily informs our decisions, so if we don’t use real stuff, we end up trying to create misinformed experiences. The words on the screen are essential for helping users understand features, find what they’re looking for, and actually accomplish their tasks. Thinking about content early gives us lots of time to get feedback from colleagues and users, and iterate on different options.”

Design is a servant of content. For example, if you use quotes quite a lot on your website, you’d want some beautiful designs to showcase blockquotes, perhaps some graphics - there are great designs and whole user interfaces (UI) designed to accommodate just that.

Good design allows us to enhance our traditional methods of communication. But we can't communicate anything, regardless of the design, without knowing what we want to say.

It’s like an architect starting his sketch without knowing what the building is intended for. It’s like editing a book’s design, before the book’s been written. It’s like building an e-commerce online shop without knowing what is going to be sold.

We now see how form has to follow function, not the other way round. (John Williams 2017). What is your design’s purpose? Content is what you want to say. Design is the means of saying it.

In Summary

“Design in the absence of content is just decoration”.

– Jeffrey Zeldman (Twitter 2008)

Design has a purpose, which stems from content. Design needs to accommodate content. Content is easy - you already know it, it’s the answer to “what is my project about?”

The rest is strategy. How do we communicate our message in the best possible way to achieve our end results?

Regardless of the nature of your project, of your content and key message, this is where we can help. Strategy and results are our bread and butter.

Don't hesitate to get in touch for you next project.

November 7, 2017

You may also be interested in...

Download our FREE guide:

5 Problems Causing Your Website To Underperform