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.

Techniques

——————————

Tools

  • 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.

93 Comments

  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.

    http://blog.webdistortion.com/2009/02/22/useful-online-tools-for-easier-website-planning-and-prototyping/

  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:

    http://www.peterpixel.nl/writings/wireframing-using-indesign/

    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:

    http://www.thebrain.com/

    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.

    Dom

    • 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.

    http://unify.eightshapes.com/

    The complete system will be available for download this weekend, and is using this week’s IA Summit as the launchpad. http://iasummit.org/2009/program/pre-con/components-organizing-design-documentation-for-better-user-experience/

    • 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.

    -BH

  14. Joel Laumans says:

    @France

    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 (http://unify.eightshapes.com/) tomorrow!

  15. Another online wireframe tool:
    https://rapidrabb.it/

    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 rapidrabb.it 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:
    http://wireframesketcher.com

    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 http://creately.com – 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!

    Andrea

  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
    http://dub.washington.edu:2007/denim/

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

  25. Lany Miller says:

    ForeUI (www.foreui.com) is a handy tool to create runnable wireframe.

  26. Hannes says:

    Another online wireframe tool:
    https://hello.hotgloo.com

  27. 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 ;)

  28. 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: http://www.wireframetopsd.com
    that converts anyones wireframe into a design psd ready to be coded.

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

  30. 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::

    http://www.pidoco.com

    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

  31. 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?

  32. Just heard about a new online wireframing tool called Mockingbird (http://gomockingbird.com) from the Boagworld podcast (http://boagworld.com/podcast/192).

    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.

  33. 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!.

  34. Jithuaravind says:

    Really a valuable information …!

  35. David says:

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

  36. 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.

  37. John says:

    Surprised that http://www.lucidchart.com 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.

  38. brinda says:

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

    Brinda”

  39. Brendan Rice says:

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

    Very useful.

Trackbacks

  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
  11. letspushthingsforward.com
  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 [martin-grandrath.de]
  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. MarcelBonfim.com » 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
  26. 35 Excellent Wireframing Resources | Developer's Toolbox | Smashing Magazine
  27. 35 Excellent Wireframing Resources « Tech7.Net
  28. » Wireframing Marathon Starts! CIO Happy Hour
  29. Web Designers – Don’t skip the wireframing phase. | Uncomplicated, straightforward, and effective web design and illustration | Intuitive Designs
  30. Redesign: When To Do It And Best Practices - Smashing Magazine
  31. Web Design | Lightning Strikes
  32. 67+ Powerful Usability Resources | valentin yeo
  33. Interesting Wireframes links and articles « Innovazen
  34. Class: Wireframes ‹ Interactive 1 Class Blog
  35. 35 Excellent Wireframing Resources « Dheerajir's Blog
  36. We heart wireframes | tiny gigantic
  37. Geek is a Lift-Style. » 35 Excellent Wireframing Resources
  38. Wireframing Guidelines | Live Thoughts on the Web
  39. Get Wireframing: The All-In-One Guide – Hi, Im Grace Smith | Invisible Inkling
  40. Web Designers – Don’t Skip the Wireframing Phase | Conversion Rate Optimization | Naomi Niles
  41. 35 Excellent Wireframing Resources | ZUNio
  42. Wireframing is About More than Just Visual Layout - Programming Blog
  43. Viral Notebook » Diigo bookmarks & resources for August 3, 2011
  44. Day 6 – HW (Due Day 7) | MFA D+T Bootcamp 2011
  45. The grid as a front end development framework | Advanced Web Development
  46. Task Flows and Wireframing | f11_gd410
  47. Our Bookmarks: Mar 16 - Mar 22 | Border Crossing Media
  48. Wireframing Guidelines - Susana Vilaça
  49. 15 Essential Tools and Resources to Create Great Wireframes | MyCrowd BlogMyCrowd Blog