People’s Software Company

axure widgets

Originally uploaded by lisa.williams

I’m a big fan of Joel Spolsky’s Painless Functional Specifications. I think that if I can’t explain what every button, link, and tab actually does when you click it, I’m not paying the developer who’s implementing it enough respect. Mind reading is not part of their job description.

But when you want to get feedback from smart people (like TechStars mentors), you can’t really expect them to read your long and mostly text-based spec. How can you give them the sense of what you’re doing rapidly, before you’re all done with your project?

I’ve been experimenting with doing quick-and-dirty prototypes with Axure RP, a Windows-based wireframing and rapid prototyping tool.

From a wireframing perspective, Axure is a bit like Photoshop for web applications. Instead of drawing a text entry box or a checkbox, you drag and drop them from a sidebar. You end up with something that really *looks* like a web app with very little effort.

Better than that, those checkboxes you drag n’ dropped onto your wireframe aren’t just pictures — they know they’re checkboxes. You can check and uncheck them. Text entry boxen let you actually enter text.

Once you’ve completed your wireframe (or even parts of it), you can associate behavior with the elements on a page. If you dropped a hyperlink on the page, you can add the URL so that when you run your prototype in the browser and click, it will take you to the page you specify. Buttons can be configured so that when you click them, they bring up a popup window (presumably with contents you drew in Axure). You can even do simple if/then logic on some components, like “if checkbox_friend and checkbox_location are checked, launch message_confirm_popup on mouseclick for send_button.”

Now, I want to point out that what you’ve got at that point is PotemkinVillage.com. There’s no real code back there — Axure is not an IDE, although in look and feel it reminds me very much of some Visual Basic graphical IDE’s I used back in the day.

That said, I do believe that making a prototype this way has value beyond giving you a way to demo your idea to people before your code — or at least the user interface — looks pretty. Having to actually lay out all those features and realizing that your canvas is only so many pixels wide really forces me to simplify and be ruthless about cutting features that aren’t really vital.

Once you’re at a point where you have something you’d like to look at in the browser, you can hit Generate Prototype. Axure will create a bunch of folders and files, along with an index.htm file corresponding to the front page of your app. You can point your browser to this file when it’s local — sitting on the hard drive of your machine — or you can upload the folder and its subfolders and files via FTP to a web server and see it that way.

A nice addition to Axure would be the ability to generate chunks of CSS, or helping me output a folder of files of graphical elements to be used when the real code gets built

Axure is pricey at $600, but they have a thirty day free trial.

Okay, okay, I can hear the howls of outrage from here. I’ve been told that OmniGraffle is a similar app for the Mac, so if you are a Mac person and aren’t using Parallels, you might check it out.