Wireframing applications are among the most vital components that constitute the arsenal of any designer or developer. Even before you actually start the visual design process, wireframing allows you to lay down the details and clarify any confusion or doubts related to the functionality or content. Thus, wireframe apps serve the simple yet extremely important purpose of saving time and effort in the long run.
However, if wireframing as a process is to be made full use of, it needs to be done properly, else it may only end up becoming another chore in the life of a designer or developer. It is at this point that good wireframe apps come in handy. However, the most awesome and feature-rich wireframe apps are rarely free, and not every designer can shell out money for such apps.
Today, we are taking a look at three wireframe applications that have launched recently. Oh, and before going any further, here is the best part: all of these apps are totally free! So just put that money aside, and dive in:
As a swift and minimal app, Wireframe.cc is extremely easy to use, and whether you have prior experience with wireframing apps or not, you will not take long getting accustomed to it. Click, drag, and draw — Boom! You’ve got yourself a rectangle; now just select the stencil type to insert, and you’re good to go!
Don’t fall for its simplicity though, because Wireframe.cc is one smart tool! It can guess what you intend to draw (though of course, do not expect absolutely impeccable results here). Say, if you are drawing a wide and thin element, it will probably be a headline, and not a circle. Once it has made the guess, the app will present you with only relevant tools and options, nothing else.
Furthermore, all your wireframes get a unique URL, that you can easily bookmark and share. If, on some fine day, you get the urge to re-edit an old wireframe that you once did, simply head to that URL.
MockNow is an online wireframing tool still in its infancy, and is just a little over a month old.
The mode of operation behind MockNow is simple: you are presented with a ‘Mock Document’, where you can drag and drop and stuff and do all the action. To your left, you have a toolbar containing the ‘Mock Items’, that are, obviously, UI elements and items that you can drag and drop on to your Mock Document. You also have a Document menu that gives you options to tweak and resize the Mock Document, followed by an Arrange menu that lets you, well, arrange items, and the menus themselves are surrounded by buttons for copy, paste, preview, etc. Just like Wireframe.cc, MockNow lets you share your wireframes.
Try MockNow →
And lastly, allow me to introduce Moqups, an HTML5-powered utility that lets you create mockups, wireframes or UI concepts.
The usage is simple, though it does take some time before you do get used to it: a single click to select, two clicks (with a short pause in between, mind you) to select and configure, and double click (alternatively, two single clicks without a pause in between) to edit. Elements such as rectangles, headings, links, check boxes and buttons are called ‘Stencils’. Apart from Stencils, you can also upload your own images, though you will need to register for an account for that.
The interface? The Moqups menu on the far top-left contains common commands to create new moqups, etc. Thereafter, you have Stencils (or your own custom images too, if you have uploaded any) to your left, and the main action area right in front of you. Buttons to common tasks such as object linking and alignment are on the top-most part of the screen.
Moqups offers a properly defined project structure: you can have pages within a project, and link them to each other, if you so desire. Beyond that, you can also export your work in PDF or PNG formats, or share it via email.
Over To You…
What do you think of these apps? Are they better/worse than the ones that you are currently using? Have your say in the comments below!
- 50 Free Wireframe Templates for Mobile, Web and UX Design
- 20 Inspiring Examples of Web and Mobile Wireframe Sketches
- To Wireframe or Not to Wireframe?
- Wireframes… Who Needs Them?
- The Benefits of Using OmniGraffle in Web Design
- 10 Completely Free Wireframe and Mockup Applications
- 18 Inspiring Examples of Sketching in Icon Design
- An Introduction to HTML Prototyping