Sunday, March 3, 2013

Cheap, powerful desktop and mobile wireframe tools

sharpie

There are a lot of wireframe tools floating around. Just Google "top wireframe tools list" and you'll see what I mean.

Most wireframe tools have taken a simple concept (illustrating the general layout and flow of an application or website) and made it a complicated mess. This is a perfect example of features getting in the way of a simple job to be done.

I've tried a dozen or so wireframe tools, from Keynote to Balsamiq, and the best tool I've found for making wireframes on the desktop is still my trusted Sharpie. It's cheap, powerful, mobile, and comes in many colors. Here's what you can do with a Sharpie:



  • draw rectangles

  • draw squares (which are really just equilateral rectangles)

  • draw circles

  • draw lines

  • draw other shapes

  • create image placeholders (a square with two lines between all four corners)

  • create text placeholders (usually squiggly lines)

  • create logo placeholders

  • create text link placeholders

  • create butto placeholders

  • draw rough icons

  • use colors to denote active/inactive status

  • draw arrows

  • annotate

  • draw little avatar placeholders

  • signify shading with sketchy lines


What's more, using a Sharpie for wireframes means I can move through several options really fast. As an illustration, I stopped in the middle of this post to see how long it would take to fill a page with different wireframes for a signup form. It took me 5 minutes 29 seconds, and that included thinking time to come up with these 8 different wireframes.

To see the power of the Sharpie at work, check out the different sketch styles of designers at 37Signals.

2 comments: