17 Great Wireframing Tools for Web Designers
“Time is of the essence” is a bold statement that definitely applies to any design career. We all get paid by the hour, so the faster we can work, the more money we can make. This means that being able to get up and running on our design work has become a necessity. This is where wireframing comes in. You can get a general idea of what will work and what doesn’t, saving you time when developing websites. It allows you to focus on the content of each page, making each page serves its purpose to the best of its ability. How you wireframe depends on your personal workflow. Here is a list of some of the most popular wireframing tools.
Balsamiq offers low-tech wireframes in the form of sketches so that you focus on content and functionality rather than design and looks.
ProtoSahre focuses on collaborative wireframing between a team. This is geared towards a design team to streamline the process of creating a website from start to finish. ProtoShare’s focus is on UX and allows the creation of mobile apps.
Especially with CS6, wireframing and mockups have never become easier. With professional UI templates and wireframes built right in, Fireworks CS6 is geared towards web and mobile application creation, with a focus on getting up and running quickly and efficiently.
Pencil is an open source GUI prototyping tool. It works in the browser as an add-on and is geared towards making user interfaces quickly and efficiently. Highlights include stencils, page linking and the ability to make simple website mockups.
Axure boasts rapid wireframe and prototype generation, as well as the ability to develop your wireframes and mockups to working prototypes.
JumpChart is another wireframing tool that boasts the ability to create rapid wireframes and prototypes. A unique aspect to JumpCharts export ability is to export directly into Wordpress.
Prototyper is a premium web and mobile app prototyping system that supports advanced use such as gestures, conditional rules, forms and more. They have a free version, but to get access to the extras, you need to purchase the premium app.
JustProto is a wireframing tool that boasts rapid prototyping capabilities. It also has drag-and-drop capabilities, and produces fully interactive prototypes.
iPlotz allows you to create rapid, interactive prototypes by utilizing built-in wireframe components that are common the web development community. Along with wireframing, iPlotz boasts the capability of project management.
Web based and used to quickly organize and create clickable prototypes and wireframes. Pidoco also has collaborative sharing capabilities.
Besides being able to collaborate with others and being web-based, which means that you can access your work at any time with any browser, Hot Gloo also boasts an auto-saving feature.
Gliffy is a free wireframing tool that contains a library of common elements so you can get up and running in no time. The ability to add in text to make notes and add descriptions really makes this a good option for designers on a budget.
WireFrameSketcher is a simple and easy-to-use tool that allows you to build wireframes quickly and share them with other team members. Their site shows many different examples of the types of things that you can create quick mock-ups for, including: iPhone apps, websites, Facebook, and more.
Flairbuilder is a robust wireframing tool that has a UI component library and the ability to create multi-page wireframes and master pages, so you can save time by not having to rebuild your wireframes for each page.
Mockflow is interactive, allowing you to create working conceptual prototype. The unique feature is that Mockflow is hybrid, meaning that you can work online or offline. You can also create sitemaps, so that you can get through the planning process quickly and efficiently.
Mockingbird is a nice wireframing tool with a lot of built-ins to help you create wireframes and prototypes quickly and easily. Mockingbird boasts the features of having built in grids like 960gs and Blueprint and the ability to export to PDF and PNG.
Frame Box is a tool that is browser based and featured a click-and-drag layout system. This is fantastic for creating resizable, easily adjustable wireframes on the fly.
Flowcharts wireframes and mind maps can be made quickly and easily with Creately. With built-in sharing and ready-to-go templates, Creately ranks right up there with other wireframing tools.
Conclusion
Wireframes are an essential part of a web designer’s arsenal. They allow us to create quick mockups, sitemaps, and relate content to one another so that we can build fantastic user experiences for our clients. Do you use any of the wireframing tools listed above? If not, do you use another wireframing tool not listed here? Tell us what you use in the comments section below.
Grab the Feed
What about Moqups? http://www.moqups.com
I second Moqups! It’s a great fast one for general use and also in the cloud!
I like that too
Don’t forget about Moqups! It’s a very fast and nice HTML5/SVG based app that runs in the browser!
Hey, thanks so much for mentioning FlairBuilder! I appreciate that. :)
Hey man! Where did you find these antiquities?:D
Half of them don’t even care enough to actualize their copyright data. iPlotz and Mockingbird are long gone (2010 or something?).
Apart from few exceptions, these are not the tools that are used by professionals nowadays!
Where are:
* http://proto.io – dedicated app for mobile prototyping and wireframing with tons of mobile UI elements
* http://uxpin.com – User Experience Design tool used by people from Google, IBM etc. (it can convert paper prototypes into wireframes and demonstrate design process!)
* http://fluidui.com – mobile prototyping app with interesting UI idea
* http://moqups.com – rapid lo-fi mockuping tool in html5 (it’s free!)
* http://invisionapp.com – popular link-dummies tool to give wireframes some interactions
These are tools actually used worldwide nowadays!
Please update your article and don’t confuse readers.
I use Pencil primarily, and Moqups when I’m working between a few machines.
I’m always happy to see attempts to popularize wireframing. Thanks for that James!
Sadly, you missed one tool, my tool;). Check out http://uxpin.com – first ever dedicated User Experience Design tool that let you:
* wireframe and create interactive prototypes
* convert paper prototypes into html wireframes
* demonstrate whole design process (from product requirements, through personas, wireframes to visual design)
* gathering reviews
You’re all welcome on board friends :) http://uxpin.com
nice stuff, thx for collection and sharing!
Thanks for the article, and to everyone’s comments.
Nothing beats pencil & paper. I used those tools and think waste more time creating mockups. Pen and paper is fast and easy. Detailed mockups in a graphics editor.
Nice Post. Thanks for Sharing this article.
Thank you for including ProtoShare in your list of wireframing and prototyping tools!
The great thing about a web-based tool is that you can access your work from any computer without having to download a new license. It also allowed us to build in collaboration from the very beginning, which is one of the most important aspects of wireframing and prototyping. Share early and share often so you can ensure you’re building the right thing from the start.
ProtoShare is used by thousands of designers and UXers throughout the world – whether they just want simple, gray box wireframes, complex prototypes, or to upload their design mockups and overlay interactivity to gain feedback or conduct user testing, they’re able to do it in a single tool.
We recently released a new update and would love your feedback!
Cheers,
Andrea
@ProtoShare
Great list here, there are some really awesome tools here. I’ve tried quite a few of them but I keep coming back to Adobe Illustrator. I find it the fastest way to whip out mockups and wireframes. Then shoot over to photoshop to create the lovely details
Where’s Navflow..? It’s really good! Definitely worth mentioning.
http://www.appappeal.com/app/navflow/
I would like to add my new prototyping tool, Devhand SketchIt. You can check it out at http://www.devhand.com
It supports layers, styles, master pages, actions and HTML export.
Great tools, I would like to add one which is Excel, its a great tool to create basic wireframe & its you can make layout really fast & its simple to use.
besides justinmind what of these wireframs allows you to put your mock ups on a device-iphone/android?
Also, Microsoft blend sketchflow and guuui visio plugin. That last one i really like. Simple, no learning curve and effective!