December 23, 2010 by MMIT
It seems that more than a few library staff  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 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 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 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 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
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.
- 10 Completely Free Wireframe and Mockup Applications
- Don’t Create A Social Frankenstein
- Website Design – Library Success: A Best Practices Wiki
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.