Tools and Ideas for Wireframing

CarDomain Hi-Resolution Wireframe

CarDomain Hi-Resolution Wireframe

People always seem to ask what tools or software do you use for creating wireframes, so I thought I would make note of a few options out there. I have used some, but not all of these so a few of my comments and opinions are going to be based on demos or opinions from colleagues with applied experience. This list is by no means complete and it’s possible to create some kind of wireframe or diagram in many applications not intended for that express purpose. Although many of these programs can also be used for prototyping, I’d rather save that topic for another day. In the meanwhile Dan Harrelson at Adpative Path has a nice list of Prototyping Tools in his article. Many are mentioned in this post since they do double duty.  Here then are a few products and approaches for consideration.

White Boards – This is the analog solution for a digital problem and benefits greatly by virtue of its simplicity and accessibility. These are really just big white boards that can be marked up using colored dry-erase pens. You can also put Post-It notes right on them and photograph/scan in the results for distribution, review and archiving. These are really fantastic for very early phase ideation and concept work. One advantage they have is that nobody sees the work as precious or literal so ideas can evolve rapidly in brainstorming sessions and everyone can participate whatever their role or competency with design software. One of the best examples of this that I have ever seen was in a huge corporate board room with 3 walls cover floor to ceiling with white boards. The forth wall was all windows since it was high in a downtown skyscraper. I have seen some pretty clever interactive white board software solutions out there and some companies such as Smart Tech offer dedicated hardware and software products. This is something I would encourage you to investigate on your own should you have an interest.

Pros – Cheap, easy and flexible
Cons – Not digital so artifacts must be captured and converted so they can be distributed over a network.

http://www2.smarttech.com/st/en-US/Products/SMART+Boards/Front+projection/

Visio – This Microsoft product is an old standby and workhorse for the creation of wireframes and diagrams. It is easy to learn and use, has lots of built-in controls, images, shapes, connectors and other elements for rapid inclusion and exports to several common formats. In most cases though, I think it has been eclipsed for wireframing by many of the other applications in this discussion. In my opinion, its best uses now are for diagramming or charting things like workflows, data, networks and such. This includes pie, pivot, Gantt, PERT and organizational charts These types of tasks can probably be accomplished more quickly and easily in Visio than almost anything else. If you’re looking for clean, simple and fast, Visio may be your best choice. If you’re familiar with Unified Modeling Language (UML) Visio’s many built-in standard shapes will be a welcome feature.

Pros – Short learning curve and plenty of support resources available from Microsoft and elsewhere.  Speed and ubiquity
Cons
– At USD $259 retail for the Standard and $559 Professional editions, this can be a little pricey if you’re not using it a lot.

http://office.microsoft.com/en-us/visio/default.aspx

Balsamiq – This handy little program retails for $79 USD for the desktop version and has a wonderful hand-drawn look so that clients and other stakeholders aren’t distracted by designs that seem too polished or slick. It is easy to use and pretty intuitive. Balsamiq is a desktop app, but has an online version currently in Beta testing and scheduled for release in 2009. The program uses a proprietary form of XML called BMML and claims it would be possible to write scripts that would convert into actual code, although I have not tried this yet.

Pros – Comes with a decent library that includes over 75 pre-built controls for easy drag and drop functionality. If you need additional art (shapes, controls, connectors etc) not included in the library, you can either import your own imagery or download something from their community site Mockups To Go. Has a decent community site where you can ask questions, get advice etc.
Cons
–  Some limited export functions.

http://www.balsamiq.com/

Microsoft Expression Blend and SketchFlow – I have to admit that I had mixed feelings when I first tried these apps out, but have really become much more enthusiast as I have worked them and learned. SketchFlow is really the Wireframing tool where Blend is intended for prototyping and actually application development. True, they are somewhat limited to design and deployment using Microsoft’s proprietary WPF and Silverlight technologies, but I have found they do have uses beyond these as well. For example, some very nice wireframes and diagrams can be created with a very similar hand-drawn look to that of Balsamiq. They have a great library of controls and graphic elements that can be dropped in and customized very easily. These can be made interactive and shared with team members, clients and other stakeholders relatively simply so they can get a better sense of functionality without being distracted by look/feel. If you’re designing for WPF or Silverlight applications, having the software generate customizable XAML markup on the fly is a pretty cool feature and I’m sure is appreciated by the Dev-Team members.

So far Microsoft doesn’t have near the ubiquity with these technologies that Adobe enjoys with Flash, but give them time since they do seem to be pushing marketing and resources pretty steadily in that direction.

Pros – If you’re comfortable with HTML and CSS as well as the UI and tools found in many Adobe CS3 and CS4 applications, the learning curve for basic production isn’t too bad at all. Microsoft also provides some very nice training videos, a community and other resources for getting up to speed fast.
Cons
– Well, it’s pretty Microsoft specific so it’s hard to justify shelling out nearly $600 retail unless you’re going to be designing and developing projects using their technology. They do supply a free 60-day trial version, so if you’re interested, you can make a lot of progress with it during that time.

