Best wireframe tools

It’s usual to see graphic designers having problems while trying to explain their customers the main idea of the project that they want to develop, this happens often because graphic and web designers are getting used to draw everything straight in the computer, without a previous hand drawn sketch.

When the creative arrives to the costumer’s office / house and finds out that the person is not familiar with graphic programs such as Photoshop and Illustrator and so there’s is no way to show him the super cool vectorized interface that was supposed to blow out your client’s mind; don’t worry my dear creative people, because now there’s a product that will solve all your graphic presentation needs regardless of having the complete Adobe Suite at your disposal.

We are talking about the mockups and wireframes, applications that are designed to work on your main idea without having to worry about resolution, color mode and other similar topics. Mockups are designed to work in function of the graphic appearance of any project, while the wireframes are there for you to make the whole diagramming of any web project. Many mockups / wireframes can be used online, saving you from having to install any graphic software in order to continue. Many of this applications tend to charge a determined price in exchange of its use, but we managed to find some really cool mockups and wireframes applications that you can use from any place at no cost.

Icon by Iconshock.

Mockups are great tools for generating quality graphics without relying on graphic programs or things like that. Mockups helps you reach your client with a general idea that allows the person to get an idea of the direction that the design is taking; you can use the mockups along with your client so both can generate changes while discussing the idea, and because there are usually simple interfaces, the client won’t get messed up with an excess of buttons and commands.

We suggest you to implement the use of mockups on your projects, because it will probably save you a lot of time and more than one headache, it’s a way to sketch up in front of your client without looking like an amateur.

1. Mockingbird

The Mockingbird wireframing tool is a nice graphic assistant designed by the people from Some Character; the application works as a simple sketching interface with the main symbols that any web designers needs to generate an initial structure for any website, The service has no cost until September 1th, so hurry up and give it a shot.

These are just some of the graphic elements that you can implement on your mockup while using Mockingbird, there’s even social networks clipart.

And this is an example of your wireframe can look using Mockingbird.

2. iPlotz

This is a more professional mockup for web developers and graphic designers, you apply for a free account and then upgrade to the premium service, or even take a free test to check most of the mockup’s features. In general terms, this is a graphic assistant that offers you the chance to generate great sketches.

iPlotz offers an elegant and complete interface, you can edit many things, including the font and color of the elements.

This is an example of a wireframe made with this mockups editor, useful complement for designers, no excuses accepted from now on when showing your work to your clients.

3. Pencil

Pencil is one of the must-used mockup tools by web designers, it has the particular property of being a Mozilla Firefox add on, thanks to the wide range of tools and buttons that this application offers, you can generate amazing wireframes that will blow away your costumer’s mind.

With the Pencil tools you even define a text property in terms of H2, H3, etc.

You can easily come out with incredible wireframes such as the one above employing Pencil, there’s almost no need to have a professional graphic software for it.

4. Website Wireframe Tool

An online mockup assistant made for building web site wireframes. The best qualities of this assistant are its simplicity and the no charging topic, this is for sure a tool that will take you out from rushing when you’re at the gates of a important meeting and there’s no way to show your PSD and AI files.

As you can see, this mockup tool uses the primary buttons for designing, you can practically do all your wireframes using rectangles and text areas.

You can make generic web structures with this tool, such as the previous example.

5. Cacoo

A beautiful mockup tool for diagramming, Cacoo offers you a nice working interface at no cost, you will find plenty of tools and buttons that will help you to create your starting idea, you only need to complete your registration before start using Cacoo.

As you can see, Cacoo has a friendly interface, ideal for every kind of user, which is a nice thing to mention about this mockup.

You can see above an iPhone sketch created with Cacoo, as you can see, this mockup has a great potential for developing web interfaces at their primary stage.

6. Lumzy

Great mockup tool, with Lumzy you can create quick wireframes and prototypes to show at your clients, as Mockingbird, this service is currently operating 100 % free, you should take advantage of this assistant while it’s still out there.

I guess that at this point your realizing that many good designs and artworks can be make with basic tools and that things like the Creative Suite don’t make the designing for us, these programs only help us to speed up our designing periods.

7. iPhone Mockup

OMG!, these guys haven’t forget the classic paper and pencil and even offer you two choices, you can either make a hand drawn design (not hand drawn properly but with that aesthetics) or a detailed illustration for making more elegant and stylized interfaces for your iPhone.

Now you can tell the difference, I think that both choices are great, it should be an option to mix the two styles in one single canvas.

