Netsetters weblogProgramming, User Experience and IA

Want to start a project, start with a wireframe! Wireframes are an essential part of the project process. Wireframing has some benefits like: Faster web development, a good project guideline and Better user testing. I can advise everyone to start creating wireframes.

Why using wireframes?

By creating wireframes first, you outline the basic layouts for pages (what goes where)   and functionality (what has pagination, what happens when you click “this”, etc.) . You can easily move elements around and ensure that you’re creating a very usable product, while keeping everyone on the project informed. Some reasons for using wireframes are:

• Users are emotional. Wireframes and prototypes are generally gray or monochromatic in color. This lends itself well to initial user testing. They/You can focus more on actual functionality than users’ reactions to colors, pictures, text, etc. User testing can be hard because people have biased and emotional responses to certain things, this helps alleviate those situations. Wireframes also help you test earlier on in the process. You can see what’s working and what needs some revising before the design is set in stone.
• Designers can make it too pretty. This will give your designers a place to start, even if you both decide to move things around, it’s at least a non-blank canvas. Graphic designers typically don’t want to design forms, am I correct? This lets them do what they do best without wondering what needs to happen on the page.
• Programmers can program. Knowing what functionality needs to exist upfront will make your programmers happy and make teamwork easier for them. This allows them to breakdown what/where/when action happens and how to account for it, as well as how best to delegate the work among themselves.

Wireframing on paper

I started out wireframing with pencils on paper, but it did not quite work out for me. I even have difficulties drawing a straight line. So I stopped with this technique as soon as I found Omnigraffle. Last month I stumbled upon the website of Jason Robb, that gave me again new inspiration to start on paper, so I bought some markers and started again.  Wireframes on “real” paper just look better, the counter side is that it’s really hard to edit.

Wireframe software

Ready to start with wireframes? There are some great tools out there that you can use creating them.

• OmniGraffle Pro, Personally I’m using this one. First because it is easy, second because there are tons of  stencils for it, en third.. I own a Mac, so I can’t use Visio. Want to find a stencil, go to Graffletopia. And really, Omnigraffle Pro is worth the money.
  
• Adobe Fireworks. The new Fireworks has loads of rapid prototyping and Wireframe possibilities. Sometimes I like to use it but the bloated possibilities often let you create too detailed wireframes.
• Microsoft Visio.  For a long time Visio has been the standard for diagrams on the PC and a lot of people have continued to carry on with it for wireframing. You won’t get the same presentation modes that OmniGraffle offers, but you will find more stencils and templates available on the web.

Start today!

I started one year ago with wireframes, and I’m glad I did.  I can’t imagine a project without a wireframe. Never used a wireframe? start today and you’ll see how easy it is. You do not have to be an artist to draw one; keep it simple stupid!

Related articles by Zemanta

• Visio Killer Gliffy Gets A Makeover (readwriteweb.com)
• Help, we’re drowning in wireframing apps! (90percentofeverything.com)
• Rapid Prototyping Tools Revisited (adaptivepath.com)
• Site-it!: Information Architecture Prototyping Tool (slideshare.net)

Popularity: 3% [?]