One Tip a Day

Doing presently wireframes/mockups for a project, I checked around the tools to do that.

I tried 2: Axure and Dreamweaver. Below the pros and cons I find to each of them

Axure
Pros:

• Allows to make quickly wireframe: drag and drop text boxes, form components…
• Numerous interactions (tabs; conditional events; hidabel panels…) easy to create
• Reusable components
• Easy to add comments visible in the output
• Export HTML
• Export specs in doc (But I did not try that part)

Cons:

• Generated HTML is definitly not reusable (made up of images, and absolutely positionned divs)
• Price (about 589 USD)
• Not designed to implement even bits of design (which is fair, it is a wireframe tool)
• Tables integration weak (can put only text in it, no form elements, no buttons…)

Dreamweaver CS4
Pros:

• Also provides nice user interaction tools (tabs, menus, accordeon) thanks to the integration of Spry (a JS library)
• Also provides reusable components (assets) (which are copied over all files whenever saved – slightly less user friendly than Axure, but does the job)
• Initial wireframe HTML can be reused first for mockup design, then in the project dev

Cons:

• Building wireframes is not etremely fast (you’re closer to the html code, no really drag and drop)
• Price too (about 573 EUR) – but is definitly more than just a wireframe / mockup design tool

Finally I’d rather choose Dreamweaver: wireframes are slightly longer to build, but it remains reasonnable (the spry integration is quite cool), and the mockup can be reused for later steps of the projects. And for about same price you’ve got more scope than Axure.

Tags: axure, dreamweaver, mockup, wireframe

This entry was posted on Friday, April 3rd, 2009 at 10:56 am and is filed under Tools, html. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.