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. Great recommendations/list of resources… very valuable.

    “Overall it’s an excellent step to incorporate into your project before the design process begins for both you and your clients.”

    Very true… wireframing has become a truly integral part of our development process at my work. It definitely helps with work flow, and team understanding of the project before the actual design/mock-up phase begins.

    • Grace says:

      @Aaron Thanks! It’s absolutely essential for me, it helps define layout and also forces you to think of functionality.

      @Adrian Thanks for stopping by Adrian. I hope its given you a few tips/pointers and maybe changed your mind 😉

      @Paul Thanks for the link to those tools, with a few i hadn’t seen before.

      @SaraKate My pleasure, i hope it helps. I have been working on it on and off for about a week as im a little obsessed with wireframing, i kept finding more resources to add to the list!

      @Chris Hi Chris, thanks for leaving a comment. Having a good library of elements is a great thing to have, i have one for photoshop when im wireframing, it saves alot of time. I understand your point about clients wanting to see polished designs, however i usually explain that the wireframe is devoid of styling and is purely concentrated on layout, which has worked really well.

  2. Grace, very nice tools and articles! thanks for sharing! sometimes wireframing seems useless… but having a read of those articles can change your mind.

  3. Paul Anthony says:

    Hi Grace, great post. I put together a couple of the tools you mentioned above a while back. Just incase its of interest.

  4. _SaraKate_ says:

    This is SOOOO helpful. I am just starting to work on our own server’s file structure and wireframing will most certainly be the next step. No one has ever done it strategically for our website, so my hope is that I will have the time to do this to make everything run more smoothly. Serendipitous that you were working on this today just as I’m getting started on this project!

  5. Chris Sharp says:

    Hi Grace, wonderful resources thanks.

    I’ve only recently started including wireframing is my design process, more on larger text heavy projects. By building up a library i have a good starting point to determine layout and get the creative juices flowing, though i mainly sketch (pen and paper).

    But the client very rarely gets to see them, mainly due to budgetary constraints and also because i find the majority of clients like to see something more polished and visual from the outset.

    The wireframes allow me to do the quick planning and prototyping behind the scenes.

  6. Joel Laumans says:

    Thank you!!

    This is a great resource you’ve put together! Personally I wouldn’t recommend Illustrator for building wireframes because it won’t work well for larger projects. I would then switch to Adobe InDesign which will allow you to create masters, pages, reusable elements and so on.

    Together with a colleague of mine we gave a workshop on wireframing in InDesign, and he created an instructional PDF on it as well – you might find it interesting:

    Kind regards from Holland

    Joel Laumans (@piksels)

  7. James Kirkup says:

    Brilliant resource, thanks!

  8. Patternhead says:

    Great list of resources. Thanks for sharing :)

  9. Dave Hogue says:

    Great list ,Grace. Thanks for assembling it, but don’t forget that Adobe Fireworks is also positioned as a wireframing tool – we use it daily for all of our wireframing and rapid-prototyping.

  10. DominusOminous says:

    Another very powerful mind-mapping tool not mentioned is The Brain:

    I use it and love it in the free edition. No, I’m not related to the company at all, other than happiness in having found them.


    • Grace says:

      @Joel Personally i don’t use Illustrator but i know alot of designers who do so i thought it would be a nice write up to include. I would agree InDesign is an excellent tool for wireframing and thanks for the link, thats a fantastic resource!

      @James and @PatternHead My pleasure, i hope it proves useful :-)

      @Dave Good point i have used Fireworks in the past, i just couldn’t find any good tutorials or techniques using Fireworks for wireframing which was a pity.

      @DominusOminous Thanks for stopping by and commenting, i have to admit i hadn’t heard of The Brain before so thanks for linking that up to check out.

  11. France says:

    @Joel @grace Any mention of InDesign can not be made without highlighting Nathan Curtis of EightShapes and their Unify system for creating design deliverables.

    The complete system will be available for download this weekend, and is using this week’s IA Summit as the launchpad.

    • Grace says:

      @France I actually saw that this afternoon and thought what an awesome resource it was! Thanks again for reminding me and linking up both of those for others to check out.

  12. Aaron Weiche says:

    Thanks for linking to our blog post on wireframes for web design. You have a great list of links put together here for others to use as a resource. Worth a bookmark for sure! Thanks again!

    • Grace says:

      @Aaron No problem, it was a great post on the process of wireframing, thanks for dropping by!

      @Brandon The time it took was completely worth it, i’ve had great feedback and hopefully it proves useful to anyone not sure how to get started wireframing or prototyping. I completely agree agile development has been a major plus for the industry, allowing for quick deployment of websites and applications with minimal overhead, without wireframing i don’t think the process would work quite as well.

      @Henning, @Peter and @Charan Thanks for linking up your apps, it always good to find other apps you weren’t aware of.

  13. Brandon Hale says:

    A great resource list Grace. I appreciate the time you took to piece it together. Wireframes have made my life much easier and I expect they will only continue to do so moving forward.

    Between moves to agile development, grids and wireframing as integral parts of the web design/development process in the last few years I think our web design culture has only improved as a whole. I hope we keep this pace.

    Again, kudos for sharing this. Definitely worth the time and attention to explore the list.


  14. Joel Laumans says:


    Unify looks very interesting! I’m afraid the website is still a bit vague on what it actually is, but it definitely looks promising =)

    I will be checking out their site ( tomorrow!

  15. Another online wireframe tool:

    it also offers collaboration options as well as testing and commenting features. Its offered as a commercial service, but there is a free trial period and the pricing is based on one-month subscription (reduced rates if you choose 6 or 12 month plans)

    You can meet the guys behind at the UXcamp in Berlin on May 23-24 and probably some other barcamps as well as IA and UX conferences.

  16. Another wireframe tool missing from the list is WireframeSketcher:

    It’s an Eclipse plugin for creating quick UI mockups and prototypes.

  17. Charan says:

    Wow… great list Grace. We’ve got a private beta running for – Online Diagramming & Designs. You can put together mockups, brainstorm on ideas collaboratively and share online with your team and customers. Would love your readers to give it a go and tell us how we can make it better.

    Keep those resources coming!

  18. Rod says:

    Great resources! Thanks.

  19. Lee Munroe says:

    Only getting around to reading this now. Great list of resources there Grace. Good work

    • Grace says:

      @Rod and @Eugenio Happy to share, glad you enjoyed the post.

      @Lee Thanks for stopping by Lee, cheers for the compliment.

      @Andrea Thanks for stopping by, i’m sure people will check out the new and improved Protoshare.

  20. Amazing list. Thank you for sharing. Great work!

  21. Andrea says:

    Grace, great list of wireframing tools. And thanks for the shout-out of ProtoShare! Not sure if you’ve had a chance to try it yet, but since you created this post, we have released a new version that incorporates some rich Internet functionality to allow more interactivity during these early stages.

    Something we have learned is that some people only need low-fidelity prototypes (or wireframes) to get internal feedback, but others need high-fidelity prototypes on complicated projects or with high-end clients to gain better understanding before building the site. It’s our goal to provide a tool that can accomplish both.

    I look forward to future topics that you share!


  22. CAm says:

    Good stuff! I have been getting more into the IA and wireframing of webdesign. great list.

  23. Sergio says:

    DENIM: An Informal Tool For Early Stage Web Site and UI Design

  24. I have recently collected a list of prototyping tools you may find interesting.

  25. Lany Miller says:

    ForeUI ( is a handy tool to create runnable wireframe.


  1. Get Wireframing | Konigi
  2. Mar-19-2009 web design links | w3feeds
  3. Wireframes for the Wicked sites at | SoulSoup | Blog on E-Learning, Usability, Knowledge Management etc.
  4. Get Wireframing: The All-In-One Guide : Design Newz
  5. victor perotti » Daily Digest for 2009-03-19
  6. links for 2009-03-20 « Brent Sordyl’s Blog
  7. Small Farm Design » Blog Archive » links for 2009-03-20
  8. links for 2009-03-20 « Mandarine
  9. Inspiring Design Links for Creatives for 2009-03-20 | This Inspires Me
  10. Get Wireframing from Grace Smith | Cultural Fuel Blog
  12. Bithalter Webzeuglinks 010′09 | Webzeugkoffer Webdesign
  13. Software Quality Digest - 2009-03-30 | No bug left behind
  14. Enquiring Minds Want to Know » Blog Archive » Librarians and Information Architecture
  15. Mar-20-2009 web design links | w3feeds
  16. Linkdump März 2009 – Webdesign []
  17. Обзор средств создания прототипов | PhotoCore Web-Design Blog
  18. Best of Week (+/-) #9 | Insel der Engel'
  19. mehr Links… @ C-MD Aachen
  20. Get Wireframing and Prototyping at bookslope blog
  21. Inspirationen für Wireframes « WebDevTeam’s Blog
  22. » Blog Archive » Wireframe e muito mais
  23. Get Wireframing: The All-In-One Guide - … « IA // COLLAB
  24. La rassegna della settimana (13): Google Suggest, AD Planner & Analytics, risorse per wireframe | TSW Blog
  25. Comparativa de aplicaciones de prototipado de nueva generación. | Will Web For Food