It’s becoming more common to create website content before a website design is realised. But content doesn’t work independently, and even the best content strategy can fail if it isn’t properly interpreted by a designer.

Let’s take a look at how content influences website design, and how we convey a website content vision to both designers and clients.

Harmonious content and design

I don’t know about you, but I’m a bit bored of reading blog posts deliberating whether content or design should come first.

Ultimately, they need to work harmoniously together. They should emerge and grow as one – each informing how the other progresses and improves. Like design, content is iterative: it’s never completely finished.

Both a content strategy and website design are only ever complete enough to test, measure, improve, test again, and so on. Over and over.

At Unramble, we sometimes get involved in creating content for a new website before a designer has even opened their Mac. When this happens, the content strategy we create has added influence on UX, website structure, page layouts and, of course, the information that site will contain.

Content and design team working harmoniously.

Lost in translation

As a part of our website copywriting process, we always ask clients for regular feedback.

But, if we can’t communicate the strategy clearly, the client will never quite get the content. Likewise, if we don’t convey this information clearly to the designer, the content and design may not work together as harmoniously as they should.

Our content isn’t going to do a very good job if we don’t all consider how it will look and function on a live website.

Ergo, it’s up to us to effectively communicate our vision for every content strategy.

But, how?

The content strategy, the whole content strategy and nothing but the content strategy

A 100% complete design with Lorem ipsum in place of content can seriously hinder a content strategy.

Similarly, a tonne of words written with no consideration for UX is a right pain for any web designer.

Content and design should feed into each other.

At some point, though, someone needs to make the first move.

Often, it’s the designer or developer who’ll make the first move. But sometimes, it’s up to us – and that’s really exciting.

How can content strategists make that first move in a meaningful way without a design in place?

Getting all this detail across requires something more visual than reams of text.

One of the more successful ways we’ve visually conveyed a content strategy in the past was using GatherContent. I wrote about that in detail over here on ProCopywriters.

GatherContent is much like using a paired down version of a website to present your content.

For various reasons, I’ve gone off GatherContent a bit. No offence to GC, we’ve just moved on!

We currently use a combination of Google Docs and Marvel to convey the words themselves and how those words work in situ.

Google Docs: for drafting copy, gathering reviews, creating SEO meta data, and writing basic HTML.

Marvel: for communicating the visual elements crucial to a content strategy, including site structure, page layout and user flow.

Content strategy: the words

For all its faults, when it came to serious editing, there was still nothing that did the job quite like Microsoft Word.

Google Docs had been OK for a while, but was never good enough to dump MS Word entirely.

Until now.

Google Docs has improved a lot recently. It now has a much slicker editing experience, and makes reviewing documents super easy.

We now use Google Docs at Unramble when creating and reviewing all website page copy, and for other text-based things, including sitemaps and SEO meta data.

Even though Google Docs is essentially a word processor, it’s still easier to digest if the content is as visual as possible. This generally involves creating a heavily formatted version of the website content, hinting at how the copy may be structured on the website and giving an idea of page layouts.

By creating an HTML version too, it ensures elements like bold/italic text and headers don’t get forgotten when uploading content to a live website.

Google Docs is set to make it simpler to upload content to WordPress at some stage soon. So this should all become even more convenient, and in the near future it may be possible to drop that HTML step entirely.

Content strategy: the visuals

Google Docs is very handy for creating and reviewing copy. But you can format a Google Doc all you like and it’ll never quite emulate the layout of a usable website.

Even on this Unramble website, which is largely just copy, you’ll notice there are some important things like a menu, a footer and buttons. Conveying these essential elements, and the way they interact with each other, is near impossible in a Google Doc.

When I started looking into ways of better communicating all of a content strategy, my first thought was to build a client area into the Unramble website. I often test out client copy (without putting it live) on this site anyway. So it made sense.

But, I don’t want the Unramble branding, however minimalist, to influence how clients visualise their content strategy.

That’s when I began looking into the potential of creating basic wireframes.

So I asked the WordPress community for their top prototyping software suggestions. The three top candidates were JustinmindInVision and Marvel.

After trying these out, we’ve chosen Marvel, so massive props to Ross Wintle from Oikos for this suggestion 🎉

Marvel is a web app for “simple design, prototyping and collaboration”.

It’s a delight to use and comes with ready-made design elements. Most importantly for us: it’s possible to edit copy right there in the wireframe, much like you can on a live website.

InVision is great for pure website design, but as we’re focused on the content, creating an entire design from scratch before uploading to the app adds an unnecessary step.

Justinmind was a close second to Marvel – it also allows editing content in the app itself – but Marvel pipped it slightly in the usability stakes.

So let’s talk more about Marvel…

My initial goal was to simply find a way for clients and designers to better visualise the content strategies we create. However, there was an unexpected advantage of using Marvel.

I actually think it’s helped us better visualise our content strategies too, so we now create an improved product as a result. This is because Marvel gives us a realistic environment to test and play around with a content design.

We can tweak the content – making more effective call to actions, tightening copy, and improving user flow before a site goes live.

Content wireframes

To give you an idea of what our content wireframes look like in action, I constructed a prototype of the Unramble website using Marvel.

Step 1: Create content wireframes

Once you’ve signed up to Marvel, you can create wireframes either using ready-made elements, by designing them from scratch in the app, or by importing a design from Sketch.

Marvel wireframe elements.

Step 2: Add content

You can then add in content and format it directly in the wireframes – tweaking things as needed!

Add content to Marvel.


Step 3: Design additional pages

You can create and design multiple content wireframes if a website has multiple pages. Once you’ve created one, it’s simple enough to duplicate elements across other wireframes.

Add other website pages by creating new wireframes.

Step 4: Create and test prototype

Using Marvel’s prototyping function you can link all the pages together, test out the flow and improve!

Below is a little video showing how to link together content wireframes into a prototype website by creating ‘hotspots’. Once this is done, the prototype is ready for testing and review.

As content has such a huge influence on UX, it’s really important to communicate an entire content strategy in the clearest way possible.

This combination of Google Docs and Marvel is the best way we’ve found so far, and I’m looking forward to seeing how this new approach impacts our work over the coming year.

We’d love to hear what you think about this approach to website content strategy. You can get in touch here or tweet me @UnrambleAlice.

Subscribe to the Unramble blog

Like this post? Enter your email address to subscribe to the Unramble blog and receive notifications of new posts by email.

We don’t publish tonnes of blog posts, so your inbox won’t be flooded with stuff. We’ll also never pass your email to anyone else.

# # # #

28th November 2017

Leave a Reply

scroll to top