⌙ Tools , Web development

Creating wire frames and mockups

Rolf

Communicating web concepts for user experience and site structure is a challenge. Wire frames and interactive prototypes are great for this, and over the years, I have been using those with many designers and developers in a variety of web projects. But creating and sharing such mockups still is a laborious task, so I went around the web again to look for a tool that truly makes that task easier. Pidoco seems to offer the best way forward for me.

Supporting the design process

So far, I have worked with a variety of tools to document site structures, page mockups, use cases, and interaction flows: pen and paper, Powerpoint, diagrams (Chartist, Visio, Dia), HTML pages (Dreamweaver, plain text, even out-of-the-box Drupal and Typo3 sites).

The design process ends up being frustrated on at least one of these criteria:

  • Sketch a mockup with standard page elements: Powerpoint and HTML pages suck.
  • Demonstrate the navigation through the site: pen and paper and diagrams don’t work.
  • Collaborate with several design team members, all on different platforms: only pen and paper in a workshop setting seems to do that
  • Share the results with the wider project team, or even a wider general audience: usually this is done with static images via email or on a website.

I took Saturday afternoon to find and compare a couple of “wire frame mockup tools”, and to review the whole work flow around design. Last month, Andreas Norman compiled a nice list of 12 tools that offered a great starting point.

My basic requirements:

  • Should be usable on all platforms: I’m using Linux, designers usually want a Mac, and project clients often are still stuck on Windows.
  • Should not require software installation, or expensive subscriptions to participate for people outside my organisation.
  • Software as a service (SaaS) is ok, if I can take my data with me.
  • Integration of the whole work processes with how I work would be great, specifically allowing offline work on designs.

There are two I will evaluate in a pilot project (Pidoco and WireframeSketcher) and a few I’ll keep an eye on (Balsamiq Mockups, iPlotz, and Pencil Project).

Reflections

  • The sketchy style of such tools clearly conveys it’s just a design and a work in progress, but it also makes it feel a bit like there’s no effort in there. I definitely like the more “formal” styles.
  • Once you build an interactive model, you really would like the tool to “just create the site”: it would be great if a mockup model could be used to configure an existing CMS, or generate the basic MVC classes in a framework of choice.
  • Only WireframeSketcher seems to have a simple way to create “Lorum ipsum” dummy text. It would be great to see that in more of these tools.
  • None of the tools offers process or work flow design features. Wouldn’t it be great if you could create diagrams to illustrate the flows through the pages?

This is just an overview of looking at a handful of tools from a slightly longer list. I discarded all Windows-only or Mac-only products from the start. I know there are software development tools (especially for Java) that help move from interface design to code, but I haven’t seen such tools for web-based projects yet.

I’ll probably be looking around again in a few months, so any suggestions for other tools, services and approaches are more than welcome!

Reviews

Pidoco

  • An online suite of modules to visualise, create prototypes, and review; can also work together in real time.
  • No offline versions, but the export feature offers a simple way to get all pages in (x)html and svg to publish for instance on your own server.
  • “Walk the talk” demo, using the wireframes for their own website. Cool! Uber-cool would have been to use those wireframe as the company website 🙂
  • Pricing is from $7.50-$30 per month with a year-long subscriptions, but it’s not quite clear how many people will have access.
  • Easy to quickly get first results, and to use “content overlays” to set up interactive navigation. Limited collection of widgets and standard elements
  • Use Case feature to highlight navigation between a sub-set of all pages.
  • HTML/javascript

Verdict: worth to try in a next project. These guys do a few things right: preview without registration; the export feature is wonderful; real-time online collaboration is great to have; and the Use Case repository could become a very useful feature (but doesn’t do a lot at this point).

Wire frame Sketcher

  • Support for story boarding and master templates, but with a limited set of standard items. I like the style, but there are very few formatting options to tailor it.
  • Offers free licenses for open source developers and reviewers; and if you’re a Java developer, it can import existing SWT dialogs to as mockup designs.
  • No interactive options, limited presenter mode (no online presentation).
  • Will need to export each image (but perhaps using Eclipse’s build options can automate creating and uploading of images).
  • Eclipse plugin: great to integrate in my work environment (have sketches included in Mylyn task contexts, use version control to share designs within my organisation), but basically preventing collaboration on designs.

