15 Desktop & Online Wireframing Tools

Engineered to make the design process as intuitive as possible, wireframing tools allow designers to construct visual representations of their interface before development begins. In this post, Tom Walker gives readers an overview of 15 of the most widely-used applications available. How does your wireframing tool of choice measure up?

Like most things today, the world of interaction design moves quickly. Although a pen and notebook may suffice when it comes to simply jotting down ideas, planning a series of website screens can sometimes demand additional precision and cohesion.

This is where today’s wireframing tools come in. Engineered to make the design process as intuitive as possible, these tools allow you to construct a visual representation of your interface. Some even allow designers to construct interactive prototypes in order to receive user feedback before a single line of code is written. The following list comprises 15 of the most prominent wireframing applications available today.

  1. Balsamiq Mockups

    Balsamiq Mockups

    Balsamiq Mockups

    Balsamiq Mockups enables a fluid and flexible design process, and is just as effective when adding smaller features to your page as it is when creating full-blown applications. Its website promises using Balsamiq Mockups “feels like you are drawing,” only the end result is tidier, simpler to edit, and much easier to share with colleagues and prospective clients. Your mockups can be edited in real-time, throughout the course of a meeting for example, and there is absolutely no coding required to produce a detailed projection of your design project, making the design process as time efficient as possible.

  2. Mockingbird

    Mockingbird

    Mockingbird

    Mockingbird mockups are geared towards speed, allowing for a seamless transition from idea to easy-to-share mockup in only a few steps. Tools such as the drag-and-drop feature mean that your mockup can develop at the same rate as your idea, allowing you to remove features as quickly as you added them. Mockingbird allows you to link numerous mockups together, enabling you to see interactively how your mockups compliment one another and rearrange them if necessary. And with sharing your mockups as easy as sending a standard link, your inspirational design will never be lost on your colleagues or clients.

  3. HotGloo

    HotGloo

    HotGloo

    HotGloo, currently available to users for free while still in beta, is an online wireframing tool that focuses on producing mockups as true to the final product as possible. Where other programs lean towards simulating the creation of a mockup by hand and the ‘rough’ flexibility that comes with it, HotGloo aims to generate a framework as clear and precise as possible. Other users or developers are able to watch your design develop, and as they do, leave comments and feedback to ensure all necessary design aspects are covered, ensuring the development of a fully authentic and accurate mockup.

  4. MockFlow

    MockFlow

    MockFlow

    For projects that have a team of developers contributing, MockFlow is a great browser-based wireframing tool to make sure every developer remains up to date with the project’s progress. The ‘Real-Time Design Collaboration’ feature allows you to chat with fellow developers as your mockup takes shape, and the enhanced organisation features such as a sitemap allow you to create a ‘clickable prototype’ site to test with prospective clients. What’s more, the add-on ‘MockStore’ provides a library of design tools, making the design process as comprehensive as possible.

  5. Pencil

    Pencil

    Pencil

    Pencil is a free add-on for Firefox that enables users to create detailed diagrams and GUI prototypes. It boasts a number of useful features, including built-in stencils that make design both easier and more professional, and inter-page linking, which allows the user to create detailed site prototypes. There is also the opportunity to personalize your tool bar, with the capacity to install user-defined stencils and speed up the design process. ‘The Pencil Project,’ as it is known, is constantly expanding and improving, hence even more features are expected in the near future.

  6. Omnigraffle

    Omnigraffle

    Omnigraffle

    For web developers or designers running on a Mac, Omnigraffle is an award-winning yet simple-to-use program that produces graphics, diagrams, page layouts, and fast mockups of your website in progress. Omnigraffle prides itself on its ultimate customizability, with users able to tweak every detail of their design, the end-result being a mockup site or page layout remarkably similar to how the actual page or feature will look. The latest Omnigraffle edition also offers a new layout engine, which means your design process will be more varied and faster than ever before.

  7. iRise

    iRise

    iRise

    The stakes are perhaps a little higher for designers in the business world, as multinational companies have to make sure they get their web development right the first time around. iRise specializes in web development for such businesses, simulating the workflow and the basic behavior of proposed business applications by combining the direct input of all stakeholders in order. The result is a website prototype that mirrors the real thing almost exactly, with businesses in complete control of how their pages and applications should look and work.

  8. Mockup Screens

    Mockup Screens

    Mockup Screens

    Mockup Screens does more than just allow you to create mockups of your pages. The mockups you produce allow you to be ‘experimentally interactive’ with your clients by ordering your mockups into scenarios, the result being testable prototypes that your clients can view and provide feedback for in real time. Mockup Screens is a great application to use during a meeting or presentation, as even before the coding process has started, your colleagues and clients have a comprehensive picture of how your site or application will function.

  9. Axure

    Axure

    Axure

    Axure is a fully interactive wireframing tool, primarily aimed at experienced web designers, that allows you to design, create, and test wireframes and prototypes. Axure’s interactivity means that the designer is able to share ideas with colleagues, clients and stakeholders from the very earliest stages of development, and its efficiency means any alterations and further developments can be made quickly and seamlessly. As with other tools in the list, Axure boasts a drag-and-drop feature that allows you to assemble your wireframe easily and without a need for coding, and all projects can be shared with other developers to allow design teams to work collaboratively on the same wireframe.

  10. Pidoco

    Pidoco

    Pidoco

    If remote access is a particularly important feature in your design process, then Pidoco is especially useful. As a completely web-based wireframing tool, it allows you to create fully clickable wireframes or prototypes, and its remote access means that a team of designers can work on and share your project from various locations. And as it’s rare to find a designer who gets everything right first time, Pidoco’s interactivity, collaborative feedback, and testing features mean you can edit and re-edit your wireframe until it’s as authentic and close to the end result as possible.

  11. Protoshare

    Protoshare

    Protoshare

    A big hint at the key aims of the Protoshare tool can be found in its name—prototypes that are easily shared. Protoshare is aimed at projects with input from a number of sources, from clients and managers to web designers and marketing departments, and businesses that need new sites or applications up and running quickly and exactly according to plan. The detailed prototypes produced allows users to visualise their projects in full and, importantly, before committing the time and finances necessary to make the plan a reality.

  12. ForeUI

    ForeUI

    ForeUI

    ForeUI is a tool dedicated to creating UI prototypes quickly and easily. Where other tools look to appeal to development on a large scale (in particular when it comes to businesses) ForeUI also caters for clients with much more simple requirements. Fully interactive prototypes can be created to share with your clients and colleagues, as can quicker, static wireframes that simply allow you to visualize your thoughts more clearly. ForeUI’s also offers multi-platform functionality and impressive usability testing.

  13. Microsoft Visio

    Microsoft Visio

    Microsoft Visio

    Released in 2007 and with another version in the pipeline, Microsoft Visio is an advanced diagramming tool that allows for the creation of fast and easy to use diagrams. It replaces the need to develop time consuming and complicated tables and text boxes, instead providing much more flexible Visio diagrams which can shared easily amongst others. It also provides a useful sitemapping tool, with users able to track any changes other developers have made over an extended period of time.

  14. DUB DENIM

    DUB DENIM

    DUB DENIM

    For designers who find that using computer programs to ‘sketch’ simply doesn’t capture their true creative talent, DENIM is a particularly useful wireframing tool. Using an electronic tablet and a stylus, DENIM allows users to hand-sketch their ideas. The ‘sketch’ then appears on the user’s screen, and can be edited and re-positioned in order to find the best possible design for your project. For the more artistic developer, DENIM means that from the early stages of your development project, there is no need for unnecessary compromise on the design front.

  15. GUI Design Studio

    GUI Design Studio

    GUI Design Studio

    For Windows users only, GUI Design Studio is a comprehensive graphical user interface tool, handy when working on a variety of projects, from documenting product ideas to creating screen mock-ups. Creating wireframes for your new application or site can be done quickly and professionally without any coding at all, and pages or applications can be connected together storyboard-style and tested, as well as shared interactively with colleagues and clients, meaning you and your business can see exactly how your new creation is going to function before the actual development begins.

