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.
- 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!