The other day, I was discussing with William how the enthusiasm for a new project tempts us to rush into a project with a list of features, rather than stopping to make a Wireframe, a very important step that saves much time and aggravation.
I’ve never heard of a contractor who builds homes without some form of schematic. The borders of the property need to be mapped out, the lines must be drawn, and the project must be visualized before the first hole is dug. Imagine being halfway through a project when you realize the bathroom is on the wrong side of the house. Whoops.
In software development, a wireframe is a very useful tool and can be created with minimal effort on the back of a napkin, but there are also some very good tools out there that give you a more modern representation. These aid in the understanding of information design, navigation design, and interface design. A good wireframing tool lays out all the buttons and menus and lets you click and drag them into place. Easy peasy.
The mere process of sketching out your website helps you add and subtract features to fit the scope of a project by giving priority to the kinds of information that are displayed and the range of functions that will be available. It goes beyond a mere list, which always gets bigger as the project moves forward, and projects that start that way almost always go over time, as well as over-budget.
There are several wireframe tools out there, both free and paid versions (see below). Paid versions are often more mature and have larger list of features. Free versions are generally newer and are working hard past the awkward teenage years in order to become a paid version. Either way, the mere act of creating a wireframe will save you much time, effort, and aggravation.
Just as web applications need good planning, so do Mobile Applications. JQuery Mobile has a fun schematic markup on their homepage that gets you thinking about Mobile Development. They have helped names like Disney and IKEA and allow you to quickly adapt a standard website into a mobile version of your site.
These tools do allow you to upload images to gain a more detailed rendering, but in some ways that defeats the purpose. A black and white representation is often best to grasp work flow and will help you to own the project before you launch development.
Below is a video example from Balsamiq:
Of course this is a good exercise to perform with the developer, but you might even try doing it yourself beforehand. It’s a simple process that won’t take too much time, but will always give you a return, benefiting both you and your developer.