http://expression.microsoft.com/en-us/default.aspx

http://expression.microsoft.com/en-us/cc197141.aspx

Adobe Fireworks – Even though I originally came from the PhotoShop universe before Adobe acquired Macromedia, I have come to appreciate Fireworks for the unique tool that it is. My first impression was that it was attempting to compete directly with PhotoShop and in some respect that was true earlier, but it really has come into its own as a fantastic application for designing Web-based solutions. It also somewhat straddles the ground between wireframing, prototyping and design. While some people are likely to use it in the context of creating more finished designs for Website or other online applications, you can still use it to generate very clean and even interactive wireframes and diagrams. These can then easily be developed further into evolved prototypes and finished designs. It’s a very versatile tool. Like many of the applications discussed in this post, it could be considered a little pricey if you are just using it for simple wireframing. But for a retail price of $299 USD (upgrade for $149), you get a fully featured image editing and prototyping application geared for working with online projects. Of particular note is Fireworks ability to generate wonderful interactive PDF files for easy distribution, demo and review.

Pros – Tons of features and functionality to go well beyond simple wireframing. Common Adobe UI makes learning curve very short for those who are familiar with other products in the Adobe universe. It also comes with a really great library of UI controls and other elements for quick and easy use with your projects. It’s possible to add a fair degree of interactivity to these elements and your wireframes. It also has plenty of export options and Web optimization capabilities.
Cons
– If you already have other Adobe products such as PhotoShop or Illustrator, it may not be worth it to shell out more money for this application unless you are working heavily in Web and Interactive media.

http://www.adobe.com/products/fireworks/?promoid=121DJGSR_P_US_FP2_FW_CS4_MN&tt=P_US_FP2_FW_CS4_MN

Omnigraffle – This Mac only software application has a pretty dedicated following. It has plenty of tools and features to make creating great looking wireframes, layouts and diagrams a snap. It has solid import and export options too. At USD $99 for Standard and $199 for Professional editions, it’s pretty affordable too. Its parent company Omni Group also offers several other useful applications that Web Designers and UX Professionals may find useful.

Pros – Everything you need to quickly create very nice wireframes and diagrams. Affordable.
Cons
– Mac only so Windows users are shut out.

http://www.omnigroup.com/applications/omnigraffle/

Axure RP Pro – This is a very high-end and capable suite for creating wireframes, prototypes and specs for Web and application development. The software comes with piles of built-in components, controls and other elements to assist in making rapid progress building your project. These are all versatile and easily customizable. It’s also easy to make templates and masters for better control over global changes. Axure makes it pretty simple to create working prototypes from wireframes that can be viewed a standard Web Browser, which is very nice for conveying functionality to clients and developers. One other thing that Axure does pretty well is its ability to create specifications documentation and then export as MS Word. The company has a pretty slick website with a nice Flash demo tour.

Pros – Easy to use dedicated program for creating wireframes and simple prototypes. Decent collaboration functionality.
Cons
– In contrast to Omnigraffle, Axure RP Pro is a Windows only application and also requires you have MS Office Word installed. It’s quite pricey at USD $599 for a single user license.

http://www.axure.com/default.aspx

iRise – This product positions itself directly against competitor Axure RP by describing itself as Enterprise Grade solution. At nearly USD $7,000 it had better be. It is possible to download a 30-day trial version in exchange for an email address and a little personal information. iRise likes to refer to its solution artifacts as a working simulation or visual preview rather than a simple wireframe and/or prototype. Their website is slick and mildly aggressive in its approach to describing and marketing its product. I think their use of the White Board metaphor for early stage ideation and storyboarding is very apropos although certainly not unique. It also seems to have a decent approach to distribution, sharing, collaboration and review processes. One area that the  iRise working simulation may be especially advantageous for is in Usability Testing during all stages of an iterative process since it could more easily approximate a more finished prototype. The company also takes a purposeful approach to requirements documentation and specifications for a less ambiguous blueprint that business stakeholders, IT and Dev can buy into. In many respects, iRise does seem to take a more holistic stand with its product suite by explicitly addressing QA, Development, Program Management and other stakeholder needs as an integral part of its solution architecture. Full disclosure: I don’t have personal experience with this particular product so some of my conclusions and opinions are second hand or conjectural.

Pros – Takes wireframing and moves it far into the realm of prototyping and interactive visual simulation. More realistic representations have benefits in Usability and UX Testing.
Cons
– Windows only application. Pricing starts at $6,995 for iRise standalone Professional Edition so you better have deep pockets and a real need.

http://www.irise.com/

Summary

As I mentioned previously, it is possible to use just about any software application to craft some kind of wireframe or layout scenario, so please forgive me if I haven’t included your favorite. I know lots of people who use Dreamweaver, Flash, InDesign, PhotoShop, PowerPoint, Apple Keynote, ConceptDraw MindMap and others to generate these kinds of solutions and artifacts. That said, if you’d like to share some of your favorite solutions or have an opinion, please feel free to comment.

Comments are closed.