Of all the programs I’ve tried for wireframing and page design, I think I like Axure RP Pro the best. I’m only got the 30 day trial version, but if I do much more design work, I may buy it. The price is a bit steep at $589, but I’d rather pay that than $399 for Fireworks.
I think I actually prefer Inkscape to Fireworks, and it’s free. Positioning is much easier. My one gripe is that it uses bottom up vertical positioning (the bottom of your page is at Y=0.) So for detailed page layout, I think Inkscape would be my program of choice. But for wireframing, I’d choose Axure. I’d be glad to hear any other recommendations, tips, or comments.
Here are the tools I’ve for website prototyping:
- Microsoft Word & Powerpoint - very blunt, but powerpoint can be useful for quick, simple pages.
- Gimp - not at all cut out for it. Not being able to draw a box is a nonstarter.
- PaintShopPro - This is still a nice graphics program, but creating text in a graphics program isn’t fun.
- Fireworks - I was impressed at first, but then very quickly frustrated. Maybe if you’re a Fireworks pro.
- Inkscape - very impressive open source tool. More for design than quick prototyping.
- InDesign -
- FrameMaker -
- Acrobat -
- Smartdraw - very limited except for basic charting. I wasn’t even happy with it’s sitemap, and would rather use a flowchart or class diagram to create a sitemap
- Axure RP Pro - this is in the sweet spot and my tool of choice for now. It’s not the way I’d prefer to wireframe, but it does a good job of basic layout.
Axure generates HTML from it’s drawings, instead of PNG like Fireworks or SVG like Inkscape. It is saved by default in a proprietary format. Axure has features for adding text, images, rectangles, placeholder “X” boxes, lines, and basic HTML form components, inputs, buttons, checkboxes, selects, textareas, etc, as well as simple menus.
I’d like to see more details for boxes with color, rounded corners, etc., but keeping it simple is actually an advantage when prototyping. Using a design tool like Inkscape, it is easy to get distracted with pixel perfect placement and colors. Form elements save time and lend realism. A reasonable grid is enabled by default, and is unobtrusive. Table layout makes things easier than using “guides” like in Fireworks.
Object grouping is a blessing, and huge timesaver. You can quickly create a box with label, input, button, and description, group them, and move it around as a widget. This is the must-have feature for a layout tool. Maybe Fireworks has it, but I couldn’t find it.
Ordering is also a nice and easy to use feature (one you learn the shortcuts: e.g., CTLR+SHIFT+[ .) By ordering they mean Z-index, or what’s on top. It’s much easier to get to elements than in Fireworks as well. I’d still like to see a map panel where you can select an element or group, even if it’s hidden.
Selection, editing text, and other little things are much easier with Azure than Fireworks, which is a usability PITA.
Another feature which I haven’t explored is annotations, which can cover requirements and implementation of page components. Using a series of rectanges, I broke down my pages into components, and I can track details such status, risk, benefit, stability, target release, and assignee. If I could integrate that into my PM application, it’d be a blessing.
Things like Navigation list are relatively small, but the weather widget, map widget, directory search, etc. are features that can be tracked from the page design. With a non-technical manager or client, it would be really nice to be able for them to point at a section of the design screen and get information about who is working on it, what their status is, and when it’s planned to be added to the site. It would really benefit in an agile group enviroment.
Oh yeah, page notes are cool too. And they don’t clutter the page. In Inkscape, I call out to textareas outside the page for comments, but this is much nicer.