About the Author

Tom is a designer and writer from the UK working for a Manchester-based e-commerce store specialising in high quality laser printer cartridges, inks, paper and other printing accessories. You can read more of his writing on their blog, CreativeCloud.

About the Author

Tom Walker

Tom is a designer and writer from the UK working for a Manchester based e-commerce store specialising in high quality laser printer cartridges, inks, paper and other printing accessories. You can read more of his writing on their blog, CreativeCloud.

Related Articles

54 Comments

  • Alex Reply

    Great list, Tom! My personal favourites are Axure and Omnigraffle, never really got on with iRise, though I must admit I didn’t have much time working with it.

    Cheers,
    Alex

  • Indu Reply

    This is a great list! But I want to add one more to this list! http://creately.com – This is great online diagramming software for creating Web Sitemaps, Wireframes, Mockups, UML Diagrams and a whole lot more. Creately is an easy to use visual collaboration platform that is used by globally distributed teams to communicate more effectively.

  • goofydg1 Reply

    It’s hard to find a good wireframe tool. I’m also slightly depressed by how many bad ones I see.

  • Yosef Solomon Reply

    What do you think about iPlotz. I’ve had a lot of success with it so far. Gloo seems pretty cool though.

  • FF Reply

    Great list Tom- thanks for taking the time to make it.

    Thanks for sharing

    Fabio

  • Wolf Reply

    Hey Tom, thanks for mentioning HotGloo. Just let me add a few things: because we built HotGloo with a very clear focus on interaction, collaboration and usability in mind it’s suited for everyone working on a web project, including clients. From beginners to experts, from fast sketched small microsites all the way towards huge interactive prototypes for large business solutions.

    And recently out of Beta… woohoo. Come and say hi!

    Cheers, Wolf

  • Thomas Craig Consulting Reply

    Nice round up, would like to hear which tool people prefer: features, ease of use, ui, etc… anyone? I’m thinking of giving Axure a test run.

  • Priyang Reply

    Nice one, I was searching some good mockup tools…Cheers

  • Matthew Lux Reply

    You should give an idea if they are free or if they charge, and if so how much…

  • Peter Severin Reply

    WireframeSketcher is another desktop wireframe/mockup tool. It’s a plugin for Eclipse-based IDEs like Aptana, RadRails, Flex Builder, Zend Studio and others. WireframeSketcher is cross-platform so that all the members of your team can use the same tool. Some distinctive features include storyboarding, master screens and a powerful wiki syntax. By using Eclipse you also get for free projects, version control integration and more: http://wireframesketcher.com

  • Mr. BluJ Reply

    I really like Axure, but i am growing fond of Mockingbird. Axure’s interface is at first a little daunting but once you understand the layout and tools it becomes easy. I love Mockingbird for being a web app, so I can log-in and grab my ideas and print them out where EVER i am. I find that both tools are needed for my business. I know mockingbird is fairly new but I’d love to see if it could generate html prototypes eventually.

  • Etienne Reply

    Hey, nice pick but you forgot Justinmind ;) powerful & easy to create fully functional dynamic, interactive prototypes without coding.
    http://www.justinmind.com

  • Laurent Reply

    For desktop app prootyping, I use (nokia) Qt designer which is crossplatform, free, easy to use and can produce executable files (no need of reader/player).
    It requires a bit of c++ knowledge if you need interactions.
    http://qt.nokia.com/products/developer-tools

  • Angel Reply

    Nice list, but would have preferred to see a chart so that it’s easy to see comparisons of features. As well as pros/cons or favorits of this list.

  • chicago web design Reply

    great roundup. We like to draw em out here, but these are hugely useful! Thanks

  • Tom Dahm Reply

    Awesome, Ive been looking for a new wireframe program. Thanks bunches!

  • Dan Reply

    With almost all of these tools, the limitation I’ve found is that they lack the ability to create variables and set conditional logic. Axure and ForeUI are the exception, but with both of those tools, there is presently no way to simulate a drag and drop event.

    Haven’t tried hotgloo, maybe it does drag and drop, variables AND conditional logic?

  • John Whalen Reply

    I’m a confessed mac-junkie, but must admit that MS Expression’s Sketchflow has worked really well for us – sending the client a clickable prototype with real interactions and an ability to comment back. For simpler things I still think Omnigraffle is great.

  • n Reply

    Very useful list; however including the subscription cost with each is essential IMO … it doesn’t matter how good the product is if I don’t know how much it costs me.

  • Marcin Reply

    Hi,

    let me introduce JustProto.com to fill your list. It’s an easy to use web-based tool. Have a look if you’d like to :)

    Cheers!

  • Andrea at ProtoShare Reply

    Tom,
    Thanks for going through this list of wireframing applications and taking the time to present information on each. We are excited that ProtoShare is part of your list!

    For people asking about pricing, ProtoShare offers a 30-day free trial and two main subscription plans.

    While we don’t offer the ability for conditional logic (@Dan), you do have the ability to apply state functionality to your prototypes for increased interactions (carousels, pop-ups, slides, data grids, etc).

    You can also upload design comps to share those with stakeholders and pull in live sites to review a redesign or project in process, as well as export to HTML to back up your files.

    I hope this information helps a bit more, but feel free to contact me if anyone has further questions.

    Cheers,
    Andrea
    @ProtoShare

  • cooljaz124 Reply

    Nice list. Im using some of these for my future works wireframing

  • pete Reply

    Hi,

    You may also like LabWireframe
    it’s user-friendly prototyping tool that comes with the “events” extra function and drag and drop intuitive UI.
    Best wishes,
    peter

  • Juegos Reply

    Thanks Tom, excellent collection of wireframing tools!

  • juegos Reply

    Really liked it, thanks Tom for sharing

  • Rich Reply

    I’ve used it for about 6 months and like it. I’ve also used OmniGraffle which is great. Axure is quick for layout and easy to build interactivity. Lots of great prototype tools, like dynamic layers. However, I wish there were more pre-built stencils. OmniGraffle has a ton.

  • Lionel Draper Reply

    I like Visio the best. I have played around with the others, but Visio really has the most advanced system. I was doing a project for a sunday school program and OmniGraffle was good for that level of project. However, when I went to a more professional level, I needed Visio.

  • CC Reply

    I was missing Dreamweaver…how about building code versions of screens that actually click and work?

  • brinda Reply

    MockupTiger is a good html5 wireframe, you can host it on your domain, desktop, switch between hand drawn look, change fonts and prototype dashboard mockups with data

  • interior designing Reply

    I haven’t used desktop and online wireframing tools because I usually use pencil and paper if I wanted to jot down some important notes. But I’ve read that the protoshare is a good tool to use. Maybe I will check out these tools so that I will know which tool is suitable for me.

  • Frank Reply

    Fab list. I design for smartphones and it has always been a leap to get your completed sketches or mock-ups on to a real live device. But check out http://www.appinseconds.com. With no technical knowledge it allows you to get your prototype on to the iPhone where it acts and looks like a real app. Nice!!

  • Caroline Jeannot Reply

    Really great great list. I might add – Keynote and PowerPoint (yes, PowerPoint – look at the recent article written in UX Magazine about this).

    Both are tools most people already own and use and with the Keynotopia templates http://keynotopia.com/ you can create interactive wireframes and high fidelity (pixel perfect, royalty free, ready for development) prototypes without writing a single line of code. Great for designers and beginners alike :)

Leave a Comment on This Article