Top 20 Wireframe Tools

wireframe-toolsWireframes can be created in many ways with several tools depending upon one’s communication needs and budget. Most simply, pen and paper are key tools for creating web wireframes. In addition some designers and developers are using Illustrator, Fireworks or PowerPoint to create wireframes. There are also interactive wireframe tools available for use by designers, programmers, and project managers, which allow collaboration with clients prior to the website programming stage. Wireframe tools included in this list allows you to make wireframes from low to high fidelity, work in collaboration with your team and clients, get feedback from stakeholders.

In some cases, wireframe tools lets you prototype a website i.e. make links clickable to share with clients before building the final product. What’s your favorite wireframe tool? Please speak out in the comments.

Pidoco
Pidoco is a real time collaborative online platform to create interactive web and software prototypes, and to test, discuss and optimize them.

ProtoShare
ProtoShare is a collaborative online tool to build website wireframes and dynamic, navigable website prototypes that team members can then review and comment on in real-time.

iPlotz
With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

Hot Gloo
Hot Gloo is the online wireframe application currently in free beta. You can drag and drop elements, scale, link, name and rename them. You can also edit, comment & share any moment of the developing process with colleagues and clients.

Denim
DENIM is a free multiplatform desktop app that supports sketching input (through pen tablet), allows design at different refinement levels, and unifies the levels through zooming. Unlike a paper sketch, this electronic sketch is interactive and can easily be annotated and modified using editing gestures.

Pencil
Pencil is a free Firefox addon for making diagrams and GUI prototyping. Its features include: built-in stencils for diagramming and prototyping, multi-page document with background page, on-screen text editing, undo/redo, installing user-defined stencils, adding external objects.

Gliffy
Gliffy free wireframe software makes it easy to create website wireframes and to share web mockups with anyone. You can export your wireframe for future use in other applications as well.

Omnigraffle
Omnigraffle (100-200$) is a diagramming and wireframe application built specifically for Mac OS. Using drag-and-drop WYSIWYG interface users cans create simple and complex diagrams, flow charts, organization charts and illustrations. Import, export of Visio files is supported.

MockupScreens
MockupScreens (89-369$) lets you sketch screen mockups of your application and organize them in scenarios. Users can experiment interactively with clients and quickly visualize scenarios of applications before the coding has started.

iRise
iRise (6.995$) is visualization authoring tool which simulates the workflow and basic behavior of proposed business applications through direct communication with stakeholders via interactive requirements gathering sessions. iRise also helps to create a high fidelity version of the simulation.

Axure RP Pro
Axure RP Pro (589$+) is a rapid wireframing and prototyping tool which provides drag and drop environment, automated specifications, HTML prototype generation and collaboration options.

Jumpchart
Jumpchart (free-50$) is intended for quick mapping, prototyping and collaborating. A Jumpchart allows you to export your wireframe as CSS/XHTML, and automatically generates its own sitemap.

EightShapes Unify
EightShapes Unify is a free downloadable collection of templates, libraries, and other assets for Adobe InDesign CS3-4 that helps to create website wireframes faster.

WireframeSketcher
WireframeSketcher (free, some conditions) is an Eclipse plugin for creating wireframes, screen mockups and UI prototypes. It helps you quickly create screen mockups and UI prototypes right from within Eclipse IDE.

Microsoft Visio
Microsoft Visio (259-559$) is an app that uses vector graphics to create diagrams. Professional edition has additional templates and option to connect diagrams to a number of data sources and display the information graphically.

Balsamiq Mockups
Balsamiq Mockups (79$) is an Adobe AIR application for creating wireframes features hand-drawn, sketch-like interface elements library. The wireframes made with it look very much like a draft.

mxGraph
mxGraph is free a JavaScript library that uses built-in browser capabilities to provide an interactive drawing and diagramming solution. mxGraph works straight out of the box, no client configuration or installation required.

Justinmind Prototyper
Justinmind Prototyper (690-1290$) is a desktop tool to design wireframes and run simulations for web, desktop and mobile applications. The product lets you define user interface elements using a drag and drop environment with component libraries, and attach actions to components.

ForeUI
ForeUI (79-1311$) provides an easy-to-use environment to rapidly create prototype of your website or software. You can do most of things with mouse drag-and-drop, single click or double-click. ForeUI support various UI styles for prototyping, wireframe is the default UI style.

FlairBuilder
FlairBuilder (99$) is a cross-platform tool for rapid authoring of interactive wireframes and user interface prototypes. It features multiple projects and pages support, fast preview, web 2.0 as well as plain looking elements.

Justproto
Justproto (19-99$) is a web application to create and share online web wireframes using library of prototype elements with the multi-level structure. You can use Masters to avoid repletion of work.

Lucid Spec
Lucid Spec helps you rapidly prototype software and produce a concise, clear functional specification. Lucid Spec does this by combining screen design, application simulation, and user interface description all-in-one.

Want more of this? See these posts:

  1. How to use wireframes in web development?
  2. Top 20 Project Management tools
  3. Online PDF tools
  4. Convert image into icon: online tools
  5. Top 30 Adobe AIR apps for web designers

Share |

10 Comments to “Top 20 Wireframe Tools”

  1. Good article, and thanks for listing ForeUI!
    Yet the description of ForeUI is out of date since ForeUI is growing so fast :)
    If you are interested in reviewing ForeUI, just drop me a mail and we will provide you the license.

  2. Nice list of resources.

  3. A very good collection of resources there.

    Even though there are several plugins out there which render a blog for a mobile, I do not perceive the real notion of why a mobile version is needed.

    As we are generally interested in visitors, there is no real tendency of bloggers expecting people to visit their blogs even from mobile phones.

    All in all a great post. Thanks.

  4. Thanks for this list! I was considering Visio but with all the capabilities provided by iPlotz, Pidoco, ProtoShare I think I will be using a web based tool in future!

  5. Hi there!

    Cool list of solutions! A similar is here:

    But to give at least our choice in the jungle of tools: We just saw a pidoco (www.pidoco.com) presentation at UX conf in Brighton, UK. It seems their tool can do alot more than is presented on their website. The presentation was held by their CTO and he gave some nice insights in prototyping AND usability testing in their tool!

    I guess, I will register for the free test and let you know how it goes. But I think it’s worth a try, since the guys from Nokia and some mobile carrieres also got hooked …

    Maurice

  6. I played a little with iPlotz recently as I was busy with a quick project and thought it might be a good opportunity to test it.

    I found that generally the product was quite neat, except for a few annoying issues:
    The ‘free’ download is a feature limited version – only one project can be managed, and no exports are supported? To change font color can be a bit of a mission – I found that placing a dot in the annotation section of the text formatting tool, deleting it, and then changing the text color tended to work – this whilst entering the HEX codes.

    So whilst I thought that the product was fair, it seemed pretty pointless to do all of the work without and warning that there was no export support!! It is limited to a single project – making all of the features available would probably loose them one or two sales, however, if it had been a fully-functional product limited to a single project, I would gladly have bought it.

    Perhaps something for the folks from Virtual Training Center to think about?

  7. I inspired from your article, I did some R&D also, My experience is at http://www.simplyshareit.net/itemDetails.jsf?q=1330 hope this will help lots of people like me hunting good wireframing tool.

  8. [...] Top 20 Wireframe Tools [...]

  9. [...] is also number of online and desktop application which only purpose is to create wireframes. These wireframes tools can include collaboration feature and option to create basic [...]

Leave Comment

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>