How to master the art of wireframe

[Etienne]

Today, a wireframe is fundamental to prepare any IT project effectively. Failing to plan development and design will ensure a bloody nose to the project.

Hence, wireframes are key to a well-planned development. Wireframing should appear right at the very beginning, when the first idea pops up. This article aims at giving you tips to create better wireframes.

Set a real objective
It´s true that past the first idea, everybody is tempted to start coding right away. Unfortunately, IT projects are rarely simple and you don´t have to wait long before problems will show their faces.
A wireframe aims at tackling all kind of issues. Plus it will save you money & time as it easier to change a paper wireframe or a HTML prototype than to identify errors in thousand lines of code.
But wireframing not only avoids errors, rework and future changes, it also helps to get a better understanding of the future application. Moreover, using a website wireframe or prototype prompts new ideas and raises questions.
From project managers to marketers and developers, a wireframe can be a blueprint to make everybody on the same page.

Make it functional first
Wireframes are mostly about functionalities. That´s why they come before the actual design. Wireframes are about function, not form.

Avoid Designing
wireframes are focused on usability, not the way the app will finally look like. This focus on usability is there for a reason: it avoids distraction.

Put someone in Charge
when doing a wireframe, it´s important to put someone in charge of the wireframe process. This person should be in charge of keeping it up to date, managing feedback and changes...

Everyone is involved
when creating a wireframe, it´s also essential to involve everybody in the process, from marketers to designers and developers… or even users.

Put a deadline to the wireframe
If you want to keep a project moving, choose a deadline for your deliverables and make sure you stick to it.

UX vs UI
For accessibility reasons, a wireframe is about functionalities. Apps should be thought first without interactions. Interaction can be prototyped in a second stage, through a HTML/JS.

User centered
We´re too often focus on the functional and we forget about the user experience. But user tests are essential, even at early stages like the wireframing process. Softwares like Justinmind Prototyper allow you to carry out user testing on dynamic prototypes.

Put sections in your wireframe
A website or an app is often organised in sections in order to structure information. Follow the same division for your wireframe as it should be as close to the real navigation as possible.

Tell stories
Web apps often rely on a number of processes, linear structures like log-in > buy > checkout. These processes can often be linear but sometimes users can choose to skip a step or go through a different path. Just like a book, number the pages and label the action (and where it leads the user) on the page so that you can read the wireframe like a story.

Consistency
Always look for consistency in your wireframe. This will help users, developers and designers. Repetition of groups of elements can be useful and clarify things to users.

Everybody should understand a wireframe
From business men, to marketers and designers, the final document should be easy to follow. ask someone who´s not involved in the project and sse if he understands it.

Include public and private page
Today, sites usually have an administration area to manage content or user profiles... These private pages may not be viewed by many but they are important enough to be included. These pages are for example extremely relevant to developers when time comes to design databases.

Fair amount of version
Make sure everybody involved have their say. A first wireframe should aim at gathering feedback, a second that shows this feedback was taken into account and a last one for the final polish.

Pick the right tool
Putting things on paper is often a good way to start throwing ideas and concepts. However you should quickly turn to fast wireframing tools and prototypers as the project evolves.
Wireframing concepts is one thing but with RIA, dynamic websites and interactive apps, it´s becoming increasingly important to prototype the whole thing before getting your hand into development.

API & third-party components
If your website integrates API or other external web services like PayPal, it may influence the whole structure of your site. API are thus also important to take into account when wireframing.

I hope that this article has been useful. I tried to cover the main questions raised when dealing with wireframes and prototypes as to who should be involved, how to approach it, the right tools to use and how the final output should look like.