10 Excellent Tools for Creating Web Design Wireframes

By / Mar 30, 2010 / Tools
shares

When starting a new web design project, it’s always a good idea to begin with a wireframe. The purpose of a wireframe is to communicate the layout of a page without getting caught up in color and design elements. Wireframes can be a big time saver as they help all parties involved come to an agreement on placement of major page elements such as headers, content areas, navigation menus, and footers. The key is to get the layout nailed down so major layout changes won’t take place once detailed design elements are in place.

There are several different routes that a designer can take for creating wireframes, and there are even applications designed specifically for this. For this article, we’ve rounded up 10 excellent tools for creating wireframes.

MockFlow

wireframing

MockFlow allows you to design and collaborate (in real-time) user interface mockups for your software and websites. It comes with numerous built-in components & icons.

Axure

wireframing

Axure enables application designers to create wireframes, flow diagrams, prototypes, and specifications for applications and web sites. It lets you use ready-made widgets including buttons, form fields, shapes, and dynamic elements that you can edit and format in a familiar environment. Or you can create your own custom widget libraries.

Balsamiq Mockups

wireframing

Using Balsamiq Mockups feels like you are drawing, but it’s digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. With 75 pre-built controls to choose from, you can design anything from a super-simple dialog box to a full-fledged application, from a simple website to a Rich Internet Application.

Pencil Project

wireframing

The Pencil Project is a free addon for Firefox. Some key features include: built-in stencils, multi-page document support, and multiple export options.

HotGloo

wireframing

HotGloo is completely web based with lots of features that let’s you drag and drop and scale items easily. It also has support for realtime collaboration.

Mockingbird

wireframing

Mockingbird is another web app with a focus on collaboration. It allows you to link multiple mockups together and preview them interactively to get a feel for the flow of your application.

Cacoo

wireframing

Cacoo is an online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts.

ProtoShare

wireframing

ProtoShare is an easy-to-use, Web-based prototyping tool with a focus on collaboration. Team members can review work and provide timely feedback, ideas, and suggestions on clickable wireframes or creative content.

iPlotz

wireframing

iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications.

OmniGraffle

wireframing

OmniGraffle is an app for Mac OS that gives you plenty of tools to create amazing wireframes and mockups, but it’s also great for creating all kinds of charts and diagrams as well.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

