A Survey of Wireframe Tools

An important step in the web design process for Little Wing Marketing is to create wire frames for our clients. A wireframe is essentially a “skeleton” of the website without fully-realized content. It consists mostly of boxes, lines and lorem ipsum (dummy text) (or the Sam Jackson lorem ipsum generator if you’re cool) to outline all the elements of the site and can go as far to build out multiple linking pages and interactions within the page. Providing clients with wireframes saves a lot of time later on in the design process by giving the client an opportunity to take a critical look at the overall structure of the website and allows for revisions easily.

All web developers should be using wireframes.

Maybe you have been using the same program to create wireframes for years and haven’t taken the time to explore what could be a more effective, user friendly wireframing tool. There are dozens available, and I wanted to spend time using some of them to get a feel for what each one offered in relation to cost, features and usability as well as some of my favorite features. Here’s what I discovered:

1. Balsamiq

I used Balsamiq to do a preliminary mock-up for the Little Wing Marketing re-design.

Cost

• $79 – Single User License
• Offers a 7 Day Free Trial Period

Features

• Hand-drawn look that let you focus design conversations on element layout and functionality
• Familiar Components & Icons – 75 built-in user interface components and 187 icons
• Multi-page linking capability lets you and the client experience click-through prototypes for demos & usability testing
• Export to PNG or PDF make it easy to share or present mockups with embedded links using PDF export

Usability

• Very fast, intuitive, and easy to use.  I felt there was little to no learning curve when beginning to use the program, unlike some of the other programs that take while to adjust to the toolbars.
• Video tutorial on the homepage was very informative and enjoyable to watch.

2. Mockingbird

Sample of a product description wireframe LWM prepared for a page for a client.

Cost

• Free plan available – 1 project with 10 pages; 2 users; no archived projects
• $9 – $85/month
• You only have to pay for months you use Mockingbird

Features

• Primary icons/UI Elements- elements you use most
• Multiple pages- you can link and rearrange with ease
• Fully web-based- Nothing to install or download, you can access your mockups from anywhere.
• Export to PDF & PNG

Usability

• I liked that you could begin trying it out online without having to sign in.  The
• I was comfortable using the canvas and tool bar and found all the design elements needed listed under “widgets”.

Notes

3. Creately

I wanted to create a wireframe just like the one we made using Balsamiq to determine which interface had better usability.

Cost

• Free Plan is limited functionality & Public-only diagram and is accessible only online
• $5 – $75/month for online version
• $75 for a license to the desktop version

Features

• Team Collaboration – Creately’s primary advantage is its ability to share abd provide smooth real-time collaboration, project management, inline commenting, one click publishing and team management .
• Smart Diagramming- Smart diagrams and objects suggests connectors, draws as you type and adds data to your diagrams.
• One click styling, pretty shapes, curvy connectors and more helps you create beautiful diagrams.
• UI Mockups and Templates available to get you started.

Usability

• I liked that you could begin trying it out online without having to sign in.
• Video available describing basic building and sharing tools.
• I was comfortable using the canvas and tool bar and found all the design elements needed listed under “widgets”.

 Notes

• The site lets you begin working with the program right away. You do not need to provide an email unless you wanted to save the mock-up.

4. Pencil Project

I used Pencil Project to design the wireframe for a product description page for a current client. You can see my hand-drawn wire-frame below. I used the downloaded version rather than the Firefox version.

Cost

• 100% free, both as a FireFox add on or a standalone application

Features

• Built-in stencils for diagramming and prototyping
• Multi-page document with background page and inter-page linkings
• Rich-text supports
• Exporting to HTML, PNG, Openoffice.org document, Word document and PDF
• Installing user-defined stencils and templates
• Standard drawing operations: aligning, z-ordering, scaling, rotating…
• Cross-platforms
• Personal Collection
• Clipart Browser
• Object snapping

Usability

• There are screen shots available user guides available on the website.
• No tutorial videos. 🙁
• I was not able to figure out how to install user-defined stencils and templates
• The alignment tool never worked

Notes

• I liked how the image placeholders show the image size on the front of the icon which will make it easier when designing the comp later.

5. Hotgloo

Hotgloo specialized in interactive wireframes. I used this online tool to create another product description page wireframe for a client.

Cost

• Free Plan (1 Project with 5 Pages and 1 User)
• Plans range from $7 – $54/month (2 users to unlimited users) (a free 15 trial is available for all plans)

Features

• Sets of components can be grouped together and each group’s visibility can be triggered by the type of user viewing the page, clicks, hovers, or other variables. Entire sets of variations can be reflected across multiple elements on a single page (logged in versus not logged in, for instance) for wireframes that more accurately represent real functionality.
• Template system that allows you to build full-page layouts to be used across a site or small, singular elements (like an ad, for instance) that can be placed on various pages in different locations, but edited from one central spot.
• Contextual palette menus also allow for an excellent amount of control over an element’s appearance without the need to resort to writing CSS.

Usability

• Series of video tutorials available
• Easy to use my favorite commands: copy, paste, delete
• Easy to select multiple elements to move or manipulate whereas some of the other sites

Notes

• Had all the essential elements for the wireframe I was creating.
• It was easy to get started right away.
• The “Review” tab makes it easy to see the elements come to life.
• Tons of great tutorial videos.

Conclusions + My Choice

While researching wireframe tools to review for this article, I was much more likely to take the time to familiarize myself with the tool if there was a video intro or tutorial.

Hotgloo, by far, has the best resources for tutorials. Balsamiq was the easiest tool to get started with doing BASIC wireframe layouts but I think moving forward I will spend some more time using Hotgloo. Hotgloo has far more advance features for applying interactions and sharing with collaborators…and they they videos to walk you through the process.

Here are some other wireframing tools to check-out. You can also find them in our UX Directory. Which is your favorite? Share in the comments!

• Flairbuilder
• Lovely Charts
• Cacoo
• mockflow
• ProtoShare
• Axure
• iPlotz
• OmniGraffle