I have been using wireframe tools for many years now, and there is no shortage of decent online wireframing tools, some are offline browser software based applications that give you the ability to host and share your prototypes online for feedback and reviews. While others are online browser based solutions that give the ability to work directly in the browser with drag and drop functionality, with also the ability to easily collaborate with others.  The main point of these wireframing tools is to give Internal or External Stakeholders the ability to quickly review low-fidelity greyscale (in some cases high fidelity) wireframes. The first digital wireframe prototype drafts will normally be colourless and usually just contain the main navigation menus, boxes for placeholder images, links to pages, lorem ipzum placeholder text, focal points in grey-scale, basic user-flow and any other user interactions which gives the user an idea of how the structure of the product will work.  Some prototyping tools allow you to set usability tests that improve the user experience on your products with user testing.

I have selected a few of my preferred protyping tools of choice for UX designers based on my experience using them these can help in the process of creating mood boards, concepts and interactive wireframes and prototypes. These tools have been selected for the usability of their designs and ease of learning.  Some basic knowledge of code is beneficial for some tools, but ideally these prototyping tools are used so you don’t have to waste time writing any code that could essentially be scrapped and wasted, this is called product prototyping.

Most of them are based on responsive grid patterns so it’s easy to test the result cross platform on any device. If you’re a UX Designer and you’ve never used this kind of tool, it’s time to try. If you’re passionate about UX and delivering the best all round product and solution you’ll almost definitely end up making clickable fully interactive prototypes part of your workflow. As it can save huge amounts of development time especially on medium to large products where it’s sometime difficult to fully visualise the complete solution before setting the Design & Development teams away, producing the final visuals and writing time consuming code.

Axure

www.axure.com

This is my personal favourite UX prototyping tool by far- but for initial concept ideas generation you must start with:

• Pencil
• Paper
• Post It notes
• Whiteboard

Going back to basics at the start of any high level concept with a pencil and paper is always my preferred approach, this gets the process flow and Information Architecture order in a clear understanding form, and sketching should always be used in the very beginnings of any UX wireframes you work on.

Anyhow back to Axure, this really is a great rapid prototyping web and app wireframe solution for all you User Experience designers out there. The biggest selling point is of Axure is the incredible ability to easily share projects with fellow workmates or stakeholders, this can be easily done with people in the office or users anywhere in the world with an internet connection and web browser.  I have used Axure for complex front-end layouts, back-end admin layouts and front-end apps layouts. For complex projects I really haven’t found a protoyping tool that comes close to competing with Axures functionality. There’s a learning curve involved to fully achieve all the functionality you need for your interactive product, but I have found a way to do most things required, if for some reason you cant do what you want, then there are comments which can be added in-line to the prototype and then you can generate a full written spec document to pass onto the relevant parties involved with the project.

When you are finished working on your prototype – simply export your project to HTML and it will run in any browser, without the end user needing to install any viewer application, this makes Axure very versatile when testing.  There is a featured called AxureShare which allows you to host your projects on Axure Servers, you can password protect projects and even create you own custom URLs if needed. Again this is a massive time saver in terms of creation and end users viewing and testing as it will work in any modern web browser.

To really get the most out of Axure you need to embrace the Axure community, there are also good training tips on the Axure website as well as a useful help forum- Here is a quick list as a good starting reference point:

• Axureland – http://axureland.com/
• Axure Protips – http://axureprotips.tumblr.com/
• Totalwireframe – http://www.totalwireframe.com/tu…

You could use Axure for creating High fidelity prototypes if you like, but this is where I feel ‘Invision’ has the edge for greater efficiency and ease of use.  For those looking for quickly generated, complex, interactive wireframes, that can be easily shared and tested – there really is no competition for Axure.  There is a 30 day free trial – then you need to purchase a license, if your a busy UX Designer this tool is a must have.

Check it out here – http://www.axure.com/

Invision

http://www.invisionapp.com/

Invision can effortlessly transform your final visual designs into high-fidelity prototypes for web and mobile. It’s integrated with Adobe – Photoshop, Fireworks and illustrator. You can upload images and use hotspots to create interactions like a real app or web product. Send the mobile or desktop links to your stakeholders and get realtime feedback directly from them in the browser window. This can be a real time saver if your Stakeholder needs remote access to the product, they can added comments and lists directly into the project, for all to see. There is a realtime presentation and whiteboard sharing session that excels in collaborative working, amend something in the desktop browser and see almost instant (realtime) changes on other devices with LiveShare. I have used Invision on projects for high-fidelity visuals for iOS and Android app prototypes. Invision is very quick and easily integrated into Adobe software, and creating screen transitions and animations is a breeze.  There’s also a full version control and syncing so its easy to manage and roll back changes if you don’t like the amends that have been made to the product.  There has just been a recent announcement with prototyping compatibility for the Apple Watch I haven’t used this functionality but its nice to know it is available if needed.

If you have the final visuals created is say a well layered .PSD file, then before you know it you can have complete looking finished working product displaying on your chosen mobile or web platform.  I cant tell you how much time this saves in the long run, if something just isn’t working well (both visually and functionally) then now is the time to address it and fix it.

There’s a monthly subscription to use this service although you can create one free project and give it a whirl, then to create a second project you’ll have to pay, but it’s well worth every penny, trust me!

“Its a faster way to certainty”  – “Its a game changing design tool”

Check it out here – http://www.invisionapp.com/

Moqups

https://moqups.com/

As a free browser based prototyping tool, it really is a quick and simple to use tool, and sometime its just what you need to get your initial concept into a quick interactive Mockups that can be shared and quickly adjusted, this really is a great tool for quick and dirty low fidelity wireframes.

It’s fast, easy to use and works without a browser plug-in. Screens and buttons can be linked so you can publish a demonstration for your clients to view and use images can also be exported for specification diagrams. At the time of writing this you can create two projects for free and you get 5MB storage space, after that you have to pay a monthly subscription fee. For larger companies and requirements there is a more structured business pricing plan based on number of users etc..

Moqups has been created in standard HTML5 and JavaScript, with drag and drop functionality that makes it impressive. Highly recommended.

Check it out here – https://moqups.com/

POP (Prototyping On Paper)

https://popapp.in/

POP is a mobile app for Android and iOS that lets you import your sketches by taking a picture and upload directly from Dropbox folder. POP automatically adjusts brightness and contrast to make sure your sketches are legible and clear. Create wireframes simply with the following workflow:

1. Design on Paper
2. Take Pictures
3. Link & Play
4. Test on chosen device

Use simple hot spots to link pages and images to bring your app ideas to life without design or coding skill and demonstrate user flow and concepts to colleagues and clients for feedback and refinements.  There is a free app available for iOS, Android and Windows 8 (desktop app), it can be a great tool for getting a feel for the complete user flow of an app. POP has got a place in my software tool-sets and is worth a try.

Check it out here – https://popapp.in/

Conclusion

In conclusion to the wireframing tool-sets, there are many more tools available out there but I find these 4 really do hit all the spots and make my life and the projects I work on easier to manage and create, so that all involved have a clear and defined understanding from the beginning.  I really cant stress how important the wireframing and user testing at this early stage of a project/product is.  Using these tools as a UX designer will help create a innovative and intuitive user experience that will keep high retention levels and make your product a joy to use for everyone.

Please leave any suggestions or your preferred workflow in the comments below and start a discussion.