A good and reliable deliverable is essential for every web designing and development program. The most important of all deliverable are the WIREFRAMES and MOCKUPS. The biggest advantage of using these deliverable is that these are easily understandable by clients and are action oriented. In addition to this, these help in communicating vision and expectations in the most realistic manner and help in easy collaboration and discussion. The progress being made can be easily tracked by making use of WIREFRAMES and MOCKUPS, thus inspiring change and action.
The difference between a mockup, a wireframe and a prototype?
A lot of people use these terms (Mockup, Wireframe and Prototype) interchangebly, however they are significantly different and have specific application in software requirements stage.
- A wireframes is a skeleton. It doesn’t include colors, typography, pictures or details and NOT a lot of attention is given to the exact layout. It does not convey the brand. Instead it just has description of the content, functionality and the hierarchy within which content is displayed. Wireframes are a good way to do requirements workout sessions, these can be used during requirements discussion with the end users or business analysts of the application.
- A mockup contains colors, typography, pictures and other details. A lot of attention is given to the exact layout and exact proportion of content elements. The common usage of mockup is for UI desgin using rich photo editing software like photoshop or GIMP.
- A prototype is something that demonstrates some functionality of the finished product. These are typically used in large projects to save cost by doing the simple feasibility before real project work is started.
Following is the list of the most awesome Wireframe Mockup Tools for developers:-
- Pencil Project
- Mockup Builder
Balsamiq Mockups are designed in a manner so as to help your team and clients to start making use of the Wireframes, as soon as the process starts, thus reducing the cost. The web applications of this mockup offer many ways which help you in interacting with your team and clients. Balsamiq is an extremely high speed mockup which allows you to create designs within no time. Hence, this is one of the best Mockups which can be easily used by both developers as well as non-developers.
Pencil Project is a prototyping and sketching Firefox which has been developed with the mission to create an open source tool which is free and can be used for GUI prototyping and for making diagrams. Pencil Project comes with built-in stencils which makes prototyping and diagramming easier. Apart from this, it has other features like inter page linking, cross platforms, support for undo/redo operations and text editing, standard drawing operations, etc. Pencil is available free of cost and can be used for all platforms run by Firefox 4+.
Protoshare is a collaborative prototyping tool which is web based and quite easy to use. This tool helps the entire team in working collaboratively to create web app prototypes and Wireframes for websites. You can make use of Protoshare to present your ideas in a visual manner which can easily be understood by your team members. This tool even has a built-in mechanism which results in the failure of bad ideas at an early stage. By keeping the entire team on the same page, Protoshare helps save time and money by eliminating all the development dead ends.
Templatr is a tool which will help you in creating powerful customized word press templates easily and in the shortest possible time. This tool works in a four step procedure including layout selection, uploading graphics, finalization of the page elements, and then downloading. With Templatr, you can even choose an action to change individual elements along with saving your work in the main server for future reference.
Serena is a prototype composer which helps you in creating a quick and accurate simulation of a particular application. This means that without writing down any actual codes you will be able to visualize the functioning of a given application. This prototype composer can help you build simple and high fidelity prototypes which is an exact replica of the real thing. Depending upon your requirements, you can choose between the two available editions of Serena namely the Professional edition and the Community edition.
Mockup Builder is a prototyping software which will help you in designing your website mockups or software within no time. With the help of this software, you can even share a link with your clients and customers and receive feedbacks. This program creates lines and outlines which look quite professional and can be easily mastered. Mockup Builder will also help save your valuable time and money by helping you create the best UI software.
Mockingbird is best known as a Wireframe which is always on the fly. It is one of the most effective online tools which saves your money and time by helping you plan fast and effectively and by keeping a track on your progress. You can easily satisfy your clients by presenting your ideas through clear mockups and eliminating expensive back-and-forth. You can even make use of Mockingbird to create an effective brainstorming session for the entire team. This will help you in building better products and delivering as per your client’s expectations.
Invision is an easy and beautiful tool which will help you in creating wireframes and prototypes which are fully interactive. Your clients will have a real experience of how you envision their site and they can leave their comments directly on-screen. With the help of this tool, you can design screens by making use of your favorite graphic programs and can even pull in other designers to work on your project.
Flairbuilder offers you a unique platform through which you can create interactive wireframes for your websites. A cross platform prototyping tool, Flairbuilder helps you work fast, easily and in the most effective manner. Flairbuilder provides you with a list of tools which, until now, only the programmers could use. You will be able to create elegant wireframes and clean layouts by making use of the powerful design features. You can even link with your clients through functional live demonstration of your ideas.
PowerMockup is a wireframe tool that integrates with Microsoft PowerPoint. It provides a library of wireframe stencils and icons that users can drag and drop onto their slides. Because the stencils are assembled from standard PowerPoint shapes, they can be modified and grouped at will. Completely vector-based, the stencils can be resized without losing quality (unlike, for instance, the elements and icons of Balsamiq Mockups). To locate an item in the stencil library, users can employ PowerMockup’s quick search feature, which automatically filters the list as you type and also recognizes synonyms and related keywords (such as “grid” and “table”). In addition, users can extend the stencil library with custom items and categories. Simply highlight the shapes to be added on a PowerPoint slide and select “Add to Stencil Library” from the context menu. In conclusion, PowerMockup is an intuitive and self-explanatory wireframing tool that has some powerful features. Although not all users will be initially inclined to use PowerPoint for wireframing, they will discover that the widespread adoption of PowerPoint (especially in the corporate world) makes it an excellent communication tool that invites business and other non-technical users to the design process. Those users can work with an application they already know how to use without having to deal with an unfamiliar proprietary web or desktop tool. PowerMockup is compatible with PowerPoint 2007 and 2010 (for Windows). The trial version, downloadable from the PowerMockup website, is fully-functional but includes only a limited number of UI stencils.
With HotGloo, creating wireframes will be a completely new experience for you. This is easy to use software which is really intuitive and will make you feel comfortable the moment you start using it. The built-in chat functions will help you in collaborating with your entire team so that the work gets done faster. Regardless of the browser or the OS you are using; you can access your account at all times and from all places. This tool even has a built-in application for auto saving and backups so that your work can be stored on secure servers.
WireframeSketcher is a powerful and flexible eclipse plugin to draw mockups. This provides a wiki language support for formatting text based fields. It has a huge set of inbuilt vector graphics icons and you can also include your own custom icons into the wireframes.
Cacoo is a free online digram creation and collaboration service. Its very simple to use and has wide variety of stencils to create Wireframes, UML diagrams, Site maps and network diagrams. One of the coolest feature is chat, this allows team members to interact and discuss things with each other while working on a project.
MockFlow is a special kind of wireframe creation tool. This allows you to create mockups online as well as offline. It comes with a plenty of inbuilt free components and icons along with some premium paid components which can be conveniently purchased from MockStore.
iPlotz, is a flash based wireframe creation tool. This works on windows, mac and Linux with flash supported browsers. iPlotz provides 1 free project with limited page options.
Gliffy is a powerful online digram creation application with collaboration features. This allows you to create a wide variety of diagrams including wireframes and mockups. This can also be used to create Flow Charts, org charts, Venn diagram etc.
This is free HTML5 based prototyping tool that is really intuitive and easy to use.
So, now instead of spending your valuable time and efforts on other deliverable which make little or no impact, make use of Wire-frames and mockups to inspire change and stimulate your imagination.
Nice ticket, thanks for sharing.
I have also used WireframeSketcher a lot. It is quite powerful, and is available in several packagings : standalone or as an eclipse plugin (very nicely integrated) for instance.
Well worth a try IMHO.
@Parabellum – Thanks for your comment. Will look into WireframeSketcher as well.
Have you guys seen Moqups yet?
It's a nifty HTML5/SVG App used to create wireframes/mockups! Check it out https://moqups.com