Verdict: maybe worth a try in a project, and at least at hand in my Eclipse workspace now. Not really answering my needs, except the integration with how I work.

Balsamiq Mockup

  • Has a true sketchy nature, including “sketchy” import of images
  • No page “templates” or master layouts
  • Has a good preview mode for meetings where everyone is in the same room, but not for online meetings (the web-based version that they’re working on might cover that)
  • There are plugins to integrate it with some wiki software (Confluence, Jira, Xwiki, Fogbugz), but “our license agreement specifies that we as Balsamiq employees are the only people allowed to build such integrations.” Very bad policy.
  • They seem to have relaxed requirements for “do-good” organisations to get a free license; otherwise, it’s $79.
  • Adobe Air

Verdict: not suitable for me yet; the upcoming online version might change that.

iPlotz

  • Available online and as desktop application.
  • Page snippets and public projects help to extend the standard version.
  • The online version has a project management environment (yet another one… no integration with other trackers or to-do managers).
  • Seems to be limited in formatting options. No auto-snap (aligning objects to each other) while editing. Can’t get the tab bar working interactively.
  • Adobe Flex

Verdict: maybe will check again in the future, but doesn’t feel right at the moment.

Pencil Project

  • Open source
  • No library of shapes for standard stuff (of course: open to add stencils)
  • Seems to be a limited diagramming tool.
  • Firefox addon

Verdict: revisit again later, for now too limited in its features. But open source!

ForeUI

  • Offers a few drawing styles (hand drawing, more formal drawing, Windows, Mac)
  • Interactive simulations based on DHTML, no additional effort on side of occassional participants, but no support to upload the HTML automatically.
  • Mock text consists of gray lines instead of “real” dummy text, doesn’t work good enough for me.
  • Adding interactive behaviour quickly becomes messy: there is no copy&paste or sharing between pages, and keeping tabs/menus and their linked actions accurate quickly becomes a hassle.
  • One-time license is $79

Verdict: not suitable for me, Pidoco does most of it too, and does it better.

JustProto

Verdict: an online service, but without screen shots, a tour, or comprehensive information, and I didn’t want to sign up to find out more.

ProtoShare

Verdict: not suitable. The answer to the question “How can I backup my data?” basically already disqualifies ProtoShare. Trying to export the example project resulted in a Word document of 50 pages, and it just feels too heavy.

Flairbuilder

  • Several widgets are actual true widgets: they are only really visible in preview mode. Watching a random YouTube video actually is not what wireframes and mockups are all about.
  • Anyone wanting to view designs, needs to install a (free) player or this software.
  • Adobe Air

Verdict: not suitable for me.

OverSite

Verdict: a Java-based product, but somehow the web pages and screen shots kind of push me away from this tool.

 

chevron_left
chevron_right

Join the conversation

