Wireframes and Sitemap Tools

I’ve been doing IA for a while now and have never really managed to get together a really nice set of tools. I started off putting things together with Illustrator and Photoshop. It made sense to create the basics in the same packages that the designers use. This worked for a while but it was difficult to keep track of what layers need to be turned on or off for different pages. Plus, when you’re doing quite complex systems and you want to change multiple instances in multiple places, this can be a nightmare. They did always look pretty though. Next up was Visio, this seems to do everything I need but the interface is so clumsy and difficult to use. When you get quite complex you feel like every time you want to move a shape somewhere, the computer has to have a good long think while it catches up with you. I switched to Mac in this period and decided to give Omnigraffle a go. You can create really attractive things very easily. But, like Illustrator, you run into problems when you want to edit multiple instances of the same object. You find yourself repeating actions like copy-paste. Plus, none of the producers I work with use Macs so they can’t update my wireframes and sitemaps (not everyone would say this is a bad thing, mind). Then I jumped to Flash to build the wireframes, which worked really well. Using movie clips I could update 100 frames at the same time, very liberating. It runs fast because it’s used to crunching much more vast and complex assets. Needless to say this didn’t last, the producers I work with have no no reason to learn Flash and don’t want to have to fork out the license fees. I had a whole framework planned out in my head that would take UML/XML and generate pretty site maps on the fly or create dynamic wireframes. Needless to say that didn’t last. I even started building wireframes using MySQL & PHP with frameworks like Symfony. This is top fun if you are of a geeky persuasion but takes far too much time. More recently I started trying to get back into Visio. There is a plugin from Intuitect that, to me, is the holy grail of IA tools. Although, currently, the system is riddled with bugs and usability problems and is nowhere near production grade.

So, right now I’m left with trying to work with Visio. Here’s some criteria of what I’m looking for:

  • Responsive and fast, even when doing complex stuff
  • A central data store that holds all of the system’s meta data
  • A means of editing patterns, symbols, pane (call them what you will) from one single place

Nice to haves would be:

  • Ability to output as HTML prototype or click-through.

And that’s it. It’s not much to ask.

The best tools I’ve ever used tend to have a stick of lead running through them.

Anybody got any other suggestions?

6 responses to “Wireframes and Sitemap Tools

  1. Pingback: Movies and Film Blog » Wireframes and Sitemap Tools

  2. Have a look at these Mike, I use Intuitect too but its full of bugs and bombs so often – I wanted it to work so badly but no. The support is pretty weak too.

    Axure – http://www.axure.com/
    Swipr – http://swipr.com/
    iRise – http://irise.com/

    I know axure is used in loads of places though I still use Visio and Powerpoint to distribute as we are a PC based Microsoft partner…this may help?

  3. Every tool has its trade-offs. In the last couple years, I’ve come to rely almost completely on Adobe InDesign for my diagrams & documentation. Right now I’m working with 150 + pp deck, and I use these features everyday:

    I divide the page into 3 spaces: wireframes/screens; UX documentation; functional specifications.

    Drawing tools + table maker for very quick wireframes.

    As the design is developed, wireframes are replaced with linked psd files, allowing the ID to iterate, and the document updates the graphics.

    As the user experience is documented, I add notations on top the graphic. The producer follows the notations to document the functional specs. For each page, I export a text block as a “story” so producer can work in the deck simultaneously, using InCopy to add & edit text.

    I also use DPT tools InDesign plug-in for cross-references, to create easy links among all the screens. At any given point I can generate a table of contents, then export an interactive pdf for everyone on the team (the business side of this project is mostly in Ohio).

    No other software gives me this range of features for rapid development. A salesman from iRise wants to pitch that product, so I’ll be curious to see how that compares.

  4. In my experience, the degree of visual refinement of wireframes has proven critically important for getting the right feedback and directing attention to key elements/interactions on a page. Due to that, the ability to produce beautiful (or at least clean) WFs drives my tool choice more than the ability to make them quickly or interactive.

    I found that working in Visio (also Axure) was super fast and allowed for quick turnaround, and I liked the idea of prototyping with Axure. However, I found that when presenting such WF to clients their eyes just kind of glazed over and they tuned out, leading to crappy initial feedback and the request for feature changes during the more costly graphic design or development phases. So that sucked…

    With InDesign I’ve had much better results, and really do believe that it’s mostly due to the clean and organized look that it can produce. It just seems that clients get excited and understand what I’m trying to convey, so their feedback is on target and revisions are very productive.

    Obviously you might not have the luxury to choose your tool based on a reason like that, but I just thought it needed to be said that the important thing when choosing a tool isn’t always its feature set or speed.

    In fact, I’ve had the very best of results by drawing WFs on a whiteboard and then taking photos of them which I annotate. I think the super rough look allowed clients to understand that WFs are up for discussion and that it should be a collaborative process with nothing set in stone. I’d do this all the time if possible, but it’s actually quite time consuming to revise such drawings and also makes working with other IAs/IDs a challenge. So InDesign is the happy medium for me.

  5. I think its down to the context in which you work as you say Luis. I am in a corporate environment, everybody has PowerPoint – I can cut and paste straight from Visio and supply them with a file they can see on their screens and feedback on. I wrote about it here – http://userpathways.com/2008/02/11/living-wireframes-using-office-live/

    It isn’t sexy, I admit it, and yes eyes do glaze over but it works in this goldfish bowl – that isn’t at all like the real world! However as you are all in agency environments I can toally see why you use products that look and act in better ways collaboratively and engage the client. They need to feel excited by the design even at wireframe stage….

  6. stevetompkins

    jimc0…can you post a sample of one of your Indesign docs? I would like to see it in action… sounds interesting.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s