Quick Mockups and Prototyping Tools

Ever wanted to quickly sketch GUI prototypes? But never found a quick and easy way to come up with GUI mockups?
This post outlines some of the popular tools out there for quick prototyping and a listing of the commercial and open source variants plus a detailed outline of the free and open source Pencil mockup application.


During the search for prototyping tools I stumbled upon the following commercial tools.

Name Description Source URL
Balsamiq Provides a Cloud and a desktop application for mockups and prototyping. Excellent collection of templates. Consists of wireframe to sketch type UI elements.Consists of integration with Confluence, Jira and Google Drive for collaboration. http://balsamiq.com/
Balsamiq
Invision

A web based solution which allows to organize the prototypes according to projects. It allows prototyping for Web and mobile projects. The free subscription allows two projects to be created. http://invisionapp.com/
invisionapp_small
UXPin A web based solution which allows to organize the prototypes according to projects. It allows prototyping for Web and mobile projects. The free subscription allows two projects to be created. http://uxpin.com/application-features.html
UXPin

The free alternative applications I came across are following

Name Description Source URL
Pencil A popular opensource application for preparing mockups is pencil as I mentioned above. It comes as a desktop application. Pencil is flexible and contains many templates and UI elements to start off designing. http://pencil.evolus.vn/
Pencil_small
Concept.ly This is a web prototyping tool more geared towards commenting and collaborating on a set of GUIs designed and uploaded from elsewhere. It supports adding hotspots to various parts of the GUI and allowing to add comments and refinement feedback. Currently its provided as a free service during the time of this blog. http://www.concept.ly/features.html
Concept.ly

When Pencil was put in to use for our GUI designing, I seemed to find the tool quite convenient. Though there weren’t many stensil collections as much as Balsamiq, Pencil consisted of all of the crucial GUI components for Desktop, mobile and for Web right out of the box.

Furthermore it provided ways to link buttons to other pagers and allows to export all GUI pages onto a navigatable Web archive. This allows to quickly go through the UI and to identify screen flows easily. Additional Page notes can be attached to describe about the pages, and to hold the nitty gritty details of a page that might be required during actual UI implementation.

Pencil also provides ways to maintain your own collection of stencils and to import vector based stencil templates from illustration tools such as Inkscape.

For more details do visit the Pencil project website. For added stencils and templates follow the link here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s