Get Wireframing: The All-In-One Guide
Photo by Ivan Bandura

Get Wireframing: The All-In-One Guide

Wireframing is a great tool to incorporate into your projects as it allows for rapid prototyping and helps to pinpoint any potential problems. I personally find it invaluable on projects to have a visual representation of content, hierarchy and layout. Overall it’s an excellent step to incorporate into your project before the design process begins for both you and your clients.

I am continually intrigued about how other firms and individuals incorporate the wireframing stage into their process. I know i’m not the only one, so this list aims to group together some of the best techniques, tools and resources to help you create effective wireframes.




  • Omnigraffle – Create diagrams, process charts, quick page layouts and website mockups
  • Visio – Visualize, explore, and communicate complex information.
  • Protoshare – Collaborate online wireframe tool with real time communication and clickable wireframes.
  • Balsamiq – Easily and quickly created rough mockups with predefined elements
  • iPlotz – Quickly sketch wireframes of Web sites and demonstrate navigation between pages
  • Lovely Charts – Diagraming app that allows you to create site maps, flowcharts, wireframes and more
  • Jumpchart – Online collaborative wireframe
  • Axure – Rapidly create wireframes, prototypes and specifications for applications and web sites.
  • Gliffy – Create website wireframes and share web mockups with anyone.
  • MockupScreens – For the Non-Designers, allows you to sketch and organise screen mockups.
  • EasyPrototype – Works with your existing techniques such as paper sketches, Photoshop mockups etc.
  • Justinmind – Design a wireframe and test their web usability
  • OverSite – Provides a menu of widgets to create wireframes, or mockups with drag and drop features.
  • Fluid IA – Agile UI Prototyping
  • Pencil – Free sketching & GUI prototyping tool, can be installed as a Firefox add-on or as a standalone application.


Wireframe Examples


Wireframing Articles of Interest


Paper Prototyping


Useful Wireframing Resources


Kick Ass Books


I recommend reading the Complete Beginner’s Guide to Information Architecture at the UX Booth as a great introduction.

Are there any resources i haven’t listed that you recommend? If so, drop a comment with any useful links or resources for others to check out.


  1. Hannes says:

    Another online wireframe tool:

  2. Gabriel says:

    Flickr has alot of wire framing sets too and surprisingly, there are also extremely creative sets. If there’s some time, anyone should check them out :) And yes, your right, thousands of sets there i assume 😉

  3. Daniel says:

    Wow! This is quite an awesome list! Thanks for making it up for us.

    Also, I’m launching a wireframe to psd service:
    that converts anyones wireframe into a design psd ready to be coded.

  4. Grace, great list of wireframing materials! We are conducting wireframing marathon on CIO Happy Hour, and it might fit into your list as well.

  5. Michael says:

    Hi Grace!

    Nice overview about all that Wireframing stuff! Thanks!

    But we miss our web-based Wireframing and Testing Suite here in that list::

    The interesting thing about our tool is, that you can create clickable wireframes, but also test them either by an expert review or a qualitative remote usability test (shared screen and phoneline).

    We would appreciate to get feedback. Thanks!

    Cheers – michael

  6. Thanks for this list. I’ve only recently started using wireframing as my projects start to grow. Very useful, very time consuming. It’s sometimes difficult to budget in the time to create the wireframe when the client sees no real value in it, preferring to see ‘something close to the real thing, please’.

    Anybody got any ideas for how to get round this?

  7. Just heard about a new online wireframing tool called Mockingbird ( from the Boagworld podcast (

    I tried Balsamiq but it seemed a bit limited, though I love the simple concept. I typically use OmniGraffle, and it’s great, but I often feel like I’m hammering in a nail with a wrench. Looking forward to trying out Mockingbird.

  8. Xavier Renom says:

    Please take a look to the ‘Expression Editor’ in new version of Justinmind Prototyper 3.0. It’s an incredible feature!. Build event and conditions only with drag&drop!.

  9. Jithuaravind says:

    Really a valuable information …!

  10. David says:

    Great post, useful as i’m just starting to work on Wireframes…

  11. Chris says:

    This is a fantastic resource. Thanks for your hard work — this will save me and a lot of others a lot of time.

  12. John says:

    Surprised that is not on the list! I’ve been using it the last 6 months or so after trying 2-3 of the ones you have listed and have stuck with it. Even though it’s a broader tool than just wireframes, it’s pretty sweet.

  13. brinda says:

    “Hi, this is great and on the same note would like to request and give mockuptiger a look


  14. Brendan Rice says:

    Fantastic collection of resources Grace, thanks for putting them together.

    Very useful.