10 Excellent Tools for Creating Web Design Wireframes

By / Mar 30, 2010 / Tools

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.

  • http://www.speed-motion.com.ua Oles

    Very useful post

  • http://www.flairbuilder.com/ Cristian Pascu

    Hey, you forgot FlairBuilder! :-)

  • http://www.axure.org/tools yintop

    Look this!

  • http://worksheetsforkids.net ebta

    Thank you
    really helpful to design web

  • http://www.derekkirk.com Derek

    Thanks for posting will check some of these out!

  • http://www.ictians.com ictians

    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.

  • Peter Severin

    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

  • http://www.twitter.com/snarphblat Hillary H.

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

  • http://www.jordanwalker.net Jordan Walker

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

  • http://41six.com Adam | Toronto Web Developer

    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.

  • http://www.moabi.fr/ moabi

    Cacoo is definitly nice…
    thx 4 the post…

  • Uncleserb

    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!

  • http://protoshare.com Andrea at ProtoShare

    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

  • http://pdfgallery.net Jennifer

    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.

  • http://lenatailor.designerteam.info Lena Tailor

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

  • http://blog.42.pe Diego

    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.

    • Alex

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

  • http://www.bebop-ad.com BebopDesigner

    Wow! these are amazing and handy. Thanks for sharing

  • http://momentify.com Andrew

    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.

  • http://www.paulmiddlege.com Paul M

    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/

  • http://www.twitter.com/urbanjester Jason (@urbanjester)

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

  • http://3circlestudio.com/ Justin Carroll

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

  • http://yoyurec.in.ua YoYurec

    Good collection! Tnx!

  • http://www.studioweber.ro Alex Flueras

    Great list. I use HotGloo and it is fine.

  • http://stickermule.com Matt

    Nice roundup. I’m in love with Balsamiq.

  • http://www.techpaf.fr Antoine

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

  • http://www.gedos.es Antonio

    Great collection.
    Would like to add JustInMind

    http://www.justinmind.com

    Best Regards!
    Antonio

  • http://www.web-jive.com Eric Caldwell

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

  • http://www.wsiwebworks.com DFowler

    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?

  • http://www.bigtunainteractive.com Adam Hermsdorfer

    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.

  • http://www.sentril.com NYC

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

  • http://www.thisismyurl.com/tutorials/web-advice/10-great-photographer-websites-and-why-the-dont-work/ Chris (Web Designer in Fredericton Canada)

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

  • http://www.pixmac.com/ Cathy Mason

    Very helpful!
    Thank you!

  • http://devisefunction.com Matthew Heidenreich

    wow, outstanding roundup! Thanks for this.

  • http://www.meeratank.co.uk Meera

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

  • Azmi Uzun

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

  • Pingback: 18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration()

  • http://imagevuex.com suncat100

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

  • http://www.code-pal.com Sumeet Chawla

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

  • punkymunky

    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.

  • Scott

    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 :)

  • http://www.mainstreetinteractive.com Todd S Jones

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

  • http://www.brettwidmann.com Brett Widmann

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

  • http://www.ajaykumarsingh.com Ajay

    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.

  • Chaman

    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.

  • http://a.khavr.com Andriy Khavruchenko

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

  • Tanara

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

  • Nawaz

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

  • http://www.webgraphic.in alex

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

  • Caroline

    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!

  • http://www.davidkasteler.com Kasteler

    Just downloaded Pencil and love it. Thanks!

  • Ayush

    Other lightweight Wireframing tool is http://www.mocknow.com

  • http://www.ripplenet.co.uk/ Tim Read

    I tried Mockingbird, but its not compatible with IE (why IS IE such a pain all the time?)

  • http://www.praveen-kumar.com/ Praveen Kumar

    The URL for the Pencil Project is wrong. The right URL is http://pencil.evolus.vn/. Please update.

  • http://superbwebsitebuilders.com/ Howard Steele

    Balsamiq Mockups looks so cool :)
    Great collection! Thanks.