WebflowWebflow Enterprise Partner

CD Chronicles 4: Bridging the Gap with Notional Copy

The great debate: Which comes first… design or copy? We choose neither. And both.

CD Chronicles 4: Bridging the Gap with Notional Copy

The great debate: Which comes first… design or copy? We choose neither. And both.

The content design process is all about designers, UX folks and writers working in close collaboration to address user needs at each and every interaction across a site. The thing is, in that user-focused, teamwork-driven world, you really can’t completely put one thing — visuals or verbal communication — before the other; to create the best possible experience for your audience the two have to work hand-in-hand. Especially when you consider that addressing user needs might not mean writing anything at all. (Sometimes information is just better served up in pictures or diagrams or forms, for example, instead of words.)

However, when it comes time to start putting something down on the page, you are obviously going to need some language to work with at some point. But, despite its ubiquity, we’ve found that lorem ipsum, or nonsensical placeholder text in general, is kind of a waste of space during a time when you have opportunity to create meaning.

So, rather than go with gobbledygook, we create a middle ground between dummy placeholder text and fleshed out content that better serves our purposes in the early phases of design: notional copy. 

 

What do we mean by notional copy? 

Notional copy conveys the intent of copy to come. 


Designers get a pass at notional design with mood boards and the like. So, why should writers be expected to get every syllable down in one swing? We teach our content designers and copywriters to never expect (or try) to write things that are “first draft and done,” so why backpedal here?

In that spirit, notional copy might look something like: “Headline about our collaborative process,” or “Benefit about how we offer everything under one roof, saving clients time and money” in our Figma-generated wireframes. These are words that go beyond merely making space for the vague shape of some kind of future text — every “box" has a reason for why it's there and what it will be filled with, and we want to honor that. So this copy frees you from having to get down to details so early in the game, when you should be focused on mapping content to user needs and moving things around for narrative flow in wireframes instead.  

Remember at this stage, at the point of wireframing, discovery and research are pretty much done, and you should have a pretty solid understanding of what information needs to be presented on the site, if not vaguely where. So, we say rough it in. Further, experienced content designers will probably have an idea at this point of how much space is needed for text without even writing it anyway (plus everyone should be aware of general best practices around copy length and text layouts for optimal user experience and/or have a good idea of just how much content their site’s audience will bear in one swing). 

At the same time, notional copy leaves a lot of room for creative exploration for both content and UX designers. When you put writers’ and designers’ minds together from the start there’s so much more time and opportunity to come up with new ideas and challenge each other’s perspectives to create a more compelling site experience. 

In this sense, notional copy is also there to act as a guide for connecting content and design without limiting creative thinking for either discipline. 


A bonus benefit of notional copy?  

It helps paint a picture for clients without diverting their attention. 

This is my favorite perk of notional content in wireframes — and a point that belies the utter power of content in a site experience. 

When you’ve got “real” copy showing in wires and during early design reviews, things tend to get sidetracked, and conversations turn to word choice pretty quickly. Lorem’s only saving grace is that it’s nonsense, as well as ingrained in everyone’s mind as “do not read me.” Even telling a client “this copy is placeholder” is dangerous if the words are final-feeling enough; they’ll read it as finished anyway. Notional copy, however, is obviously not final copy but usefully full of contextual clues that clients need to understand the site experience and proposed content elements. Bottom line: Those few rough words of intent really help people envision how design, UX and words will all come together…without becoming a distraction. 

P.S. You can also use notional copy to test ideas and directions without getting into a grammar or voice and tone discussion. We like using every early presentation to get a read on a client’s preferences and prejudices, then clock those against our user research. It helps to be prepared and go into the next round with as much insight as possible. 


Wrap-Up Headline about Notional Copy Goes Here 

See how that works? ;)

Think of notional copy as something like the style boards designers use to help define the visual direction of a website. They gather together various design elements to communicate concepts, all in an effort to ensure the direction feels right before putting tons of time and effort into final design. If you approach content design and writing this way, when it comes time to write the final words, you’ll have a fabulous head start thanks to that initial copy pass, but more importantly, you’ll know that the layout and design is supporting the content so you can get your message across effectively. 


Think of it this way: Notional copy keeps us out of the weeds, until it’s time to layer on the bug repellant and go in.

No items found.

Edgar Allan is an agency in Atlanta, Georgia, that focuses on digital products. We see great products as the intersection of the brand and user story. If you would like to hear more drop us a line.