HEY

Participate in the next Webflow Challenge!

Content vs. Design: Where to start?

Usually, we work on the visual before the content and not the other way around. Only, have you thought about the result if we create the contents before the design?

Updated on

13/8/2020

pre-design contents
Photo by Sarah Halliday on Unsplash

Usually, we work on the visual before the content and not the other way around (content before design), i.e. we establish the wireframe before adding content adapted to the visual. You want to know what happens if we create the content first, and then adapt the layout accordingly?

A recent experiment on pre-design content

For one of my latest projects, I used a copywriter; a person who writes different pages of a website in order to convert prospects into customers. It's true that I already had ready-made layouts, but we had to revise some of them according to the story being told.

As a copywriter, she focuses mainly on words. So she gave me a rather basic structure: a word document among others, in table form.

There is a Youtube video in which I describe this at the bottom of the article. Support me by subscting to the YouTube channel "Happy Desk Design"

pre-design contents
Photo by Kathryn Aleksa on Unsplash

So, if one day I happen to work with a copywriter again, I have a new process (content before design):

  • I establish the basic structure of each page of the site. Since it will need to be redesigned once the content is established, I don't spend too much time on it. I only take into account the client's recommendations. When I give him a first draft, I tell him that the layout might change a little.
  • As you probably know, I used to work on Figma. Its advantage lies in the fact that it is a collaborative platform.
  • To facilitate the work of the-copywriter, Figma allows me to share my projects with her. He/she can easily get an idea of the story I want or the client wants.
  • The copywriter will then take this into account when making small changes.

Although this is my first collaboration with a copywriter, I found it to be a pure success! The secret? Just be open-minded, accept the few changes your collaborator will eventually make to the initial project.

pre-design contents
Photo by Kathryn Aleksa on Unsplash

Producing content before design: advantages or disadvantages?

Content and visuals are equally important to each other. If words convince readers and persuade them to carry out a specific action (CTA), visuals touch them even more. They help users to have a clearer vision.

The copywriter has his own marketing strategy, just like we webdesigners do. Don't you think that by combining these two areas of expertise, the sites you design for your clients will be even more effective? These two areas of expertise are obviously complementary.

I'll give you some facts:

  • If marketers have an unfortunate tendency to use too many CTAs, designers remedy this. They take the time to consider where to place each CTA, not to mention its other visual characteristics.
  • If some people also think that the bigger the headers are, the more attractive they are, this is not necessarily the case. In fact, it all depends on the target audience. Especially since a very large header, according to other designers, only delays access to the real content.
  • But of course, only the copywriters have the right words!
pre-design contents
Photo by Outcast India on Unsplash

Conclusion

By working together (the copywriter on the content and the web designers on the visual, and therefore: content before design), we will find a better solution for the readers! The solution is obviously in line with the requirements of marketing and user experience.

Come back to this page whenever you want. Did you come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydesk.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training