What is the best (& quickest!) way to learn wire framing?

Question

I need to get-up to wire-framing speed! What's the easiest way to learn? I have a good understanding of the concepts as a content manager, but my next role requires these additional skills.

Answer 1

The best and fastest way to learn is to wireframe.

Make up a project and create a wireframe. Or make a wireframe of an existing site.

Nothing beats practice for learning.

Answer 2

Wireframing is sketching. Sketching is drawing. Best way to learn is to pick up a pen/pencil and go to it.

There's no universal right/wrong way to go about it. The key is to document what you need for your team. Try to err on the side of 'just enough' rather than 'too much' IMHO. I find wireframes are best at the ideation stage and not a big fan of them being used as approval documents throughout the organization.

Answer 3

Is it the act of wireframing itself you need to work on? or the thinking behind them? The physical act of wireframing is not that hard to grasp, I think you just need practice. The value of the wireframes though, comes through the thinking (design) that has gone into them and how this is communicated. Assuming you are just talking about the tools you can use to produce wireframes then see below:

The form you deliverables need to take will drive which tools you use and can include:

• hand drawn wireframing
• Low fi wireframes
• click through wireframes

There are various tools available including:

• Axure
• Omnigraffle
• Balsamiq
• Gliffy
• Visio

Answer 4

Hand Sketching Is King
If you're trying to learn wireframing from scratch, start by hand sketching. The computer might be faster at some point, but the skills learned from sketching are irreplaceable. You don't have to be good at drawing (just use graph paper).

Leah Buley teaches UX drawing for everyone through UX Weeks worldwide, and you can learn a lot from her slideshow on Good Design Faster.

Heres' a great overview of what tools to use for UX sketching.

These answers also give good resources:
http://ux.stackexchange.com/a/14818/4695
http://ux.stackexchange.com/a/8618/4695

Software Is Queen
When you want to move on to using software, Balsamiq is a simple option, or Omnigraffle Pro for more complexity.

Answer 5

You wireframe to communicate an idea to others or to record your thoughts.

Try sketching something and show it to other people. For example, I'm working on a flow that communicates that a friend referred a new user to my site.

Success = effectively communicating your ideas to other people.

Failure = they don't understand.

Answer 6

I suggest the best / quickest way is to adopt the most powerful wire-framing tool, and learn it via tutorials / feature adoption.

Try Balsamiq

• Cheers

Answer 7

You first need to identify what content is important - what are you going to add to the wireframe?

1. Discovery - Identify target audiences and the content that they care about
2. User Research - What content is most important to the end user?
3. Info Arch - Wireframe a hierarchy for the important content. What about a site map?

Start with pencil and paper - that may be all you need. Sketch a wire frame and then (if you want) transfer it to an application.

I've used:

• Photoshop
• Illustrator
• Balsamiq
• Omnigraffle
• Visio
• Microsoft Word (using tables)
• mockingbord
• and a few others I forget.

Today, I use HTML - if you know HTML/CSS you can build your own library of elements (based on the apps above, some offer templates) and quickly build wire frames that are interactive and accessible on all devices - no need to export, reformat, etc.

Regardless, I always start on pencil and paper - sometimes that is all I do, sending a photo or scan to the customer. What's funny is that many of the apps above try to mimic pencil and paper - why mimic when you can QUICKLY do the real thing? Yes