Top 3 FREE Wireframing and Mockup Tools – Lumzy, Mockup Builder and Tiggr Compared and Reviewed


What is Wireframe? Mockup? Prototype?
Before we get started on comparing and exploring the 3 FREE wireframing and mockup tools – Lumzy, Mockup Builder and Tiggr, we will firstly talk about what a wireframe is, what is a mockup and what is a prototype. Wireframes, mockups, and prototypes are the important things in web design and web development phase. It helps web designers and developers to determine, evaluate, study and clarifies what are the important things to be on the different page types they will be having on their website.

So, what is wireframe, mockup and prototype all about?
Wireframes are simple sketches or illustrations of your basic structure and components of your web page. When you tend to brainstorm on the things you want to have on your website like basic page layout structure, navigational scheme and site components; that’s what you called wireframe.

Mockups focusses on your site’s visual aesthetics such as page elements, typography and graphics of your site design. Mostly mockups are the one that web designers sends or shares to their clients, because it is one of the closest illustration of their proposed actual final site design.

Prototypes are the most important among the three if your client wants to see the important functionalities and it gives them to explore or simulate around the way the site will work. And this stage also is a testing process to web designers and web developers to see how the website will behave on certain page areas. Prototypes usually constructed using HTML/CSS.

We know already what is wireframe, mockup and prototype is all about. So, what’s next? The tools for wireframing. Tools plays a vital role on every web designer. It can be in pen and paper or make it more time-saver and more helpful – Web-based or desktop wireframing tools. The tools you decide to use will depend on your personal preference and your clients requirements. Some of the popular wireframing tools out their are Mockingbird, HotGloo, Mockflow and other paid version. Although they are paid, some offered a free 30 day trial of their products. This tools will help you reach out to your clients effectively; ability to share wireframes with other team members and to your clients.

But if you still wants a cheaper and reliable wireframing tool like me, you will consider finding a totally free wireframing tool. And for that, WDA comes in. I am going to compare Top 3 FREE wireframing tools today and I will go over to their pros and cons and what are the features that we as a designer wants to add on their wireframing application tool. What I will discuss are purely my observations, assessment and my actual experience on using the Top 3 FREE wireframing toolsLumzy, Mockup Builder and Tiggr.

What I Needed It For

So basically before settling or choosing to a wireframing tool I need to list down all the things that are essential on choosing the “best” wireframing tool. For me what I need is that the wireframe and mockup application tool should:

  1. Let me export in either JPEG, PDF or PNG form
  2. Be easy to use
  3. Many elements that let me create a extensive mockup
  4. Team sharing and editing
  5. Import my own images
  6. Can be use as web app or Stand-alone for Both Win and Mac
  7. I can share my mockups directly, no need to download the files.
  8. Mobile elements/controls ready
  9. Drag and Drop or 1-click elements into canvas feature
  10. Lastly, it should be FREE! (yes, I know I’m quite cheap right now, that’s why I wanted it to be a free wireframing tool) :)

1. Lumzy

Lumzy is a quick mockup creation and prototyping tool for software designers and developers. You can go beyond creating wireframes and prototypes but adding events within your Lumzy controls. With Lumzy, you can easily create your own mockups and share or send to your clients on the fly.

Top 3 FREE Wireframing and Mockup Tools - Lumzy, Mockup Builder and Tiggr Compared and Reviewed

What do I like about Lumzy?

  • Intuitive interface
  • Can import your own images
  • Added export function – Export to PDF or JPEG. Export in PDF all your project’s pages and sub-pages in one PDF file.
  • Save user’s newly added controls or elements.
  • Excellent team feature sharing
  • Real-time editing and collaboration
  • Offers multiple themes skins (cartoon-ish or hand-drawn, windows vista theme and mac theme)
  • Built-in image editor
  • Easy sharing of your Mockups to the community via Twitter
  • Supports chatting environment while you share
  • Easily print your project mockups
  • Endless supply of elements/controls
  • FREE! No hidden charges!

What do I dislike about Lumzy?

  • No desktop or offline versions
  • No mobile ready controls
  • Visible grids on canvas not available
  • Flash-based

What features/improvements I can suggest for Lumzy?

  • Add visible guidelines or gridlines on canvas
  • Ability to snap elements into gridlines
  • Support for mobile elements/controls
  • Be able to export layout as raw HTML/CSS
  • Ability to add notes to each fields or elements
  • Maybe add a label (Close along with “x” button) or make another alternative to close a simulation (like pressing ESC maybe); it is easily get unnoticed the tiny “x” close button on the upper right corner
  • Sets auto-save intervals
  • Have a pre-defined screen or canvas sizes

What bug errors/reports I noticed?

  • When simulating the project at first, its working. But on the second try it is not working anymore.
  • Delete not working when I used my keyboard

One of the functionality you get first notice is the exporting of your mockups with pages and subpages in PDF. Simply share your mockups by URL Link, Share on Twitter or Send it via Email. Another feature that you’ll get notice is the ability to import your own images, which is great when you want to add your clients logo into your mockup. Their unique sharing feature really stands out. You can share your projects publicly via twitter or privately via sending email or inviting your team to participate. Once your team participated they can actually edit your mockup in real-time and you can chat directly on them. They also have this thing called Community Templates wherein you can search or add your own templates for you and for the community to use it.

But amidst intuitive interface and better functionality it has its downside also. One of that downside is that Lumzy is a Flash-based web app tool. Which clearly will be an issue because of the some designers and developers are now shifting to HTML5 as for making web rich-interactive application. Other than that, it’s quite an outstanding mockup and prototyping tool.

Top 3 FREE Wireframing and Mockup Tools - Lumzy, Mockup Builder and Tiggr Compared and Reviewed

Try the Lumzy App here

2. Mockup Builder

It’s just recently that Mockup Builder was released, but it is now making noise from the design and development community that this will be a great wireframing tool. It allows you to create interactive wireframes and has lots of pre-defined elements to choose from.

Top 3 FREE Wireframing and Mockup Tools - Lumzy, Mockup Builder and Tiggr Compared and Reviewed

What do I like about Mockup Builder?

  • Intuitive Interface (same as the Microsoft’s Expression Blend interface, what do you expect it was based in Microsoft Silverlight)
  • Supports mobile ready elements (iPhone only)
  • Easy 1-click or drag and drop elements
  • Has visible gridlines
  • Snap elements to grids

What do I dislike about Mockup Builder?

  • No desktop or offline versions
  • No easy way to share and collaborate
  • Has no team editing options
  • Their is no way to import or add your own images
  • Microsoft Silverlight based
  • Takes time to load (well maybe because of my internet connection)
  • Lack of professional look in terms of elements/controls, it only offers sketchy or carton-nish elements
  • Can’t open my save projects again
  • Two annoying horizontal scroll-bars when my elements where beyond the set default canvas height; One on the canvas and one on the web browser. And how can I set my canvas height? I think I can’t, no options at all!
  • Comic Sans as a default font? Seriously? Or maybe it’s because of the sketchy or handwritten look of the comic sans that is why they used it as default font.

What features/improvements I can suggest for Mockup Builder?

  • Yes, I know they support mobile elements but it’s only on iPhone environment; what about Android, iPad or blackberry?
  • Be able to export layout as raw HTML/CSS
  • Ability to add notes to each fields or elements

What bug errors/reports I noticed?

  • Delete not working when I used my keyboard
  • Shortcut keys not working
  • When I tried to lock one element, I cannot unlocked it anymore!

I know Mockup Builder folks said that I can share a link to my client or to my team, but how? I cannot even see it on the application. I can’t share it at all. :(
I am not harsh here but I think if they released their app, they should have a beta version or something first (or did I missed it). Overall, they are some some commands that are not working properly and some bugs to be fix immediately.

Top 3 FREE Wireframing and Mockup Tools - Lumzy, Mockup Builder and Tiggr Compared and Reviewed

You can try Mockup Builder app here.

3. Tiggr

Although it’s still currently in beta Tiggr gave me the resources I needed to create a prototypes not only for web but also for mobile applications. But before you can use Tiggr, you will first register your email and your desired password so that you can freely enjoy the Tiggr awesomeness!

Top 3 FREE Wireframing and Mockup Tools - Lumzy, Mockup Builder and Tiggr Compared and Reviewed

What do I like about Tiggr?

  • Intuitive Interface
  • Can totally export layout in raw HTML/CSS bundle
  • Endless supply of elements/controls
  • Visible gridlines
  • Export as in PNG format
  • Extensive collaboration and team sharing features
  • Mobile ready elements for iPhone, iPad and Android (sweet!)
  • Has auto-save intervals
  • Supports chat environment
  • Has pre-defined screen sizes
  • Multiple editing feature
  • Has a extensive screen properties; screen type (web or mobile), layout (absolute, horizontal, vertical and flow), show grid, snap to grid and grid step
  • FREE!

What do I dislike about Tiggr?

  • No desktop or offline versions
  • Flash-based
  • Takes time to load (Again, it is maybe because of my internet connection or it is really takes time to load)

What features/improvements I can suggest for Tiggr?

  • Ability to add notes to each fields or elements
  • I hate it when I need to go to Edit>Press Delete (to delete a element/s); why not put it on the common controls along with cut,copy,duplicate, redo and undo. After all delete is an important control.
  • Maybe, it’s much better when I can open my saved projects and login into the app itself not from the Tiggr’s site. Then I can also directly have a web preview from the app itself.

What bug errors/reports I noticed?

  • Again, all three has this the same bug error – Delete not working when I used my keyboard

What I like about Tiggr is that I can invite collaborator and share my prototypes in real time and I can manually (literally) choose what will be each collaborators can do on my project either they can edit, preview only, share or they can even delete my own project. One thing also that you shouldn’t missed is that you can easily share Web Preview prototype project via email, Twitter or in Facebook. No more worrying if your client’s received your email along with your large files prototypes.

Top 3 FREE Wireframing and Mockup Tools - Lumzy, Mockup Builder and Tiggr Compared and Reviewed

You may want to try Tiggr app here.

Conclusion

Obviously I am torn between Lumzy and Tiggr, but I ended up selecting Tiggr as my FREE mockup and wireframing creator of choice. Simply because I can share and collaborate extensively, export my projects into HTML/CSS bundle and supports mobile ready elements. That’s all it takes to convinced me that I will use this app completely.

If you think that I missed something out or If you want to contribute for the feature improvements on each applications listed here, let me know in the comments below! :)
Let me know also if I am wrong on my observation of this 3 partcular apps and what do you use as a tool for wireframing and mockups? Is it free or not?

