Content and design: combining them effectively

Content and design: combining them effectively

Take interesting content and attractive design in equal parts, then join them together carefully. This is the rough formula for creating your most convincing product story. However, in successful web content marketing, there are many more nuances in the interaction between content and web design. Let’s now explore them and see how to make content and design a perfect tandem.

Content and design: the book and its cover

They say, “don’t judge a book by its cover.” However, it’s natural for humans to first be attracted by the visual presentation, and then proceed (or not) to the contents.

When it comes to web pages, the first impression is usually created by the images, as well as headlines. Next, within seconds or milliseconds, users decide whether they want to dig a little deeper and read the whole story.

So both the cover and the book should be equally awesome. They should reinforce each other to convey the desired message to the users, leading gradually to the call-to-action. Imagery, colors, fonts, graphics, and other design elements should be inseparable from the convincing text.

What comes first, design or content?

Despite the equal importance of content and design, you always have to start with something. That’s why there are endless discussions as to which of them — content or design — comes first.

Should content writers prepare their texts first and then designers arrange them into visual assets, or vice versa? Let’s see what happens in various typical situation models and what can be done to prevent problems or improve the interaction.

Typical situations in design and content relationship

Situation A: design before content

Copywriters often work with ready mockups. This is especially true when it comes to creating the most important pages on the website, like the homepage or landing pages. The mockups include dummy text of a particular structure and number of symbols.

In this case, copywriters are forced into fit in the “Procrustean bed” of the mockup. Their creative urges are restricted. The text forced into strict frames sometimes looks a little bit more artificial.

Often, copywriters would prefer to outline a different number of text sections, write more details about particular things etc.

Situation B: content before design

Designers also often get a ready text to work with. It can be either because they ask to see the content first, or because the content simply arrives first.

However, the designer might have some ideas about this content illustrating. For example, they could have beautiful infographics of a particular structure in mind, and would like content to fit into it. But this involves some re-writing for the copywriter, which could have been avoided.

Situation C: content and design are separate

This is the most unlucky option of all. Copywriters and designers work in parallel universes, without a dialog. Maybe they are under strict deadlines, or the communication processes in a team leave much to be desired.

As a result, the visual and textual parts do not match at all. This is especially influenced by the fact that creative employees use associative thinking in their work, and they may have absolutely different associations with a particular topic.


Communication in a team is the main key to success. It may include brainstorming, idea exchanges from both parties, rough sketches or brief content drafts, and so on.

This does not mean that a simple post with a cover image requires a meeting. Depending on the task complexity and type, communication can vary from a simple question like “How do you see it? Got ideas?” to a multistep cooperation.

Showing each other early work results and being ready to make changes according to each other’s feedback is important. For medium- and long-term tasks involving content and design, the Scrum meeting format is very helpful.

Timely discussions will save a lot of time on bothersome reworking. Both designers and copywriters should fully understand in advance what will be required from their work.

It should also be noted that copywriters and designers, as creative people, are sensitive to criticism and tend to set their hearts on a certain idea. So the friendly atmosphere at the meetings, mutual respect, well-argued feedback, and the desire of all participants to reach the same ultimate goal are very important.

Final thoughts

Hopefully, this will help you improve the interaction between content and design in order to make your message to your users incredibly powerful!

We love best practices here. So, if you apply to us for website development or improvement services, you will know that all the work on your project will be perfectly coherent and the relationship between the team members will be maximally fruitful.

2 votes, Rating: 5

Read also


What kind of specialist do you need, and what skills do they need to have? As some people are still confused about the difference between web developers and web designers, let’s clear it up.


You should always remember this one simple but helpful idea — put yourself in the customer’s position. One way to do this is answer the question, “How much time am I spending using mobile devices...


Today we are going to give you some general pieces of advice, applicable to any website. These are a few easy tweaks that will improve user experience and encourage conversion.


The magic ability of images to adjust themselves to screens is how responsive web design works. And it works especially well in the latest Drupal version, Drupal 8, which has built-in support for...


We created a list of free online services that allow you to see how your website displays on different devices.

Subscribe to our blog updates