Wireframing tools for your next library website

Research tool mockup
Some rights reserved. Image by justgrimes on Flickr

It seems that more than a few library staff [1] are involved in website and web service design and it’s becoming a more integral part of information services work. Wireframes, mockups and even prototypes are vital steps in initiating a new web service but they’re also a useful way to ensure discussions about technical projects such as web services don’t get held back by technical jargon.

There are a million and one ways to wireframe a website, from using a PowerPoint slide (or even a notepad and pen) to specialist software such as the Balsamiq suite. Needing a quick mockup for a new project provided a chance to to check out what’s currently out there.

Though these terms are sometimes used interchangeably, I tend to think of wireframing, mockups and prototypes as gradual steps in the process. A wireframe is the initial step of setting out a black and white layout of a website.  A mockup will fill out some of the details of the design, including colour and text, while a prototype is the stage where functionality is added to become a more fully realised version of the website.

I don’t always need the depth of features that some of the tools offer, so I’ve mostly focused on the ease of use and free (as in beer) criteria.

MockFlow

Mockflow has a very nice interface, lots of drag and drop components to choose from and, best of all, a layout builder. This was an option that was surprisingly lacking in some of the other tools.  The free basic edition is limited to 1 mockup (with multiple pages), and 10 MB storage limit. Real time collaboration is a feature that puts MockFlow ahead of the pack and this is currently my personal favourite.

Best for: quick and easy wireframes and mockups, collaboration, rapid application development.

HotGloo

HotGloo has quite an advanced drag and drop interface, with layers, versioning and even interactivity but unfortunately no templates to help  get started quickly. It also requires the latest version of Flash which can be a pain. The free account offers 1 project with 10 pages and 1 user.

Best for: live demos and fully-functional prototypes with multiple web pages

iPlotz

iPlotz has plenty of drag and drop components (even tag clouds!) for web applications in an interface crowded with options.  It also has options for iPhone, iPad or Android mockups but, again, no templates. You can save frequently used components as ‘snippets’ or create master pages for reuse. Pages can be previewed in various contexts, annotated, even generate HTML (albeit not the cleanest code you’ve ever seen). You can share the wireframes and attach tasks to them, making this a good tool for collaborating on web designs. The free account includes 1 project, limited to 5 wireframe pages.

Best for: collaborating on site design, developing for mobile devices, tracking different versions, assigning tasks, generating sneaky HTML. Although beware, the default font seems to be set to Comic Sans.

Gliffy

Gliffy doesn’t require signup to get started, though of course this means you can’t save and return to the wireframes you’ve created. As well as website user interface design, Gliffy is a tool for creating charts, floorplans, business processes. The free basic account for Gliffy allows you to create 5 public (yes, that’s right: public) diagrams, and this is understandably a deal-breaker for a lot of situations.

Best for: Site maps and other diagrams needed quickly, quick and ready mockups (with non-commerically sensitive information), public showcase designs

Draft-it

While Draft-it isn’t the shiniest of options, it’s quick and easy to use, allows you to add functionality to objects and comes with various template options and ways to share prototypes with colleagues.  Use Case Steps are the way you can create run step-by-step through your draft which is handy for demoing your work.

Best for: the most rapid of rapid design, multiple page layouts.

Honourable mention- Pencil Firefox plugin

If you’re using the Firefox browser, Pencil puts a  ‘shape collection’ of drag and drop elements and other wireframing functionality just a right click away.

Further reading

 

1.According to the CILIP Defining our professional future survey this year, 32% of information professionals use web publishing skills and 18% use Database design skills in their current role — 71% expect to be using these skills (if only a little) in 10 years time.

Advertisements

5 Comments

  1. Hi Tom, yes I’ve heard good things about OmniGraffle and the templates available for this. Any particular stencils you can recommend?
    Similarly, there are wireframe templates and add-ons for Visio (for those more Microsoft-inclined) but I haven’t had too close a look at these yet.

  2. Nice list and review of these tools. Have you done a review of LucidChart? Like Gliffy, it’s a general diagramming app, but also can make great wireframes and prototypes. Unlike Gliffy, real-time collaboration is perfect for clients/teams and all wireframes are private.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s