My friend told me a joke once: “If I were to be a father, I’d want to see the prototype first.”
I laughed at his remark and realized that this is true. Creating mockups is a crucial part of giving life to a new project, after all.
Some of them prefer to go vanilla and create prototypes and mockups by hand using good ol’ pen and paper.
But one thing UX designers or researchers have in common is that they always look out for new technologies.
Sure, you can even use Microsoft PowerPoint for mockups. But why not use something that covers your needs and doesn’t make you feel like an undergraduate student?
Here’s a coherent presentation of 13 prototyping tools which will help you design your project and test it. Read on and prototype away!
Creating a list about prototyping tools without mentioning Balsamiq is like a sphere: pointless. It is one of the basics when it comes to creating your first wireframes and mockups.
It is quick and easy, so if you want to jump right in and leave with a good locking prototype, then it’s a great choice. What captivates is its simplicity.
There’s no need to think about which font to use, which color and whatnot because of the limited choices. You focus on the layout only and that’s it. Balsamiq is cheap, has good support is easy to pick up. If you don’t need interactions with your prototype, this is a perfect choice.
Here’s a sample mockup with a Google Translate infused Lorem Ipsum. The Skirt of Zen.
The front page is deceitful, but it’s not only about diagrams, flowcharts and graphs. Lucidchart is for IT and Engineering, for Business clients and for Product Management and Design.
The back-end functionalities such as server diagrams or UML are free, and the wireframing requires a subscription.
Wireframing uses interactive drag and drop interface where you can use preset elements to create your frame.
And of course you can share your project with others. Lucidchart is a well priced prototyping tool and its versatility allows you to jump in for a quick project or sit and tweak at a little bit to later use it for your final product.
Wingdings inspired design, expected to hit shelves in: never. The tool offers good options, though.
Marvel attracts you with its simple and clear design which allows you to get right to work. It also operates on web browsers, so it is accessible via many platforms (PC, mobile, etc.).
Marvel syncs with Dropbox, and offers access to projects for full teams, like other prototyping tools. Marvel can export the prototype as an .apk for Android developers, so you can turn your prototypes into offline apps.
To follow their words “napkins supported”, you can take a screenshot with your phone iPhone and turn it into a prototype with few clicks. It’s simple, clear, and most of all free, with some extensive plans available.
How can you not fall in love with a front page which already is an editor for wireframing? If you want to check out the features, just click on any element of the website for yourself live.
Moqups is easy and fast, like Balsamiq. No visual clutter included if you want to focus on the frame alone. The fact that it’s in HTML5 make it fast and seamless. The amount of members on projects is unlimited, so it’s perfect for larger and growing teams.
Dear Moqups, I introduced some improvements. Feel free to hire me.
Don’t mock this one, as this is a fine prototyping tool. It looks confusing, but once you get the hang of the interface and of the MockStore, you can use all the elements and templates available.
Creating a non-cartoonish mockup is simple, looks good, and you have an online link to a HTML wireframe which you can share as you wish. MockFlow is constantly updated and receives new features and fixes all the time, so it is good to see it develop rapidly. It uses Flash, but that shouldn’t be much of a problem.
I got excited at the sight of 2 notifications, but then I remembered it’s not 2010 any more.
UXPin is a great tool with tons of options for wireframing. But what caught my attention is the option of turning your sketch into a digital wireframe.
I don’t mean taking a screenshot and then using it as a background image – UXPin sells notepads which contains UI elements that can be modified as you wish. After having done so, you upload the picture to UXPin and it changes into a digital version! It’s a bit pricey, but the idea of seeing your sketches come to life is quite alluring.
UXPin doesn’t need that much recommendation – it’s a big player used by other big players such as Microsoft and Sony.
Because one date connected with one day of the week will be the harbinger of doom.
Protoshare makes you feel like you are entering the professional world of creating professional wireframes, but it also offers you the option to discuss projects in real-time.
Sharing is the proto principle, after all. The tool is clear and extensive – it may appear overwhelming at first, but the multitude of options available makes it a worthy contender.
See what I did here? Hint: It’s a completely normal picture.
Let’s follow the naming convention a little bit. When I first entered the proto.io site it charmed with the simplistic design of their page and tool. It’s clean and slick, and somehow familiar. Made me want to try it straight away without any further ado.
It’s a valuable prototyping tool for iOS, Android and Windows Phone, which you can later test on live devices. Give proto.io a go.
I’ve been greeted with a similar message, and I don’t look good in pictures ever since. Figures.
It will stick to you. Even though it uses Flash, it is rather slick and clean, and like proto.io it also gave me that feel of familiarity – it means it follows already successful design principles.
I was able to play around and get the hang of it fast, so that definitely is a plus. It is another viable option for creating your prototype, and it’s rather well priced. Most features offered by HotGloo are enough to get you going, so don’t hesitate.
I’ve stumbled upon this little thing completely by chance. It is the perfect prototyping tool for people who are suffering from a PTSD caused by transferring from paper to digital.
You choose one of the styles, illustration or pencil. One has straight lines whereas the other is a drawing by a drunk chimpanzee. Then, you use few basic elements to create a simple iOS mockup.
If you are in a situation that you need to create a mockup in 30 seconds or else the world will end, then this is perfect. Also, the “projects” are shareable, but you can’t control the changes once you made the link public – beware.
I know, I know, this is a lot to digest, but breathe, slowly, don’t let the options overwhelm you…
FluidUI design is fluid and the prototyping tool is simple to use, even though it might appear to be a bit clumsy once you perform too many actions.
You can prepare some basic wireframes or go armed to teeth and use high fidelity components, which simulate the environments you are creating for.
You can see the screen flows thanks to the Fluid Player, which will show you exactly how the prototype will behave on a real device. Features such as cloning screens or adding notes are also a plus.
I made a prototype of a convenient program for fixing all the IT problems of your relatives.
Yes, that’s what makes Pidoco stand out from other competitors. You can run tests of your prototypes by sending a link to users, and then you start gathering data. Otherwise, it is also a solid option for creating interactive prototypes and wireframes.
I decided to create something constructive here, but the result varies.
This one came off as a surprise. Wirify offers you a script which turns any website into a wireframe. Cool when you find an inspiring website and you want to use it as a basis for your new project.
This option is free, but the Pro version of the service allows you to export the wireframe into, for example, Balsamiq, for further edit. You won’t use it all the time, but it’s a neat service to remember about.
Wireframed UsabilityTools. Be inspired.
This is where we close off the list. Of course, there are many other prototyping tools on the market, some maybe even better than anything listed here. But this list tried to be eclectic in its choices. So, after you check out and find out which tool suits you best, you can start prototyping away.
Do you know what comes after prototyping? Testing! Testing your baby is one of the most crucial tasks to find out whether it is actually a decent project.
Torsten is CEO and founder of Userpeek. He is an old stager in the online business with 20 years of experience as an online marketer, conversion rate optimizer and UX strategist.
