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

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 3

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 4

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 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

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

Answer 7

You need to learn two types of things

• Theory: methodology and best practices for wireframing.
• Practice: usage of a wireframing tool.

For this two things I would recommend the same book:

Todd Zaki Warfel's "Prototyping: A Practitioner's Guide". The book describes various types of prototypes, including wireframes, and it's a good introduction to the theory and the tools. The first half of the book includes chapters like

• The value of prototyping
• The prototyping process
• Five types of prototypes
• and so on

The second half is about the tools, describing well known applications like Axure or Visio and traditional or analog tools like pen and paper.

I think that this book can be helpful for you because it's an easy and short read (less than 200 pages) and can be bought in ebook format. You can have it today and read it all in a couple of hours.

Hope it helps.