“Do you have wireframes?”
I asked a client this question not so long ago, and the answer surprised me.
“Not yet, he said, “but they’re not far away. In the meantime, here are the sections of content we need written, so if you can get started, that’d be great. We’re on tight timeframes here!”
The moral of this story? Yes, there really are still people out there who think we can write effective web content without having any idea whatsoever of how the page will look.
Separating content from design?
We’ve heard the arguments for separating content from design, and we know it’s best practice. But telling a writer, “you just write the content, we’ll make the design fit it” is in no way an embodiment of this philosophy.
Content is about assets—text, imagery, audio, video, and so on. From the content producer’s perspective, separating it from the design simply means that the content has its own inherent value, independent of the design. It’s created and stored in a way that enables it to be reused with equal efficacy and ease whenever the design changes. No big deal.
In terms of communicating a coherent message, though, the content needs to be very much aligned with the design. This is not to say that it it should necessarily be rendered useless when the design changes, but each message on a page meeds to work in the context of the other messages on that page.
Imagine if all you present on a page is an article, framed by the site header, which contains the logo and a simple nav. This is exactly the scenario in which people often say things like “You just write the content, we’ll make it fit.”
But if I write an extremely formal piece of content, and your logo and the design of the header are fun, wacky, and quirky, we’ll have a messaging clash. Make the page messaging any more complex than this, and you can start to have real trouble.
Of course, a strong brand and style guide would help your writer avoid that kind of issue, but then if you’re a startup you probably don’t have either of those things. And if you’re a web publisher, you’re probably taking content from a range of authors, and the fact that you’re working with various voices may have implications for design.
So wireframes really do help.
What wireframes do
Wireframes give your writers three things:
- practical context
- messaging context
- limits.
Practical context
By practical context, I mean that the wireframes give the writer an idea of how each piece of writing needs to work with other assets on the page: images, video, and so on. Let’s say we have a page that we know will contain a tour video at its top. This initially sparks questions like:
- Does the text need to tell the same story as the video? Or does it need to communicate more than that?
- Should we just use a transcript, or do we have the opportunity to present the video’s key information in a different way?
- Are there cues like links, nav or images that give users additional context about the what’s being said, or do we need to provide all of the context within the text itself?
Messaging context
The messaging context is tied very closely to the practical context, but it’s more focused on the nuance of the communication, as we saw in the example I gave a moment ago, of formal text alongside a wacky logo. But let’s take the first question in the list above as a less simplistic example: Does the text need to tell the same story as the video?
The answer to that question will depend on the pages objectives and the key messages that fall out of them. The website might critique tour videos; it might be presenting the tour video in an effort to sell the product toured in the video, or it might show the video as part of the videographer’s portfolio.
In each case, the type and amount of information that’s repeated from the video itself within the text will differ, because each of these pages will communicate different messages within the context of the video itself.
For example, if the video is shown as part of the videographer’s portfolio, we might also be showing links to other videos that are similar to, or contrast with, this example in some way. In that case the message might be, “We’re the specialists in product tour videos—look at all these others we’ve done as well as this one.”
Limits
Finally, the wireframe gives your writer text limits—sometimes, right down to the character. Headlines, taglines, and text links tend to be pretty short. In my experience, marketing text usually needs to be kept to a very specific length in order to fit page designs.
Even if you have an open page length—to present an article, for example—saying “go nuts” to your writer isn’t ideal. Is 1,000 words ok? Is 10,000? Does the way your site displays longer content support such length? Will a 10,000-word piece break the pagination, or make the next-page links display weirdly? Will it need to be offered in alternative formats (e.g. PDF or audio) to be consumed offline?
You need to know your audience’s and site’s limits, and so does your writer. A wireframe gives them limits even in cases where a character-limit hasn’t been established.
Are you or your writers writing to wireframes?
As you can see, wireframes are an essential first step in creating good text content that communicates within the overall user experience on your site.
Do you use wireframes to write your site’s content—or to brief those who do? Share your thoughts with us in the comments.
Georgina LaidlawGeorgina has more than fifteen years' experience writing and editing for web, print and voice. With a background in marketing and a passion for words, the time Georgina spent with companies like Sausage Software and sitepoint.com cemented her lasting interest in the media, persuasion, and communications culture.