55 Comments

  1. Oles
    March 30, 2010

    Very useful post

    Reply
  2. Cristian Pascu
    March 30, 2010

    Hey, you forgot FlairBuilder! :-)

    Reply
  3. yintop
    March 30, 2010

    Look this!

    Reply
  4. ebta
    March 30, 2010

    Thank you
    really helpful to design web

    Reply
  5. Derek
    March 30, 2010

    Thanks for posting will check some of these out!

    Reply
  6. ictians
    March 30, 2010

    We have used axure, its a good and fast. Have to try others as well. Its really useful before you start the project to finalize things.

    Reply
  7. Peter Severin
    March 30, 2010

    Also take a look at WireframeSketcher wireframe and mockup tool. It’s a plugin for Eclipse that also works with Aptana, Flash Builder, Zend Studio and other Eclipse-based IDEs: http://wireframesketcher.com

    Reply
  8. Hillary H.
    March 30, 2010

    Cacoo looks really helpful, I am going to have to check it out. Thanks!

    Reply
  9. Jordan Walker
    March 30, 2010

    These will come in handy when designing the spec for an interface.

    Reply
  10. Adam | Toronto Web Developer
    March 30, 2010

    I’ve always loved MockFlow. It’s such a great tool when you need to get your design across to the clients without spending hours upon hours coding it into html.

    Excellent resources for those finicky clients.

    Reply
  11. moabi
    March 30, 2010

    Cacoo is definitly nice…
    thx 4 the post…

    Reply
  12. Uncleserb
    March 30, 2010

    Cheers for the article; have been using iPlotz for the past year and it has proven to be valuable. However, it’s always useful to keep an eye out for other such tools!

    Thx!

    Reply
  13. Andrea at ProtoShare
    March 30, 2010

    Henry,
    Thanks for including us in your list of wireframing and prototyping tools! Being able to evolve simple, clickable wireframes to more interactive prototypes allows our customers to simulate a rich website experience prior to writing code.

    We are open to feedback, so feel free to contact me with comments or questions.

    Cheers,
    Andrea
    @ProtoShare

    Reply
  14. Jennifer
    March 30, 2010

    I love hotgloo, but $14/month is too pricey for a web app. Mockflow looks like a great alternative at only $4.91/month – seems to have all the features plus a desktop app.

    Reply
  15. Lena Tailor
    March 30, 2010

    Great collection. Just i’ve been looking for. Thanks

    Reply
  16. Diego
    March 30, 2010

    Why is Excel overlooked as a Wireframing tool? I use it ALL the time and with great success.

    You zoom it out, make cells be squares and by merging and splitting cells you get a pretty qucik wireframeing tool.

    Reply
    • Alex
      November 18, 2011

      That’s what I used to do. Now that I’ve tried Balsamiq I will never go back.

      Reply
  17. BebopDesigner
    March 30, 2010

    Wow! these are amazing and handy. Thanks for sharing

    Reply
  18. Andrew
    March 30, 2010

    We use Mockflow at my agency and couldn’t be happier. The user permissions for sharing are second to none. Completely worth the premo signup.

    Reply
  19. Paul M
    March 30, 2010

    Nice article… I’ve also been looking into wireframing tools recently and complied a feature matrix (along with my thoughts) here:
    http://www.paulmiddlege.com/2010/03/online-wireframing-tools-comparison-and-whats-missing/

    Reply
  20. Jason (@urbanjester)
    March 30, 2010

    Great collection! Thanks for sharing! I’m personally fond of axure and balsamiq. Haven’t been able to drop visio for omnigraffe

    Reply
  21. Justin Carroll
    March 30, 2010

    OmniGraffle is pro. Any ideas on a free Mac app for wire-framing?

    Reply
  22. YoYurec
    March 30, 2010

    Good collection! Tnx!

    Reply
  23. Alex Flueras
    March 31, 2010

    Great list. I use HotGloo and it is fine.

    Reply
  24. Matt
    March 31, 2010

    Nice roundup. I’m in love with Balsamiq.

    Reply
  25. Antoine
    March 31, 2010

    nice list, i do not use one of them but maybe i’ll try some :)

    Reply
  26. Antonio
    March 31, 2010

    Great collection.
    Would like to add JustInMind

    http://www.justinmind.com

    Best Regards!
    Antonio

    Reply
  27. Eric Caldwell
    March 31, 2010

    A great one not mentioned here is Gliffy http://www.gliffy.com

    Reply
  28. DFowler
    March 31, 2010

    Great article and info. However, I would like to see a little more. I don’t have time to explore all 10 right now. Which two or three would you recommend without consideration for budget?

    Reply
  29. Adam Hermsdorfer
    March 31, 2010

    I got a chuckle out of the excel for wireframing comment! I’ve been using HotGloo and really like it. This is a very good list and I do look forward to testing out the other tools. Balsamiq and Cacoo look pretty sweet.

    Reply
  30. NYC
    April 1, 2010

    I just find having a sketchbook doing my wireframe diagram and then translating to photoshop.

    Reply
  31. Chris (Web Designer in Fredericton Canada)
    April 2, 2010

    Very cool! I’ve not used wireframes much in the past but I’ve been meaning to get more structured, these are wonderful.

    Reply
  32. Cathy Mason
    April 4, 2010

    Very helpful!
    Thank you!

    Reply
  33. Matthew Heidenreich
    April 7, 2010

    wow, outstanding roundup! Thanks for this.

    Reply
  34. Meera
    April 7, 2010

    Great list! Balsamiq is pretty cool and very light weight too :)

    Reply
  35. Azmi Uzun
    April 30, 2010

    I like ForeUI, it is simple and easy to use.
    http://www.foreui.com/

    Reply
  36. 18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration
    May 20, 2010

    [...] to nail down the placement of major layout elements early on in a project. There are a number of wireframing applications out there, but a lot of user interface designers like to start out on paper with sketches of what [...]

    Reply
  37. suncat100
    May 21, 2010

    Also try http://gridpapr.com – Create and share your wireframe online

    Reply
  38. Sumeet Chawla
    May 24, 2010

    Excellent collection. Thank you for the compiling this list ^_^

    Reply
  39. punkymunky
    May 27, 2010

    I’d always used Illustrator for simply roughing out the content of a page. It was particularly easy to transition the wireframe into a high fidelity mockup.

    I’m currently working on a large corp intranet and I’ve found Fireworks invaluable. I’m able to produce template masterpages and multiple content pages. there are some great addons for quickly creating dummy text and datagrids. I can create button links and export the whole thing as an interactive pdf or even HTML. There’s a great tutorial on Lynda detailing this and a lot more.

    Reply
  40. Scott
    June 8, 2010

    maybe not the cheapest solution, but Coreldraw is extreemly handy for wireframing. It has the same features as illustrator but a studentlicense is very affordable. It takes some time to get started but than it has everything you could wish and more. grids, you can build your own templates that you can place as paper, rescale or transform. grafics in vector(that can be used straight in your final design)
    export to flash SWF. I use Corel for about 10-15 years as a wireframetool. making a design, copy the result, create a new page, restyle that, over and over. This way of working makes that you can look back at the proces the same way you would do with a scrapbook. Corels drag en drop workspace and import and export works like a dream. I’ve been an illustrator/designer for a long time, workt for different companies and different tools. Corel is a very good tool. I do not work for Corel :)

    Reply
  41. Todd S Jones
    August 16, 2010

    Great list thanks. I just used Powerpoint. Goodbye Powerpoint!

    Reply
  42. Brett Widmann
    December 21, 2010

    These are perfect! Thanks for sharing. These will come in handy.

    Reply
  43. Ajay
    June 5, 2011

    I was looking for a Wireframe designer and found this post. I’ve been using MS visio for various diagram but it doesn’t seem to have the capability of Wireframe.

    Unfortunately Pencil is not available for FF 4+.

    I’ll try others and lets see which one I like.

    Reply
  44. Chaman
    August 10, 2011

    Great list. We use Creately – (http://creately.com) for wireframes and everything else that goes with it. Flowcharts, UML, etc. Helps keep things in sync.

    Reply
  45. Andriy Khavruchenko
    October 29, 2011

    Don’t forget http://framebox.org – really simple and fast online wireframing

    Reply
  46. Tanara
    November 3, 2011

    Great resource, thanks so much! Do any of the above incorporate a pattern library?

    Reply
  47. Nawaz
    February 1, 2012

    Awesome article on creating web design wireframes!
    Thank you very much!

    Reply
  48. alex
    February 6, 2012

    I was using Balasmiq earlier going to try others tools from your list. Thanks for your post.

    Reply
  49. Caroline
    February 8, 2012

    Great list, Henry!

    I’ve been using Apple Keynote (or PowerPoint – depending on my customer) +Keynotopia (http://keynotopia.com/) to prototype iPad and iPhone apps and I highly recommend it!

    Reply
  50. Kasteler
    April 16, 2012

    Just downloaded Pencil and love it. Thanks!

    Reply

Leave a Reply