Wireframing ahoy!

We take a quick look at some wireframe resources and tools

Article No :417 | May 21, 2009 | by Constantinos Demetriadis

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

Comments

January 2, 2010

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.

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.

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.

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

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

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.