April 21, 2017 How wireframing can make your content even better

By Rhys Martin

laptop showing blueprints

It’s easier to draw a horse than explain what one looks like. This is because we process visual content much more efficiently; after all, a picture is worth a thousand words. By understanding that content has a visual purpose – as well as an engagement and informative purpose – your writing will be more effective at achieving its goals.

When it comes to web content, wireframes allow clear communication around your content’s purpose, so that designers, developers and copywriters are all on the same page.

What is a wireframe?

Well, quite simply, a wireframe is a visual representation of a webpage – a blueprint of sorts. A wireframe provides you with a visual schema of the page layout and how information will be structured on the page. It also shows where webpage elements will go, such as:

  • navigational structure (links, tabs)
  • different content types like text, images and video
  • major components like buttons, banners, and drop down bars.

Why should I wireframe?

Wireframing is an important step in any webpage design process. It makes it easier for a developer to plan the layout according to how they want the user to process the information. Think of it like how an architectural blueprint shows you where everything in the house goes, without actually looking like a house.

It’s also useful from a user testing perspective; it illustrates how a user will interact with the website – with various states of buttons or menu behaviours – and highlights any deficiencies with the design. The use of a wireframe is like someone drawing you a map of how to get somewhere. You could just write turn left here, turn right there, but it’s easier to see turn left at the park, turn right after the supermarket.

But wireframes are only for designers and developers, yeah?

Not at all. With small and medium businesses making up 57% of the private industry sector, the majority of your work will be for businesses who don’t have the budget to hire user interface (UI) designers and information architects (IAs). So, the copywriter and designer can both have input to create the wireframe and structure the copy in a visual way.

Also, wireframing is helpful for copywriters as it allows them to create content that’s appropriate for where it’s going to sit on the page. For example, there’s no sense in writing a paragraph of content if it’s destined for a small tile on a page. One line with a CTA (call to action) is more appropriate, and wireframes make that clear to everyone. To quote American web design expert Jeffrey Zeldman, “content precedes design. Design in the absence of content is not design, it’s decoration.”

I want to wireframe, where do I start?

If you’re looking to clearly communicate your content goals – but are minty-fresh to wireframing – and want to create your own, then Axure and Balsamiq are the applications for you. Both offer 30-day free trials and both are two of the most widely used wireframing apps. Axure is used for designing interactive prototypes for websites and mobile applications. Similarly, Balsamiq is a rapid wireframing tool for designing web and app mock-ups.

Our talented team of copywriters are well versed in providing expert feedback on your wireframes and creating content to meet your plans. Get in touch with Avion Communications today and find out how design-orientated content can make your business soar.