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.
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).
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.
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:
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.
You first need to identify what content is important - what are you going to add to the wireframe?
- Discovery - Identify target audiences and the content that they care about
- User Research - What content is most important to the end user?
- 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.
- Microsoft Word (using tables)
- 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
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.