Useful Wireframing and Prototyping Tools – Roundup
Note: This post was first published on the 7th July, 2011.
Concept of globalization hits the world with ceaseless creativity and imagination amongst people ranging from the youths to the elders. Judging by the fact that creativity produces opportunities in the field of marketing, wireframing and prototyping are definitely on the list. These are tools that not only make your websites appear to be nice and neat but also attractive.
Following on from our Great Usability Tool Roundup we’d like to feature a number of helpful wireframing and prototyping tools. Based on my own experience in talking with people working on user experience design, I know there isn’t one tool for everyone, so today, we’d like to present you with some of the better options available.
Wireframing and Prototyping: In a nutshell
Wireframing is a really great way to help you work out the initial layout and design of your (or your client’s) site. It means you can come up with a range of different concepts without having to invest a huge amount of time or money into each concept. You can do both low fidelity (sketches, really) and high fidelity wireframes, test them with one of the usability tools we listed last time, and work out what is going to be the best design for you,
Prototyping means creating an actual, functional version of a website using special prototyping tool. It uses the same navigation structure and layout as your final site, so you can easily observe how the users interact with the new design that you have created. Using prototyping tools is a really quick and easy way to get a live site for you or your clients to play with and gives a good indication of what the final site will be like.
Many of these tools can do wireframing and prototyping, so we haven’t separated them into different sections. Feel free to ask if you are unsure about which does what. Read on for a list of really helpful tools, and be sure to let us know in the comments if there are any great tools we’ve missed.
20+ Useful tools
Omnigraffle
This tool is for Mac only, but if you’ve got a Mac, it’s super easy to use. It has tons of great resources available and looks very pretty too. ($99.95 – $199.95)
Axure
Axure is one of the most popular rapid prototyping tools out there and has a very big following. It is a hugely powerful tool that has a good community around it. It runs on both Windows and Mac. ($589)
Mockingbird
Mockingbird is a neat web app for creating wireframes. It allows you to add links easily between your documents so users can get a more interactive experience. The great thing is that you can also collaborate with other users. Since it doesn’t use flash, you can even use it on your iPhone or iPad. (Free – $85/month)
Balsamiq Mockups
Balsamiq Mockups is an Adobe Air application, so it runs on Mac, Windows and Linux. It is an application with a load of functionality and strong community around it. Well, it is worth having a look. ($79)
HotGloo
Hotgloo is another wireframing web app that is designed for online collaboration. It has a range of different tools baked in for putting together a range of different website types. I can’t deny, it’s pretty too. (Free – $48/month)
Creately
Creately has both web app and desktop version as well as integration with Google apps. It allows you to drag and drop interface so that you can set up designs quickly in whatever way you like, and collaboration features as per the apps too. (Free – $75)
FlairBuilder
FlairBuilder is another one of the Adobe Air applications which you can run it on any platform you like. It does both wireframing and prototyping, and even has a module for doing your iPhone apps. Nifty. ($99)
Mockflow
Mockflow has both web and desktop editions. It has its own store so you can get a number of extra templates and buttons to add to the ones that come with the app. (Free – $69/year)
WireframeSketcher
WireframeSketcher is a desktop app that lets you ‘sketch’ wireframes, and construct interactive prototypes. It has a big library of UI controls at your disposal so you can construct different designs in pretty good time. ($75)
Justinmind
Justinmind is a rapid prototyping tool with both Mac and Windows versions. After you’ve created your designs, you can export them to HTML to test or share with whoever you like. ($495)
Origramy
Not originally envisioned as a wireframing tool, but certainly a good free alternative for those times when you need to knock up a quick wireframe. (Free)
Wirify
Personally, Wirify is a favorite of mine. It’s a bookmarklet that enables you to generate wireframes of any site you are on. The free version lets you view them online (and you can always capture screenshots of those), or if you buy some credits, you can then export the wireframes to Omnigraffle, Balsamiq, SVG or Visio. It’s really cool tool! (Free or Pro – price varies)
Simulify
Simulify has both web and desktop edition (an Adobe Air app). It has collaboration features, and lets you share your designs online with whoever you like. (Free – $99/month web, $80 desktop)
JustProto
JustProto, as the name suggests, is a rapid prototyping tool. It comes with a library of useful elements you can pull into any design, collaboration options, and a live preview so your clients can see your work in real-time. (Free – $99/month)
Napkee
Napkee works together with Balsamiq Mockups to enable you to export your designs faster to either HTML or Flex. If you are a Balsamiq fan, it’s really an extremely helpful tool. ($49 – $79)
ForeUI
ForeUI lets you quickly assemble mockups, and turn them into live simulations that you can publish on the web. It’s a quick and easy way for you or your users to get an idea of what your live site might be like. ($99+)
Jumpchart
Jumpchart is a very pretty app that not only lets you put together wireframes and prototypes, but also allows you to export them to HTML, and if you pay for one of the higher plans, it will support WordPress export as well. (Free – $50/month)
Protoshare
Protoshare lets you collaborate with clients, create interactive prototypes quicker, and has a nice drag and drop interface. Some big name clients too, if that’s what you’re into. ($29 – $179/month)
iPhoneMockup
This is a free and very simple tool for creating a quick iPhone wireframes. If you’ve got an idea on what you’d like to work on or something you’d like to imagine up, this is the tool for you. Try it! (Free)
Lumzy
Although Lumzy doesn’t look to have been updated for a while, but it’s worth a mention as a free alternative. It lets you do mockups, prototyping and has a number of different collaboration features. (Free)
Pidoco
Pidoco lets you create wireframes, prototypes, collaborate with clients, and even have some basic usability testing functionality built in. ($9 – $99/month)
So Now What?
Hopefully you are feeling inspired after reading this post, and you have some idea of how wireframing and prototyping can help you. Once you’ve created your designs, you can then go on and test them with all the usability tools we’ve featured.
If you’d like a little more information on wireframing and prototyping, we’ve included some helpful links below.
- Website Wireframe (Wikipedia)
- How to Develop an Effective Prototype (newfangled.com)
Do you have any other apps that you’d recommend? What is your favorite tool? Be sure to let us know in the comments below.