Something very common in Web development teams is drawing mockups of the screens of applications and their elements so that they can better convey the idea of what they want the programmers to implement. This is true also for customers, who sometimes do not get an idea of what we are telling them if they do not see it drawn.
This type of sketch or hand – painted prototypes of websites and apps (usually called wireframes) are very useful, but many of us find it problematic to draw the wireframes. A specialized tool comes in handy to make it better, faster and stay presentable.
Below we propose a list of products, both free and commercial, that serve to make this type of prototypes and that will be very useful:
Axure Rp:
It is a professional prototyping tool that allows you to create wireframes to pre-design a web app. Available for both Windows and Mac platforms. You can draw both static and interactive wireframes that simulate a real user browsing experience. It has a collaborative role to share web models with other people and to receive feedback in real time.
Balsamiq:
With it, you can make interactive web prototypes. You can use this tool as a web service or download it on your computer (works with Windows, Mac and Linux). Your free account allows you to create an unlimited number of wireframes that last 7 days. It also has the collaboration function.
Flairbuilder:
FlairBuilder is a web tool that allows you to make sketches of your web apps and your iPhone Apps. It has no possibility to collaborate with other people nor is it possible to export features.
Gliffy:
Based on a web service, Gliffy allows you to draw sketches of your website and create wireframes both static and dynamic. You can also collaborate with other people and receive their opinion in real time. The free account lets you make up to 5 unencrypted sketches but carry advertising.
Iplotz:
This tool allows the navigable web and application mock-ups. You can download it on your computer (Windows / Mac) or you can use the service via the web. It has a free account with which you can make prototypes that have up to 5 navigable pages.
Jumpchart:
Jumpchart is a browser-based web-planning application that allows you to sketch the content of the web page. You can create wireframes both static and interactive that simulate the navigation between web pages of the model.
Justinmind:
Justinmind is a professional tool for prototyping websites, software applications and mobile applications. It can work with Windows or with Mac.
Mockflow:
MockFlow is a very simple web tool used to design web and software applications. It allows collaboration and browsing the web page in addition to visualizing its structure. The free version is limited in relation to the number of prototypes we can make.
Mockingbird:
This is a free web service with which you can make prototypes of web pages. You can design your website in the browser itself by taking advantage of a large library of web objects to customize your pages.
Napkin:
Although it is a Java based tool, it is also available for Windows, Mac and Linux. The sketches made can only be static, but it has an extensive library of GUI symbols to use in your models. It does not offer the possibility of collaboration or export to other formats. The positive is totally free and the account is unlimited.
Pencil Project:
It is an open-source Firefox add-on that allows you to create wireframes within Firefox. There is no possibility of collaboration.
Smartdraw:
Smartdraw is fully integrated with Microsoft Office. Very useful for making charts, flow charts, …. However, there are no interactive wireframes or designs for mobile phones.
Visio:
This tool belongs to the Microsoft Office suite that can be purchased independently of other components of Microsoft Office. It is only available for computers that work with Windows. You can create various types of visual projects like flowcharts, Venn diagrams, maps and web templates (standard and mobile), as well as prototypes of software applications.
Wireframesketcher:
If you work with the Eclipse programming environment, you can also use WireframeSketcher, which is fine and integrates seamlessly into the environment.
Below you will find a table where we have tried to make a comparison of the most important characteristics:
I hope the post helps you define your next web app project. With that, if you need more consultancy for free, contact us. We’ll be more than happy to help you!