Android Icons: Get more than 15000 android icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Best wireframe tools

Comments and suggestions in here

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.

mockups00

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.

mockups01

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

mockups02

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.

mockups03

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

mockups04

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.

mockups05

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

mockups06

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.

mockups07

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.

mockups08

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.

mockups09

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.

mockups10

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.

mockups11

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.

mockups12

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.

mockups13

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.

mockups14

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.

mockups15

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

mockups16

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.

mockups17

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.

mockups18

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.

mockups19

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.

mockups20

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.

mockups21

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.

mockups22

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.

mockups23

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.

mockups24

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.

mockups25

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.

mockups26

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.

mockups27

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.


48 Responses to “Best wireframe tools”

  1. Congratulations very good article

    • Thanks Xosé, we really appreciate it, feel free to check all our other articles at Webdesignshock and Tutorialshock…

  2. Really interesting stuff here! Thanks for the info :)
    keep it up guys !!!

  3. Rodolfo
    September 6th

    Great man!!!

    Just the mockups tools review that i need!

    By the way, include http://www.mockflow.com/ into the list.

    • Hi Rodolfo, is great to see our products helping people, we saw Mockflow but decided to skip it, although it’s also a great wireframing tool :)…

  4. Just want to say “Great Post”. Very useful information.

  5. andy warhall
    September 22nd

    lucid chart link is not working

  6. Also is free to use online tool http://framebox.org. It’s cool to fast creating simple mockups.

  7. Raoul
    May 2nd

    Wow, never tougth of something like these before, this concept it’s the rage…

  8. WebDesignShock
    May 16th

    Hey that’s a nice suggestion Ewa, thanks for sharing it :)…

  9. Anonymous
    May 16th

    Thanks, we will check it carefully.

  10. Interestingly, Mockingbird doesn’t look like it’s been updated in 6+ months – just check the blog.

    Also, your link to LucidChart doesn’t work.

    • WebDesignShock
      June 7th

      Hi John thanks for your comment. It’s true that Mockingbird hasn’t been updated for the past 6 months, however, when we wrote this post 9 months ago, it was still fully operating. Regarding the LucidChart link, thanks for the heads up, we’ve just fix it :)…

  11. Fantastic post, I love it. 

    • WebDesignShock
      June 7th

      Thanks Nurul!…

  12. New Mobile tool – proto.io

  13. WireframeSketcher is another rapid wireframing tool. It comes both as a standalone version and as a plug-in for any Eclipse IDE. Website: http://wireframesketcher.com

    • WebDesignShock
      July 14th

      Hey Peter, thanks for the suggestion!…

  14. Nilesh
    July 18th

    Hi,
      mockuptiger is another webbased wireframe application. you can use on your desktop or host it on your domain. You can use it freely on the web with the online edition.

  15. Nilesh
    July 18th

    Here is the link to Mockuptiger

    http://www.mockuptiger.com

  16. NkDigh
    August 6th

    Thanks for the list !
    Maybe you want to give a try to http://uireframe.com too.

  17. Web Designing in India
    September 16th

    These are very quality wire frame tools and it helpful to web projects. Wire-frame is essential in Grafic Web Designing

  18. I am using pencil
    and really nice and works god for me 

  19. Here is a new one  http://www.justinmind.com/prototyper/free-edition it’s completely free and very handy to build clickable mockups for web and mobile apps. It has a collaboration feature integrated as well

  20. [...] project, while the wireframes are there for you to make the whole diagramming of any web project.Source Link $(document).ready(function() { $('#social_nav_vertical li a').hover(function() { [...]

  21. [...] Best And Free Online Wireframe Tools For Planning Your Designs [...]

  22. [...] Best And Free Online Wireframe Tools For Planning Your Designs [...]

  23. Best and free online wireframe tools for planning your designs…

    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 …

  24. [...] Best and free online wireframe tools for planning your designs [...]

  25. [...] mentioned this nice tool on our “best wireframe tools” article a while ago and of course that we decided to brought it one more time. Markup was [...]

  26. [...] Para ver el artículo relacionado aquí: [...]…

  27. RT @webdesignshock: Best #wireframe tools http://su.pr/2ymX81 #design #useful

  28. RT @webdesignshock: Best wireframe tools http://su.pr/2ymX81 #design #useful

  29. [...] mentioned this nice tool on our “best wireframe tools” article a while ago and of course that we decided to brought it one more time. Markup was [...]

  30. Wireframe and mockup tools, best examples Web Design Shock http://t.co/AtPSk8bo

Leave a Reply

Comments

*