Wireframing ahoy!

21 May 2009 | Bookmark or Share | 15 comments

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

Comments

Anney D. 31 May 2009, 06:02 (Permalink)

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.

huphtur 29 June 2009, 08:03 (Permalink)

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

Bree R. 20 July 2009, 09:48 (Permalink)

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!

Iflexion 24 July 2009, 04:01 (Permalink)

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

Tonny 24 July 2009, 09:23 (Permalink)

ForeUI is great, thanks for the tips :-)

Cool 3 August 2009, 00:22 (Permalink)

Thank u for ur valuable guidlines.

ecommerce hosting 11 August 2009, 03:37 (Permalink)

Thanks for ur help.

Peter Severin 25 August 2009, 16:50 (Permalink)

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

Hannes 27 August 2009, 03:54 (Permalink)

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

Bobo 11 September 2009, 03:41 (Permalink)

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

Bobo 11 September 2009, 03:53 (Permalink)

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.

Hammy 29 October 2009, 19:17 (Permalink)

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

Andrea 11 November 2009, 15:35 (Permalink)

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

Steve 21 December 2009, 14:49 (Permalink)

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

Matthew Kay 2 January 2010, 17:39 (Permalink)

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/

UxMag