Wireframe and storyboard tools
I’ve been playing with the idea of getting into the field of “Information Architecture (IA)” for over a decade, ever since I first got my hands on “Information Architects,” by Richard Saul Wurman and Edward R. Tufte’s “Envisioning Information,” both rather beautiful books. However between 1997 and 2005 I haven’t done much with the idea, besides keeping an eye on how the visualization tools are developing.
Later, when I was working on my MLIS between 2006 and 2008, the field came up again as a possible direction for me to take. For a number of reasons I had to get my degree fast, so I didn’t have enough time to take the summer week-long intensive conference/workshop ran by my college (UW) that sometimes focused no IA. I missed an opportunity there, but for one of my classes I created a simple little website titled “Information Architecture Resource Guide.” As I haven’t updated it since its creation in 2007, it is woefully out of date, so I do not recommend the site as modern resource. Nevertheless it has a list of books, sites, blog that can be useful if you doin’t mind that the missing recent additions.
Towards the end of my Masters program I spent a little bit more time in exploring what Information Architects do. I’ve been reading Jacob Nielsen’s Alertbox at least since 1997, but now I subscribed to the Information Architecture Institute‘s email list too. I was on it only for half a year as the discussions were bit boring. Half of them were about terminology and pinning down exact definition for terms that the people obviously had different understandings of. The other half was talking about practices that were unintelligible to me as a non-practitioner of the art. I know it was my fault that I didn’t devote enough time to learn the basics. But it bothered me that they talked a lot about wireframing and storyboarding and not once did I hear mentioning what tools they used for them. I am a hands-on kind of person and learn best by doing. But I didn’t put the extra energy in to finding out what tools should I use.
Now however I will be working on a redesign of a client’s website. After the initial discussion with the client, where I learned why the redesign is needed and what the major sections of the revamped site would be, I offered doing wireframing and storyboarding. So I finally crated myself an opportunity to learn these techniques by doing. Just in case you don’t know what I am talking about here are some basic definitions:
- A wireframe, also known as page architecture, page schematic, or blueprint, is a highly simplified sketch of the important information in a page. The goal is to reflect the relative importance of different elements, including the content and the navigation.
- A website storyboard is a visual representation of your website’s structure. It maps out all the components of your site and how they inter-relate. Creating a website storyboard can help you plan and organise your website and even plan the internal linking structure between pages. Using a storyboard you can plot a visitors path through your website to find your most important pieces of content.
After all of this introduction, here is what you probably came for this page. I did a little search for free and/or inexpensive tools. Here are the results of my research. I found three lists of wireframing tools from 2010:
- Tripwire Magazine’s top 15 list from April 2010,
- Mashable’s top 10 list from July and
- Webification’s top 23 list also from July.
The last one is not just the most comprehensive, but also includes a handy table at the end with the prices and scores. Two of the free tools got “excellent” score there by the editors: Pencil and Lovely Charts. Both shows up on the other two lists too. So does the third recommended free tool: Mockingbird.
Next, I started to look for similar lists about storyboarding tools. I found only list, which seemed comprehensive and annotated, although only barely: Alejandro Cuervo’s blog entry from January at queleimporta.com has basic notes no each tool but it’s a good start. The other useful resource is the discussion about “What are the best online tools for storyboarding a website?” on Quora. Both sources mention Pencil and Mockingbird as good, free, storyboarding tools. I consider it a simple blessing if the same tool can be used both for wireframing and for storyboarding. So the circle of tools to check out in depth has been narrowed to these two.
Mockingbird’s main advantage over Pencil is that it allows online collaboration; i.e. it is online thus platform independent and it allows more than one person logging on to the same wireframe and edit it. Their free plan allows only two users doing only 1 project with up to 10 pages. (They also have 4 levels of other plans ranging from $9 to $85/month allowing more users/plans/pages.)
Pencil can be used as a Firefox add-on or as a standalone application (for Linux and Windows). Thus it is platform independent to an extent. But it is not an online tool, you are saving your wireframes as files on your computer. There are no limitations on the number of pages or projects, but online collaboration can only be approximated by sending files back and forth. Nevertheless I tested this first, because I couldn’t sign up for Mockingbird, see below. Not a good first impression: