The importance of wireframing/mockups.. and some free tools to get you going

I’ve been in the web development business for several years now and I realize that everyone has their own process. All too often a designer will first jump straight into photoshop  and start piecing together a design they’ve thought up.  In the case of designers I know, they will do this with 2 or 3 designs and then present those to the client so that they can give feedback.. Then the round of revisions, often drastic changes to layout or colors… etc.  This process can take days to get through!

There are ways to lesson this headache however.. Here are some useful tips ….

  1. In the initial meeting, gather as much information as you can up front.
  2. Make sure you have a full understanding of their needs and their target audience.
  3. Ask for a list of example sites they like, and more importantl, ask what it is about those sites that they like or dislike.

Once you have a firm understanding, don’t go rush off to photoshop to begin designing because in many cases you’re wasting hours on something that they may see and dislike.. The first thing you should do is prototype the layout and general flow of the site! How do you do that? well you could use a pen and paper and treat it like storyboarding.. but this is 2012, who does that?

The Mockup / Wireframing process is one of the most under used stage for web or application development.. It serves the useful purpose of letting the client see the structure of the site, get a feel for the functionality, allow you to make sure you understood the client’s needs AND it can save you hours, if not days, in the design/implementation process.

There are a number of free applications out there to speed you along the way.. Most of them have drag and drop UI elements so you don’t have to draw things out.. and what’s even nicer is that many of these tools allow you to make your elements interactive.. Navigation buttons for example will be clickable and take you to another page if you wish.

One of my favorites is an online tool called Lumzy which is free..  here’s an example below.

I sketched this up in 3 minutes

Lumzy may not be for everyone, there’s a number of other packages out there and here’s a quick list of the ones I know of.

  1. Lumzy, of course
  2. Mockup Builder
  3. Tiggr – A collaborative prototyping tool
  4. Frame Box
  5. iPhone Mockup – for you mobile developers

Have a look, search around .. if you’re a web developer and you’re not prototyping then you might just be wasting time and money in your process.

Leave a Reply

Your email address will not be published. Required fields are marked *