8. Lovely Charts

A beautiful online application completely free. Among the features of this mockup tool we find the variety of clipart images and elements. The program itself is quite intuitive, which makes it one of the fittest options for web and graphic designers. You will experience a nice moment when working with this number 8 of the countdown.

This screenshot shows you a close idea of how the Lovely Charts interface looks like, you must be noticing that you can even use colorful icons on your wireframes.

That’s an example of a quick wireframe created with this mockup, it didn’t took us more than 1 minute to create this.

9. Gliffy

Focused on diagramming and wireframing, Gliffy offers a free mockup interface for the test but with the change of upgrading to a premium account at $ 5 USD per month. I sense a strong relation between this program and PowerPoint, except for the fact that Gliffty does not create interactive presentations for the moment.

The main interface of Gliffy offers you the necessary tools to generate nice designs and wireframes to show to your customers.

And that’s an example of a web interface made with this mockup application, I think it’s clear enough for your client to understand it.

10. Balsamiq

Balsamiq mockup is a very intuitive tool that practically maintains the properties of a hand drawn sketching process, but on digital media. The interface itself resembles a craft workspace and the drawing quality is similar to the one achieved whilst drawing on paper. The mockup comes in a trial version for web and a desktop application at $ 79 USD.

As you can see, the Balsamiq interface offers a series of buttons and clipart, designed as if they were handmade, without being technically perfect, the Balsamiq mockup is good enough for sketching and drawing.

As you can see, this mockup fulfills the essential sketching needs, as the prototype above shows, although I think that is not fun to use Comic Sans as a the default font.

11. Jumpchart

Different from other mockup tools that we have listed on this countdown, Jumpchart allows less artistic creation and focuses on the structure, making it a nice wireframing tool, simple and easy to use for creating web designs and interfaces.

The navigation across the workspace is quite simple, the only real thing that will take you some time is the registration, and we are talking about 1 minute tops.

As you can see, the Jumpchart’s interface is clean and elegant. You will feel comfortable while making your wireframing process, because this is definitely a great wireframing tool for web developers and designers.

12. Templatr

Templatr is an online mock-up tool that helps you to design custom WordPress wireframes. This is a powerful tool to use whilst working on your own web projects. The main problem is that in order to use Templatr, it’s imperative to have a certain level of knowledge of CSS.

The side bar works as the main task section, where you can switch between designer mode or programming, it’s also on the side bar where you can download your design.

An example of a wireframing made with Templatr, as you can see, the diagramming part is great, turning this mockup into a non-missing tool for designers and developers.

13. Creately

Another great mockup tool, with zero cost you can access to the mockup interface, full of tools and complements, ready for you start making your ideal wireframe. You can also access to the premium service that includes many more tools and resources. You can start from a $ 4,95 USD account and then upgrade to a team service.

The tools that Creately offers has nothing to envy to other paid services, with the tools offered by this mockup service, you can generate quality mockups and sketches.

As you can see on the example above, you can make quality wireframes that almost look like they were  made with InDesign, the variety of tools and complements offers you a great drawing experience, whilst making some amazing designs and sketches.

14. Lucidchart

The canvas is there, all you need to do is draw. With Lucidchart you can either start from a blank page or choose one of the available templates such as wireframing, iPhone, chart, site map and more. You can apply for the free account or if you’re looking for something a little more professional, the premium account is for you.

The interface is similar to other mockups, plenty of cliparts and basic edition tools, everything that may be necessary in order to develop a nice wireframe.

Above you can find an example of a basic website structure made with Lucidchart, as you can see, this mockup is helpful when you need to show your client a general idea of how the result is going to look like.

15. Mindmeister

With this mockup tool you can easily create charts and mind maps. For start, you should opt for the free account and then you can think about going premium, although it’s imperative for you to create an account completely free before start working.

I really like this mockup’s interface, lovely colors, easy to read icons and a clear structure. I’m sure that you will enjoy drawing with this online wireframing tool.

And that’s an example of a working progress, notice that we barely took a couple of seconds making that mind map, ha ha ha. Anyway, this is a nice application for those who want to keep everything in order.

And that’s it for this countdown, 15 of the most helpful mockups and wireframing tools on the internet, I’m sure that you will be never be blocked again due a lack of graphic programs because now, with this great tools, your ideas will always have a place on the digital world. Let us know your opinion about this post and all the previous ones that we’ve released on Webdesignshock, see you next time.

 

 

WebDesignShock Editorial

Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock