Top Two Wireframing Tools

by on 07/20/10 at 10:47 pm

Wireframing is an important part of the design process.  It usually occurs in the beginning before any graphic design takes place. Its sole purpose is to communicate the content structure, navigation and layout.  Things like color, font, images, gradients and other visual effects are saved for later after wireframing has been completed.  Because of this, a graphic design tool such as Adobe Photoshop aren’t ideal for wireframing.  Photoshop can be used to create beautiful graphics, but it’s NOT easy to wireframe with because it’s not a vector program.  This means manipulating the size, shape, color and orientation of objects can’t be done on the fly.  Doing simple things like lining things up and creating basic UI elements takes far too long.  It also doesn’t come with stencils, which are pre-installed shapes of UI elements that you drag and drop to save you time.  Wireframing should be easy and efficient.  How things are organized and where things are placed is the emphasis of wireframing, not how pretty things look.  When it comes to wireframing these highly touted graphic design tools just don’t cut it.  For these reasons, I have decided to present to you the two best wireframing tools for efficiently creating wireframes.

Best FREE Wireframing Tool

There are tons of wireframing tools out there.  Some are bad, some are decent and only a few stand out.  I have used a variety of them, but the best free wireframing tool is Mockingbird hands-down.  Not only is it free but it comes with a really nice set of stencils and the user interface for the web application is clean, slick and easy to customize.  To add to that, it even has smart guides to help you line things up properly.  It also has a feature that allows you to instantly share your wireframes with others.  This app is truly a gem and it’s only in its beta version.  But don’t take my word for it, try it out yourselves!

Try Mockingbird »

Best PAID Wireframing Tool

This next tool I have used for a long time.  It is so versatile and efficient to use that I use it for both wireframing and basic graphic design.  For advanced graphic effects, however, Photoshop is a good choice, or if you prefer vector programs Adobe Illustrator and Fireworks are also ideal choices.  But if you are trying to design a basic wireframe or mock-up you don’t need a program that’s bloated in features.  Omnigraffle is an outstanding tool that I highly recommend.  It’s not free, but it’s worth every penny.

It has all the essential features you need to create beautiful wireframes and mockups.  It’s very efficient and easy to create UI elements because they have an awesome stencil library that makes your job so much easier.  You can also download other stencils made by others at graffletopia.com. Putting effects in such as gradients and shadows on objects is fast and easy. Aligning objects is easy because it provides smart guides to help you. Exporting graphics to a web format is simple as well.  You can even make your designs interactive.

All in all, Omnigraffle is an extremely useful and intuitive application for wireframing and basic graphic design.  It is the best paid wireframing tool out there.  See for yourself and start wireframing in no time!

Try Omnigraffle »

[Update: Mockingbird is no longer free. However, it is still one of the better wireframing tools I've seen.]

23 Responses to “Top Two Wireframing Tools”

  1. Medicine Ball Exercises

    Jul 22nd, 2010

    well written blog. Im glad that I could find more info on this. thanks

  2. Fred Vandaele

    Sep 2nd, 2010

    Hi, Thanks for this nice article. Just note that Mock­ing­bird is not Free, Personal license is around 9$ per month … Personally, as free wireframing tool, I am using Pencil.

  3. Tna Foo

    Sep 26th, 2010

    Hi,

    I used another wireframe tool call Pencil. I find it really easy to use. I’ve used it in a couple of projects and my clients loved it. And it is free!

    http://pencil.evolus.vn/en-US/Home.aspx

  4. Cristian Pascu

    Sep 29th, 2010

    Hey, have you got a chance to try FlairBuilder yet. It’s a prototyping tool, but the latest version added some cool wireframing features.

    Check it out, I’d love to know what you think!

  5. Jeremie Dupuis

    Oct 15th, 2010

    Balsamiq Mockup is really great as well – http://balsamiq.com/

    The UI is really great and you can produce mock-ups at an amazing speed! It’s not full of useless features like a lot wireframing apps.

    I tried Omnigraffle and I think that its advantage is that it’s closer to the final result which in the context of Web Agencies working for external Clients is better.

    But to work internally I would 100% recommend Balsamiq.

    • anthony

      Oct 16th, 2010

      I agree. Balsamiq is fine internally, but it’s not something you would want to show your client, which is why I don’t recommend it if you’re looking to design professional and presentable wireframes that look closer to the final result.

      • Toby

        Apr 5th, 2011

        There is a school of thought (obviously subscribed to by the guys at Balsamiq) that wireframes should NOT look close to the final result.

        The idea is that a loose and sketchy wireframe ensures that nobody gets hung up on the visual aspect, instead focusing on the structure and content (which, after all, is what wireframes are for).

        I used to create visually attractive wireframes using Illustrator, but have had better results since switching to a tool that creates much plainer output. Specifically, fewer comments from clients like “but we want it PURPLE!” or “why are you using that font, I thought you were going to use our corporate font!”. Many more constructive comments about the actual site structure and content.

        • Elise

          Jul 13th, 2013

          Thank you, Toby, I SO AGREE.

          Non-technical clients rarely understand the idea of decide on your functionality before moving on to design. And I mean like basic stuff like, “what is the main organizational goal for your organization for the next year?… your website?”

          It is amazinging how few organizations have useful strategic plans with measurable goals. If I had a nickel for every time I said, “If it is not measurable, then it is not a goal.”

          Of course, if folks are working with more sophisticated clients who can articulate a main goal for their most important 3 pages, then their clients are a lot further ahead than mine. But for me, Balsamiq really helps my clients focus.

          p.s. Balsamiq please introduce a cheaper version for smaller, poor not-for-profits

  6. Alan Hogan

    Oct 16th, 2010

    I just tried LucidChart (.com) and came away VERY impressed. Like OmniGraffle, it has different modes/“stencil” sets. And in some regards, it is even better than Omnigraffle — the ease of joining flowchart points, for example, is just ridiculous!

    I haven’t tried Mockingbird, but thought I’d share this resource. (It’s free up until a point where you have too many elements in one wireframe or chart.)

    • lyricalflows

      Nov 18th, 2010

      Thanks Alan,

      You should know that we just ramped up our wireframing offering to include a whole new slew of shapes and “intractability.” Imagine designing a wireframe that works much like a website to where you can test the user experience.

      Check it out here: http://www.youtube.com/watch?v=qdPvfo-RBfE

  7. Klaus Martin Meyer

    Jan 5th, 2011

    Personaly I used Omnigraffle for quite a while, but compared to Axure RP that I use now it misses some important features: for example masterpages, HTML prototypes with a click, if-then-else loops, variables, etc. Just give it a try! It’s really worth it.

  8. Jens Ahrengot Boddum

    Feb 16th, 2011

    Nice post, but i miss Balsamiq Mockups and Hot gloo on this list.

    • anthony

      Feb 16th, 2011

      I absolutely hate sketch style wireframes, but that’s just me.

  9. Max

    Mar 15th, 2011

    Another HTML interactive tool you might want to check out is Tiggr – http://gotiggr.com. With Tiggr you can create, share and preview Web and mobile HTML prototypes. The key is that you can create interactive HTML prototypes with navigation which you can view and test in any browser.

  10. Peter Severin

    Mar 17th, 2011

    WireframeSketcher is another wireframing and prototyping tool. It comes both as a standalone version but also as a plugin for Aptana, Flash Builder and other Eclipse IDEs. More details here: http://wireframesketcher.com

  11. Andreas

    Apr 3rd, 2011

    Windows users might also try PowerMockup, an add-on to PowerPoint 2007/2010: http://www.powermockup.com/

  12. Toby

    Apr 5th, 2011

    The single most important feature for me in a wireframing app is master pages. So many wireframing apps are missing that. Try designing a five page wireframe without them, then make a change to the header or footer. Without master pages, that’s five sets of changes to do manually!

    I’ve settled on Mockflow, largely because of its graceful handling of master pages (you can have unlimited nested master pages, even). It can be a bit quirky, but so far it saves me massive amounts of time and effort for that reason alone.

  13. brinda

    Jul 25th, 2011

    Let say you want to host mockup software on your own domain or company network then MockupTiger is a very good option. It is php based so very easy to install.

    You should give MockupTiger a try as it is fully web based and you can download and use on your desktop or host it on your own server.
    Here is the link http://www.mockuptiger.com

  14. Caroline

    Feb 16th, 2012

    Keynotopia is great too (with Keynote, PowerPoint, or Open Office). The wireframes are not sketchy and you can turn them high fidelity for showing to clients with just a few clicks. http://keynotopia.com/

  15. Victor

    Feb 24th, 2012

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

  16. Moqups

    Jul 19th, 2012

    Have you guys seen Moqups?
    It’s a nifty HTML5/SVG App used to create wireframes/mockups! Check it out https://moqups.com

  17. Catriona

    Dec 18th, 2012

    Pidoco is also an HTML/SVG app for mockups with collaboration features and specification export. Free trial at http://www.pidoco.com/free

Leave a Comment