UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 417 May 21, 2009

Wireframing ahoy!

Wireframes are the foundation of a design before it even starts to formulate with colors, shapes and forms. And even if some of us find them ugly, or a waste of time – yeah, I’ve heard that too – there is always the greater part among us that find them extraordinarily useful, amazingly beautiful, and somewhat sexy.

Here’s a short list of my favorite wireframing resources, which apart from keeping me informed about how others do it, I am also inspired and lead to new directions.

Wireframes Magazine

Just as you’d expect form a site with a name like that, they serve great wireframing content

Visit Wireframes Magazine

I ♥ wireframes

This is more of a “Flickr pool meets twitter with a blog” kinda resource, but it still remains on my RSS Reader because it keeps serving top quality content.

Visit I ♥ wireframes

Flickr is also a great source for inspiration

Images always talk better than words, so here’s what a really quick Flickr search comes up with. Great inspiration minus all the jabber …

Check these Flickr groups for instant inspiration:

Everyday Information Architecture
IA Discuss
Information Architecture
Drupal Redesign

Software

If you’re looking for software to get started on wireframing, the following will probably suite your needs.

Axure for PC
OmniGraffle for Mac (+ templates)
Protoshare for online access

ABOUT THE AUTHOR(S)

User Profile

Constantinos is employed as a Creative Director for Tribal DDB Athens. In his ever dwindling spare time he works on the development of UX Magazine and Joblet. You can find out more about him here of follow him on twitter.

Add new comment

Comments

58
64

I recommend MockFlow by Produle. At the moment this is a cloud based product but Produle have recently announced a desktop version will be released in 2010. In addition to the basic setup you also have access to loads of free templates in the mock store including iPhone, facebook and many other GUI elements.

http://www.mockflow.com/

51
74

I definitely vote for Protoshare. Been using it about a month after trying many tools listed about. The biggest difference in these tools web or desktop is whether they see the review team as just an internal design group or can incorporate client review and feedback.

I love some of these other tools but I need to be able to assign different team members as well as let the clients see only their specific projects.

Thanks,

Steve

49
72

Constantinos,
Thank you for mentioning ProtoShare in your post! We have come a long way since May to make online, collaborative prototyping even better.

Users are able to create simple, yet interactive, grey-box wireframes and even complex prototypes within the same application. We also offer the ability for users to create custom components for their needs.

We will also have another release out before the end of the year. Feel free to share your feedback.

Cheers,
Andrea
@ProtoShare

49
62

Another great wireframing tool is Pencils - A free Firefox Add On:
Pencils for Firefox

46
70

Just wanted to share a link concerning using Visio as wireframing tool that I stumbled upon recently:

http://www.guuui.com/issues/01_06.php

Here you can find stencils for wireframing and a description of how to use multiple backgrounds, export HTML etc.

53
68

Great post. Don't forget MS Visio which is actually quite amazing as wireframing tool: You can define your own backgrounds, you can have several layers of backgrounds (e.g. one for global elements like navigation, one for section specific elements etc.) and it is incredibly easy to define your own stencils (i.e. symbol libraries that can then be dragged and dropped onto your pages).

In my daily work, I use Visio for wireframing during workshops with customers and displaying the result immediately on a projector; great for discussing content and layout : )

Finally, it is easy to export an HTML-version that can then be used as a rough prototype (in pretty much the same way as Axure can export an HTML prototype). In the export process, you can choose to include e.g. zoom navigation or other interactive tools to be used when displaying and demoing the prototype.

I cannot say that I'm usually too much of a fan of MS' products - but Visio shines on its own IMHO : )

52
66

Another wireframing tool is HotGloo: http://hello.hotgloo.com

54
71

Another wireframing tool is WireframeSketcher: http://wireframesketcher.com . It's an Eclipse plugin but also work in Aptana and Zend Studio. Runs on Mac, Linux and Windows. It has some distinctive features like storyboards and master components

56
59

Thanks for ur help.

57
68

Thank u for ur valuable guidlines.

51
62

I'd like to share the article I bookmarked a week ago. I've found it quite interesting. :)
http://boagworld.com/design/the-7-wonders-of-wireframes

54
59

I'll add another vote for Balsamiq Mockups as a wire-framing tool. It's actually faster than sketching, and then you can bind the exported images in a faux-interactive clickable PDF deck.

My customers eat that up!

54
69

Balsamiq Mockups is a great wireframing app: http://www.balsamiq.com/products/mockups

54
65

Thanks for the sharing. I think you can add one more Flickr group http://www.flickr.com/groups/ilovewireframes/. Also I think ForeUI should be listed in the software list, it works for both PC and Mac, providing very cool features.

55
61

ForeUI is great, thanks for the tips :-)