Please don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

You may also want to read the related posts below.


Related Posts

18 Corporate Website Designs for Design Inspiration

18 Corporate Website Designs for Design Inspiration

thumb_101

25+ Fresh Websites and Blogs That Offers High Quality Free Resources To Download

20 Comments

  1. Robbianne

    04.13.2011

    Reply

    I just finished using Lumzy for my Visual and Interface Design final. The dislikes you listed are similar to mine. The biggest drawback for me was the lack of a grid and being able to snap objects into place. How can I demonstrate balance, consistency, etc when I can’t perfectly place every element?

    I hope they make some improvements, because I had a lot more likes than dislikes.

    Thanks for a great article. I’m going to look into the other two tools you suggested.

    Thanks.

    • Hi Robbiane,

      Yep, snap objects to grid is such an important functionalities that Lumzy might (hopefully) add for their updates.

      Let us know what are your feedbacks regarding Tiggr and and Mockup Builder:)

      Thanks again! :)

  2. Steffen Ruefer

    04.17.2011

    Reply

    Cacoo has some wireframe abilities, though it is more a sketching tool for various things. It has a free edition that has some limitations. I am using it more for making simple illustrations than wireframes, but it might be worth a look: http://cacoo.com/

  3. Oleh

    06.14.2011

    Reply

    Hi, Mockup Builder has been updating most of time from the time of this comparison and review has been written, please review what is there so far.

  4. Douglas Burrill

    07.09.2011

    Reply

    Excellent review. I was particularly impressed with the “What I need it for” section. It helps people understand what your criteria were.

    • @Douglas,

      Thanks for the feedback! :) “What I need it for” is important criteria on our product reviews! We will surely add this on other product or app reviews that we are going to write in the next few days.

  5. 7arkeo

    07.19.2011

    Reply

    Nice review. Thank you !

    Maybe you can give a try to http://uireframe.com. It is in private beta but looks promising.

    • @7arekeo,

      Thanks! :) Maybe an invite will do for us to take a look on uireframe;)

      • 7arkeo

        07.19.2011

        Reply

        To get an invite is simple.

        I leaved my email address on the invite form at the home page http://uireframe.com after that I got my invite. It didn’t take a lot of time.

        Have a nice day !

  6. Valentine Eze

    07.20.2011

    Reply

    Hello,

    I am very much new to wireframe. I have some ideas that I really want to communicate to a web designer but the sketches I have looks terrible. Can any body recommend a good wireframe to use.

    Thank you.

    • Hi Valentine,

      Aside from the free wireframes that we listed here, you can check also some paid/premium wireframing tools such as mockingbird, pidoco, flairbuilder, justinmindprototyper and mockflow and so much more! :)

      All paid wireframing tools has a trial version before actually buying it, so you can easily test what’s suites to your designing needs!

      We hope that we did give assistance to your question.

      Have a nice one!

  7. Tiago

    08.24.2011

    Reply

    I really enjoyed your review, but it seems like Tiggr is not free anymore.

    • Hey Tiago,

      Thanks a lot! We are happy that you enjoyed our review.
      Yep, sadly Tiggr is not free anymore :(
      But they got a 15 day free trial available for customers who wants to try Tiggr. :)

      All the best!

  8. Nice Review i was searching for this long time. Now i am going to create a mockup using lumzy .

  9. Nilesh

    11.02.2011

    Reply

    I would request you to take a look at MockupTiger.

    Real Collaboration (Circles feature like Google+)
    Web based (no flash)
    snap to Grids
    Dashboard chart library
    Desktop option and self hosting available
    Personalization
    Custom Widgets through HTML5 canvas commands

    Please check it out with latest chrome browser and I promise you won’t be disappointed :)

  10. Design Mobile

    06.11.2012

    Reply

    Helpful information. Lucky me I found your site by accident, and I’m stunned why this coincidence didn’t happened in advance! I bookmarked it.

  11. Moqups

    07.19.2012

    Reply

    Have you seen Moqups https://moqups.com ?
    It’s a very fast and nice HTML5/SVG based app that runs in the browser!

Leave a Reply









What is 12 + 2 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)

About WDA

WebdesignerAid is an online design and development community-based blogzine that focuses on sharing high-quality tutorials, freebies, inspirations and resources. We publish articles, product reviews and lots of goodies many times a week.

Read more about us →

Recent Tweets

Follow Us On Twitter →

Connect

There are many ways you can receive the content we publish. You can grab the main RSS feed, follow us on Twitter, like us on Facebook and even get new articles delivered by email. Enter your email below.