How wireframing can help journalists plan & communicate ideas

Among the technology-based skills worth journalists’ consideration, wireframing merits a closer look.

Wireframes are rudimentary visual depictions of ideas. They can be created with specialized software or nothing more than a pen and the back of a napkin. Web pages, mobile app screens and information graphics are all suitable wireframe subjects.

Despite their visual nature, though, wireframes aren’t about design, at least not completely. They don’t typically convey information about color or typography. And they don’t specify how gradients, textures, shadows and other effects should be implemented.

Instead, wireframes express how elements should be positioned relative to one another. They convey the importance of elements, oftentimes establishing a sense of hierarchy. Usually, wireframes convey basic information about white space, and the portions of a page or screen. They’re more about visual communication than design.

In practice, wireframes usually take the form of a set of boxes and other simple shapes, each representing a region in a larger layout. Wireframes convey what goes where and, in the case of interactive projects, such as mobile news apps, wireframes provide an initial indication of how users might interact with the software. (You can see some examples of wireframes here.)

How wireframes can help you

Wireframes are an effective bridge between content and structure on one hand and design on the other. A reporter could create a wireframe to express a visual idea to a designer who then creates an interactive infographic. An entrepreneur could make one to show a freelancer how she wants her new community blog to look.

Wireframes help us test ideas by simulating, in a very crude way, how a final product might work. These previews can provide valuable insight into what works and needs improvement before we make a significant investment of time building something. And, they help us communicate our intentions to teammates, facilitating feedback at the earliest stages of a project.

In a recent email interview, I had a chance to ask journalist and Web developer Andrea Jezovit how she uses wireframing in her work. Jezovit is a content editor on the Creative Solutions team at MSN UK and a former News21 fellow. She studied user experience and interaction design at City University London.

Casey Frechette: What kinds of projects do you wireframe? Can you give some specific examples of times you’ve wireframed news products?

Andrea Jezovit

Andrea Jezovit: Interactives, websites, blogs, Web apps. I use wireframes a lot for different projects in my current role, but not much of it’s news-related — lots of website layouts for commercial campaigns, social media apps and interactive tools like quizzes … I even wireframed a game.

News products I’ve created wireframes for have included my interactive infographics produced as part of Berkeley News21 last summer. They were especially tricky infographics to design, as I was trying to combine a clear narrative with interactive elements that could be explored. Doing lots of wireframing really helped.

I also created wireframes to help me figure out the layout and navigation of a couple of (now defunct) journalism blogs, and I created really detailed wireframes for this interactive ‘deals calendar’ produced for an MSN UK campaign, which an outside developer built for us — not quite a news tool at the moment but it can be re-skinned for use as an events calendar, which is sort of newsy.

One of Jezovit’s wireframes. You can see more examples on her personal website.

What suggestions do you have for journalists who don’t have backgrounds in visual communication but are interested in wireframing?

Jezovit: I’d say you don’t need to have a strong background in visual communication to be good at wireframing! Wireframing is a different skill from visual design — it’s more about thinking about the structure of a site or an interface and making sure all the important information and functionality is in there, while (most importantly) making sure that it will make sense to the user.

I think most journalists and editors are probably used to organizing information and creating experiences to meet readers’ needs, for example through coming up with a good story structure or coming up with sections for a magazine — so I think we’re natural wireframers once we get started.

Even if you’re clueless about design, all you need to do is sketch out a rough wireframe showing what information you want to display most prominently, what other information the user should be able to access and what sections you want to include in the navigation, etc. Then the designer can work with you to improve everything, and offer her or his own suggestions.

What tools do you use when you wireframe? Do you tend to use pen and paper or software?

Jezovit: I use both. I usually use pen and paper when sketching out a rough initial concept; it’s a quick way of getting your ideas down, and often it’s enough for a designer to work from if it’s for something simple like the layout of a website.

If I’m working on something more complicated, though, like an interactive with lots of different screens, I’ll do another set of more detailed wireframes using software like Visio or OmniGraffle, or sometimes a web-based tool like Cacoo. That way, the wireframes turn out cleaner and easier for the developer who will be building the project to understand, and also these tools have built-in shapes and icons and copy/paste functionality that makes it easier to wireframe lots of pages quickly.

How has wireframing helped your journalism?

Jezovit: It’s helped me learn that when you’re trying to get information across, simplicity is best. It’s also allowed me to tell stories better (at least I hope) when it comes to my interactive infographics, because through wireframing I’ve taken the time to put myself in the user’s shoes, think about what they’ll see when they’re interacting with the infographic, and make sure they’re getting the best possible experience that will make them want to explore the information and learn something. Not sure if my projects have always been successful at this in the end, but doing lots of wireframes/interface designs has at least made me hyper-conscious about exactly what people who view my infographics are getting out of them.

Are there any other tips or techniques you’d recommend to journalists interested in wireframing?

Jezovit: I’d say wireframing isn’t the first step to designing a good website or interactive. Before you start on a wireframe, it’s good to think about who your user is and what goals they’re going to have when they visit your site or look at your interactive. (E.g., are they just going to be skimming for an interesting story, or digging deep for a specific piece of information?) Think about the whole user journey they’ll be experiencing as they travel around your site, and sketch that out. Then sketch out a wireframe that takes this into account. Also:

• Be sure to get others’ opinions and feedback when you’re wireframing. This is really helpful, as it can be really hard to come up a good interface design, and a design that you think works might end up being confusing for others. If this gets caught at the wireframing stage, you can fix it before it gets built. Definitely be sure to involve any designers or developers you’re working with, as they’ll be able to provide good feedback and will know what’s feasible.

• If you’re working on something really complicated and you want to make absolutely sure it’s right before any building starts, you can create detailed wireframes and then test them on users using paper prototyping, which is a technique some UX professionals use. There are lots of fun videos on YouTube that show how this can be done.

• Learning how to code and build things yourself really helps. Once I started building things, I became so much more aware of all the detail that’s required when planning a website or interactive.

• Look for examples of great sites, blogs, apps and interactives to use as inspiration when you’re planning your project. If you see a great piece of functionality on another site (for example, a really well-designed, easy-to-use navigation system), you might be able to borrow from it. (I borrowed a few interface design ideas from some really well-done interactives by the New York Times when I was sketching out one of my interactive infographics.)

Taking the next step

If you’re feeling inspired to try a wireframe or two on one of your next projects, there are plenty of resources you can turn to — whether you’re looking for tools, tips or information about the wireframing process.

A final word of advice when wireframing is to work quickly and with an openness to revision. Wireframes should help bring focus to what you want to build, but that doesn’t mean the focus can’t change.