Coder Camps

Blog

Wireframing

Post

Wireframing

Let’s say you’ve come up with a brilliant idea for a project, then you work for hours designing the look and functionality just to find out that maybe it wasn’t as brilliant of an idea as you originally thought. Time and energy wasted on something that could have been avoided from the start with the use of wireframing. There are several different techniques for wireframing, but the most common way is a hand sketched wireframe.

Full calendar wireframe

Before you start wireframing keep in mind that it is used for getting a feel for the layout of your project; it’s not about the content that will be displayed. In the example above, I have sketched out what a calendar application for a mobile device may look like, starting with what the primary view will look like then branching off from there.

Calendar wireframe close up

You may want to separate portions of the page that will be more detailed such as the calendar into it’s own area that way you don’t end up with one cluttered page that may be difficult to understand. For any areas of your page that perform actions, be sure to include text explaining the interaction as well. For instance, you’ll see on the calendar around the number one there is a blue circle with a line going to another red box.

Wireframe actions

On the blue lines there are descriptions of how to trigger actions in the area that they point to and what happens during the action. These descriptions don’t have to be long paragraphs, just something short to give yourself and others that may be examining your wireframe an idea of what will happen when they interact with that action.

Lastly, for any areas that will just be displaying content write a short description of what is supposed to be displayed in that area like the green areas in the image below.

Wireframe content details

Here are some other great resources for more tips and tricks about wireframing.
http://blog.teamtreehouse.com/20-steps-to-better-wireframing
http://www.mightybytes.com/blog/wireframing_techniques_for_a_peacefull_development_process/

If hand drawing isn’t your thing, check out these online tools for wireframing.
https://balsamiq.com/
https://moqups.com/
https://wireframe.cc/