comment 15 comments

  • Hi Rolf,

    Thank you for this extensive overview of wireframing tools. I am the author of WireframeSketcher and I am constantly looking for ways to improve the plugin. I am planning to add more export options, a flow editor and other things in the future however real time collaboration probably won’t be the strong point of WireframeSktecher. You can always use version control but it’s probably not what you are looking for.

    I didn’t quite get the point about formatting options. I’d be grateful if you could give me more details on what you were expecting to find. You can write me at peter at wireframesketcher.com

    Thank you,

    Peter Severin

    Reply

    • Hello Peter,

      Honored to see you comment on my review 🙂 Let me try to clarify formatting and collaboration:

      Formatting

      Looking through my notes, it was about the first thing I ran into, but it’s actually quite limited. The contrast between the white background and the gray used for "selected" tabs, accordion, buttons, etc is too weak on my laptop screen, and I didn’t find a way to change that. I’d be helped with a preference setting for "selected" and "disabled" elements.

      A few other things I only discovered after experimenting a bit more: using panels to create background colours, the wiki formatting options in texts, and being able to add a word in an image placeholder.

      Collaboration

      I can use version control and Eclipse-based tools with some of the people I work with, and then also enjoy all other benefits of Eclipse and Mylyn. And whatever comes next: you wrote about possible integration with Xmind, that would be great to organise my conceptualisation work!

      But it will only work if I have a one-click "create a presentation" option (for instance, "export everything to images, and publish on server"), to share the results to others.

      Reply

  • Rolf,

    Thank you for your feedback regarding ProtoShare. I will be sure to share this information with our development team for review. Once done with the wireframes, many teams discard them, so other than the export documentation, the work stays in the cloud. However, we are always looking at new offerings and capabilities for ProtoShare, so I hope we will be able to address your concerns in the near future.

    Best of luck with your projects!

    Cheers,
    Andrea
    @ProtoShare

    Reply

  • Hi Rolf, thanks for including Mockups in your review. I wanted to explain why we are currently not allowing 3rd parties to integrate the web version of Mockups with other systems. The main reason is that the app is not ready for it. Integrating Mockups with other systems requires quite a bit of work right now, and we don’t have time right now to help others in their integrations (we are a very small team). We are moving towards a public API for the web app, which I expect to have ready sometimes next year. In other words, hang in there! 🙂

    Reply

  • Hi Rolf

    Very comprehensive coverage of the wireframing tools that are available out there. I’d just like to add Creately (http://creately.com) to this list as well. Give it a go, you’ll find that it meets most of your requirements for a useful wireframing tool. We’d love to know what you think.

    Cheers
    Charan
    Creately.com

    Reply

  • Hi Rolf,

    thanks for testing pidoco and mentioning us in your cool list of tools.

    Just wanted to add to your review that pidoco° has also some nice usability testing features included. Because our aim is not only to support the prototyping stage of development, but the complete User Centered Design process.

    Therefore you can test your wireframes (or your PSD-Screenshots to which you can add click areas for interaction and usability testing in pidoco°) with expert reviews or a fully one2one remote usability test session in which testuser and moderater are connected via shared screens and a phone (all that’s gets recorded for later replay). So with pidoco° it’s plug&play usability testing!

    By the way, for easy access you can test our web based wireframing tool for 31 days for free (non-recurring). So check it out and improve your interface design >>>

    Thanks and kind regards

    Michael from pidoco°

    Reply

  • Thank for the sharing,

    These tools may help in designing the site structure and system interface but I hardly find that any clients who are looking for web design care about it.

    All the need is a beautiful design that matches what is in his mind. Most of the time showing portfolio and image mock-up to them are good enough.

    What I think is, using these tools are like double work for me in web design but quite handy in designing a complex applications with a lot of functions and buttons.

    George Lew
    Malaysia Web Design

    Reply

    • Hi George,

      Thanks for your feedback. I agree most people like to see a graphical design to judge a proposal, and that sometimes it makes no sense to put a lot of work in wireframes when you could just as well show graphic design mockups.

      I (try to) use wireframes for three main purposes:

      1. To illustrate more complex situations and flows (as you suggested too) and enable people to get a feeling for the interaction experience in an early stage.
      2. To communicate the requirements in the project team: it gives the designers more of a sense what needs to be designed, and the programmers what needs to be build
      3. To check we have a complete picture of the work to be done: do we know where to get the content from, how to present it, and what happens when clicking a button or link

      (And it’s because of points 1 and 2 I was looking for a suitable online solution that allows for more people working on the same wireframes)

      Reply

      • Thanks for contributing, yes, I did look at Balsamiq 🙂 And no, won’t be able to come to the OpenOffice Conference, have other commitments around that time already. Would have been an nice reason to visit Budapest again…

  • Thanks a lot for the tipps. Very useful information! 😉 Well done
    ____________________________________________________
    Webdesign in Muenchen: www . muenchen-webdesigner . com

    Reply

Leave a comment

Your email address will not be published. Required fields are marked *

Comment
Name
Email
Website

This site uses Akismet to reduce spam. Learn how your comment data is processed.