35 Excellent Wireframing Resources

Advertisement

Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. But if done inefficiently, it can end up costing more time and can even create bigger headaches for both the client and the designer.

Below are more than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available.

1. Wireframing Articles

Here are more than twenty wireframing articles, guides, and tutorials to help you improve your wireframing process. There’s information on everything from paper wireframing techniques to using programs like Adobe Illustrator for the wireframing stage of your designs.

Wireframes Magazine1
This site offers tons of resources and articles about wireframing. They include wireframe samples, UI tools, and job listings, as well as a place for designers to share their wireframes and wireframing tips. Popular articles have covered prototyping with the 960.gs grid system, graph paper sketch layouts, and wireframe moodboards.

Wireframes Magazine Screenshot2

Wire Frame Your Site3
A great introduction to the benefits of wireframing from Sitepoint. It offers a three-step approach to wireframing in addition to expounding on the benefits of using wireframes, including their ability to let you foresee potential problems before you get into the nitty-gritty of designing.

Wireframes Screenshot4

Ajax Wireframing Approaches5
A post in a series from Particletree about prototyping Ajax, this covers wireframing techniques. This article covers three excellent methods of wireframing dynamic content: Keyframing, stacking and TOP (Turn On Possibilities), as well as outlining the benefits and drawbacks of each.

Wireframes Screenshot6

The Importance of Wireframes in Web Design and 9 Tools to Create Wireframes7
A great overview of why wireframing is a good idea, along with tools for creating your own. This is a really comprehensive article that covers everything from creating wireframes to working with clients during the wireframing process to the benefits of wireframing over visual design in the early stages of a website design.

Wireframes Screenshot8

20 Steps to Better Wireframing9
An awesome collection of twenty tips for creating better wireframes. Some of the objectives covered include being clear about your objectives, getting everyone involved and avoiding over-designing your wireframe. Added up, these tips should make anyone’s wireframing process easier and more efficient.

Wireframes Screenshot10

Get Wireframing: The All-In-One Guide11
A complete roundup of wireframing guides, techniques, tools, and more. It’s a great resource post with links to other sites, including a section for techniques, tools, examples, paper prototyping, and wireframing articles, among other links.

Wireframes Screenshot12

The Importance of Wireframing13
A great article on why you should wireframe, along with resources to get your started. It’s a great rundown of the benefits of wireframing, including its ability to help clients focus and what they can teach you about your clients.

Wireframes Screenshot14

Pwireframing: Paper Wireframing15
This is probably one of my favorite wireframing techniques. It’s a paper-based method, but goes way beyond just making some rough sketches. The photos included really help solidify the technique in your mind.

Wireframes Screenshot16

Shades of Gray: Wireframes as Thinking Device17
An article detailing tne designer’s reasons for using wireframes and their purpose. It really covers the personal wireframing experience of the author, including what they get from wireframing beyond the obvious results. Examples are included (both the wireframes and final site design).

Wireframes Screenshot18

Wireframing Over the Shoulder19
A video showing a full wireframing process from start to finish by From the Couch. This is an actual fast-forwarded video of a designer sketching out a complete wireframe of a real site on paper.

Wireframes Screenshot20

The ‘Boxing Glove’ Wireframing Technique21
A guide to a big-picture wireframing technique. This is an incredibly simple and straight-forward technique that emphasizes three elements wireframes should help to clarify: proposition, concept, and context.

Wireframes Screenshot22

Framing the Problem23
An article about wireframing from ClickZ. This article focuses on creating wireframes that answer three simple questions: What types of visitors need to be persuaded? What actions do they need to take? What information do they need to take action?

Wireframes Screenshot24

SEO Wireframing25
A guide to wireframing for search engine optimization purposes from SEOmoz. It describes the wireframing process strictly from an SEO perspective and reminds designers to keep in mind things like key functions for each page and building navigation with relevant keywords.

Wireframes Screenshot26

HTML Wireframes and Prototypes: All Gain and No Pain27
A guide to using HTML for wireframing and prototyping websites from Boxes and Arrows. It touts the benefits of creating HTML wireframes over visual-only types and offers up extensive information about creating your own HTML versions.

Wireframes Screenshot28

The Ancient Art of Wireframing29
A look at the history and benefits of wireframing. It also looks at more modern techniques appropriate for dynamic websites and offers up new standards for contemporary wireframes.

Wireframes Screenshot30

“I Need to See It”—Wireframing for a Richer Web31
A discussion of some of the issues and solutions for wireframing rich media applications. This article also talks about the benefits of both interactive and “high-fidelity” wireframes, including definitions for each and how to go about creating each.

Wireframes Screenshot32

Better Perspective in Wireframing33
A huge list of tips for creating better wireframes. It outlines tips like putting functionality first, focusing on the user experience and working to a deadline.

Wireframes Screenshot34

Wireframing Using InDesign35
A downloadable guide to wireframing using Adobe InDesign, along with a sample file you can experiment with. The content comes partially from a workshop that was presented at a Communication and Multimedia Design course at Rotterdam about wireframing.

Wireframes Screenshot36

I <3 Wireframes37
This site aggregates wireframe images from Flickr. It’s a great place to check out if you’re not sure what method of wireframing will work best for you, or if you just want to see how other people are approaching wireframing.

Wireframes Screenshot38

Website Wireframes39
This is a great overview of wireframing, including brief reviews of a number of wireframing tools. It includes tips for creating wireframes and an overview of the tools available for it.

Wireframes Screenshot40

Wireframing Web Applications41
An article focused specifically on wireframing web apps as opposed to less complicated websites. This is an excellent guide to the particular challenges presented when wireframing dynamic applications and includes an overview of tools appropriate for creating dynamic wireframes.

Wireframes Screenshot42

Content Wireframing: Ducks Meet Row.43
A great guide to wireframing your content. This article covers the particular challenges and requirements of wireframing a site’s content, as opposed to just it’s structure and functionality.

Wireframes Screenshot44

How to Create Website Wireframes45
A complete wireframing how-to from About.com. This article is broken down into four parts: the focus of wireframes, what a wireframe should include, how to create a wireframe and the benefits of wireframing.

Wireframes Screenshot46

How to Wireframe47
Here’s a video tutorial for creating a wireframe. It also includes tips on creating better wireframes, like using a grid to line everything up and adding everything you think you’ll need and then removing things afterward.

Wireframes Screenshot48

Speed Wireframing with Nick Finck49
A video outlining Nick Finck’s wireframing process. The wireframe created is done using OmniGraffle and a wireframe stencil kit.

Wireframes Screenshot50

2. Wireframing and Mockup Tools

There are a number of tools available beyond just pen and paper to help you build wireframes for websites and online apps. Below are a few options, as well as some roundup posts to help you choose the right solution for you.

Pencil Project Screenshot51

Pencil Project52
A Firefox plugin that lets you do GUI prototyping right in your browser. It includes all the standard drawing tools you’d expect, plus it’s cross-platform compatible and can accept user-defined stencils.

Web Design: Top 5 Wireframing Tools53
A review of five wireframing tools from CMS Wire. Tools included are OmniGraffle, MockupScreens, iRise, Axure, and MindJet MindManager.

iPlotz54
A tool to create clickable and navigable website mockups. There are free and paid plans available, with prices ranging up to $495.

Jumpchart55
Another tool for creating clickable website mockups. Jumpstart has free and paid plans, with prices ranging up to $50/month.

Wireframes56
A brief article with a huge list of wireframing software, both desktop and web-based.

Hot Gloo57
A wireframing app designed for designers and programmers. The beta version is currently free to use.

Building a Website Wireframe in Illustrator58
A great guide to using Adobe Illustrator for your wireframes. This is a very complete tutorial, complete with screenshots taken during the process.

Balsamiq Mockups59
A web-based wireframing and mockup tool. There are free and paid version available. The paid one is $79.

Wireframing Web Applications60
An article comparing three different wireframing tools, both desktop and web-based, including Gliffy Online and Balsamiq Mockups.

Templatr61
While Templatr is generally thought of as a template generator, it can work really well as a wireframing program. Just choose the layout you want to use and customize it as much or as little as you want.

Footnotes

  1. 1 http://wireframes.linowski.ca/
  2. 2 http://wireframes.linowski.ca/
  3. 3 http://www.sitepoint.com/article/wire-frame-your-site/
  4. 4 http://www.sitepoint.com/article/wire-frame-your-site/
  5. 5 http://particletree.com/features/ajax-wireframing-approaches/
  6. 6 http://particletree.com/features/ajax-wireframing-approaches/
  7. 7 http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/
  8. 8 http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/
  9. 9 http://carsonified.com/blog/category/web-apps/wireframing/
  10. 10 http://carsonified.com/blog/category/web-apps/wireframing/
  11. 11 http://www.gracesmith.co.uk/get-wireframing-the-all-in-one-guide/
  12. 12 http://www.gracesmith.co.uk/get-wireframing-the-all-in-one-guide/
  13. 13 http://www.45royale.com/blog/articles/the-importance-of-wireframing/
  14. 14 http://www.45royale.com/blog/articles/the-importance-of-wireframing/
  15. 15 http://www.mstoner.com/index.php/blog/comments/651/pwireframing_paper_wireframing
  16. 16 http://www.mstoner.com/index.php/blog/comments/651/pwireframing_paper_wireframing
  17. 17 http://blog.semanticfoundry.com/2009/01/01/shades-of-gray-wireframes-as-thinking-device/
  18. 18 http://blog.semanticfoundry.com/2009/01/01/shades-of-gray-wireframes-as-thinking-device/
  19. 19 http://www.from-the-couch.com/post.cfm/title/wireframing-over-the-shoulder
  20. 20 http://www.from-the-couch.com/post.cfm/title/wireframing-over-the-shoulder
  21. 21 http://www.90percentofeverything.com/2008/01/02/the-boxing-glove-wireframing-technique/
  22. 22 http://www.90percentofeverything.com/2008/01/02/the-boxing-glove-wireframing-technique/
  23. 23 http://www.clickz.com/1491921
  24. 24 http://www.clickz.com/1491921
  25. 25 http://www.seomoz.org/ugc/seo-wireframing
  26. 26 http://www.seomoz.org/ugc/seo-wireframing
  27. 27 http://www.boxesandarrows.com/view/html_wireframes_and_prototypes_all_gain_and_no_pain
  28. 28 http://www.boxesandarrows.com/view/html_wireframes_and_prototypes_all_gain_and_no_pain
  29. 29 http://www.infosysblogs.com/eim/2009/06/the_ancient_art_of_wireframing_1.html
  30. 30 http://www.infosysblogs.com/eim/2009/06/the_ancient_art_of_wireframing_1.html
  31. 31 http://www.optaros.com/blogs/i-need-see-it-wireframing-richer-web
  32. 32 http://www.optaros.com/blogs/i-need-see-it-wireframing-richer-web
  33. 33 http://theprodesigner.com/better-perspective-in-wireframing/
  34. 34 http://theprodesigner.com/better-perspective-in-wireframing/
  35. 35 http://www.peterpixel.nl/writings/wireframing-using-indesign/
  36. 36 http://www.peterpixel.nl/writings/wireframing-using-indesign/
  37. 37 http://wireframes.tumblr.com/
  38. 38 http://wireframes.tumblr.com/
  39. 39 https://medium.com/user-experience-3/22668fcba9b3
  40. 40 https://medium.com/user-experience-3/22668fcba9b3
  41. 41 http://www.workwithiws.com/news/wireframing-web-applications-
  42. 42 http://www.workwithiws.com/news/wireframing-web-applications-
  43. 43 http://pasteinteractive.com/blog/2009/01/content-wireframing-ducks-meet-row/
  44. 44 http://pasteinteractive.com/blog/2009/01/content-wireframing-ducks-meet-row/
  45. 45 http://graphicdesign.about.com/od/effectivewebsites/ss/wireframes.htm
  46. 46 http://graphicdesign.about.com/od/effectivewebsites/ss/wireframes.htm
  47. 47 http://exitcreative.net/blog/2008/09/how-to-wireframe/
  48. 48 http://exitcreative.net/blog/2008/09/how-to-wireframe/
  49. 49 http://konigi.com/notebook/speed-wireframing-nick-finck
  50. 50 http://konigi.com/notebook/speed-wireframing-nick-finck
  51. 51 http://www.evolus.vn/Pencil/Home.html
  52. 52 http://www.evolus.vn/Pencil/Home.html
  53. 53 http://www.cmswire.com/cms/featured-articles/web-design-top-5-wireframing-tools-002922.php#evt-never
  54. 54 http://iplotz.com/
  55. 55 http://www.jumpchart.com/
  56. 56 http://konigi.com/node/1416
  57. 57 http://hello.hotgloo.com/
  58. 58 http://aiburn.com/article/building_a_website_wireframe_in_illustrator
  59. 59 http://www.balsamiq.com/products/mockups
  60. 60 http://www.networkworld.com/newsletters/web/2009/030209web1.html
  61. 61 http://templatr.cc/

↑ Back to top Tweet itShare on Facebook

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

Advertisement
  1. 1

    What about Fireworks? Together with Omnigraffle it’s all we need to build IxD’s and write specifications.

    0
  2. 52

    You could also mention Mockflow.com – free wireframing

    0
  3. 103

    Just started using fireworks for wireframing websites, it works great here is a link to a video tutorial. http://tv.adobe.com/?promoid=DRHYB#vi+f1498v1660.

    Some cool features are:
    Prototyping with interactive PDF
    Using symbols and library items (just like flash)
    Working with master pages

    0
  4. 154

    @Warren

    Why would you want a job wireframing? It should be the first step of any website design. It’s a part of the process; not a standalone vocation.

    0
  5. 205

    Warren: I don’t know anyone who would be out looking for a job doing wireframing exclusively – it’s something that any designer worth their salt should do before they begin designing. It should be a part of the initial planning with a client.

    0
  6. 256

    Great round up right here, very much appreciated. We did a hell of a lot of wire framing when creating our property portal, and still do when creating further ‘features’.

    It’s a great way of breaking down exactly what you want, and brain storming without any restrictions… A perfect solution.

    0
  7. 307

    Really nice one, which need to be follow the small companies. Excellent

    0
  8. 358

    thanks very much for the rich information. great !

    0
  9. 409

    thanks very much for the helpful solutions

    0
  10. 460

    I’m genuinely not being offensive, but how hard is it for people to realise that sketching things out on paper first, is generally a good idea? And why do they need TUTORIALS telling them how to do it?

    Good article, although not worth much for me as I have common sense.

    -1
  11. 511

    Thanks a lot .. its really great place for me. This is what i have been looking from long time.. even i asked number of expert, but havent got any proper response. NOw i have to the point answer… thanks a lot!!!!!!!!!!

    0
  12. 562

    An interesting tool

    http://www.aypwip.org/webnote/drupalando

    It´s a wiki, it may altered by any user.

    1
  13. 613

    Be very careful when choosing wireframe tools. Most of them create pretty screenshots that add little clarity. If the wireframe tool doesn’t support:
    1. working links/anchors to multiple pages
    2. shared content (topnav, bottomnav) for easy maintenance/updates
    3. export to a format that everyone on the team can view
    run for the hills. Surprisingly, the above are considered optional features.

    Only trivial sites can get away with wireframe tools that don’t support this – in which case you don’t need a wireframe.

    In my experience, the best wireframe is actually building a throwaway prototype site in HTML + Flash (no graphics, just links establishing workflow). As websites get more complex (ajax), this is the only way to approximate the experience. Plus… everyone understands a mini-website unlike the hidden language of wireframes i.e. I thought the line in this diagram meant a link on the page.

    p.s. Anyone thinking they can represent a website using paper needs to have their head examined. i.e. “Where does this link go?” “Just a second… I’ll grab the page!”

    0
  14. 664

    Konigi is a fantastic resource for wireframers- they have stencils, sketch pads, grayscale icon sets, and lots of inspirational designs. Take a look in the Tools section- they even have Wireframe Magnets.

    1
  15. 715

    Thanks for the great list, very useful, as usual.

    My tools of choice: the DotGrid notebook and a pencil pen for sketches, then the Blueprint framework for the rest. See the result.

    0
  16. 766

    Why do I get the feeling that this is going to be mentioned by the great VP of Internet Business?

    if you’re laughing at the title, yes, we have ’em.

    0
  17. 817

    iPlotz or pencil+paper are my favorites…

    0
  18. 868

    you can also use our free vector ui patterns for sketching web apps: http://bit.ly/1Hn4oT

    0
  19. 919

    My only complaint is that the Carsonified article and the Pro Designer article are exactly the same. With the exception of a few word changes here and there. I realize it’s easier than ever to lift other people’s work in the age of the internet, but it still doesn’t make it cool.

    I’d like to see SM get to the bottom of who wrote their article first, then delete the other one. Other than that, this SM article is great. Thanks!

    0
  20. 970

    Perfect Article. Good work Smashing!

    0
  21. 1021

    To build interfaces, we also can use our hands !
    At the beginning of a project it is fun and efficient.

    Look at this usability paper mock-up kit made by the french company Usabilis :
    http://blog.usabilis.com/post/2010/01/14/Outil-%3A-Kit-de-Maquettage-pour-conception-d-interface

    It’s helpfull!

    0
  22. 1072

    Um, yes, you can get a job making wireframes almost exclusively. I know because I’m one of Warren’s hated just-out-of-schoolers who’s had a job doing such for the past 2 years. My job consists solely of making wireframes, sitemaps, user flows and then writing the documentation later in the process to back it up. It’s called interaction design, the murky underworld between graphic designers and programmers.

    Bitter Warren, or any one else, if you want to find a job where you’re spending 99% of your time making wireframes, try any digital agency in any major city. Of course these days, it’s also expanded to include financial institutions, airlines, video game companies, insurance companies, and the list goes on for a while…it’s kind of like being an anesthesiologist: highly specialized, but highly necessary.

    0
  23. 1123

    ya we do need it 1st

    0
  24. 1174

    Great set of ressources! However, in the wireframing tools section, you forgot to mention justinmind, http://www.justinmind.com a great tool to wireframe and create fully functional interactive & dynamic prototypes without a single line of code! the prototype is so close from the final product you can even carry out remote user testing! easy & powerful!

    0
  25. 1225

    Nice list of articles, but the tools list leaves out a lot. Many of them mentioned by other posters, but I’ll add: Visio, Powerpoint (yes, Powerpoint!), Dreamweaver.

    0
  26. 1276

    good stuff

    0
  27. 1327

    Really cool content, here are my thoughts on wireframes – http://bit.ly/czdu2H

    0
  28. 1378

    Excellent resource list. Thanks for sharing!

    2
  29. 1429

    Cheers, really useful post, im looking to create some wireframes for a new web app and needed something a little more flexible and faster than Photoshop/Fireworks.

    1
  30. 1480

    great list. I have begun using a new html5 web app MockupTiger.

    What I like is that I can host it on my own server, currently using a trial version. So far working great. Added bonus is huge library of chart/graph widgets

    0
  31. 1531

    Hi Bill, thanks for the shoutout. Here is the link to mockuptiger http://www.mockuptiger.com

    0
  32. 1582

    Thank you for this great share. But, I thought I would like to introduce edraw too. It has a free sketch flowchart symbols library and easy to create the sketch diagrams. freeware
    http://www.edrawsoft.com/freemind.php

    0
  33. 1633

    I do accept as true with all the ideas you have offered for your post. They are very convincing and can definitely work. Nonetheless, the posts are very quick for novices. May you please prolong them a little from subsequent time? Thanks for the post.

    0
  34. 1684

    This website sucks monkey balls. BIG HAIRY MONKEY BALLS! And it smells of neglect.

    -2
  35. 1735

    Hi,

    Great collection of resources Cameron, Thank you!

    FYI, I noticed the link to “20 Steps to Better Wireframing” is broken.

    Sree

    0
  36. 1786

    Evelyn Germaine

    March 21, 2012 4:40 pm

    This is a great article! I’m relatively new to all this web design stuff, so I appreciate learning what wireframing is and getting the resources I need to learn more. I also recently took an course to learn about changes to the internet at large. Any other cool or relevant information you guys would recommend to an aspiring web designer?

    0
  37. 1837

    Keynote from Apple is actually a fantastic wireframing tool in so many ways. I despise presentation software (thank you powerpoint!) but in recent years got to like Keynote, then a Seth Godin blog item mentioned the great concept of using Keynote and also outlined a great overall way to “make a website”. Yeah it’s a bit of an oversimplification toward the end, but you get his point!

    Seth Godin: How to make a website: a tactical guide for marketers
    http://sethgodin.typepad.com/seths_blog/2012/12/how-to-make-a-website-a-tactical-guide-for-marketers.html

    0
  38. 1888

    That’s pretty cool, thank you so much for this!

    0
  39. 1939

    Dominik Gorecki

    June 12, 2013 9:35 pm

    Also check out this link for a great free wire frame kit in a sketch style.
    http://www.dominikgorecki.com/2013/06/sketch-wireframe-kit/

    0
  40. 1990

    http://www.uxpin.com is an awesome new wireframing and prototyping tool I’ve been using a lot. It’s growing pretty rapidly internationally and, now, in the US.

    It’s a web application that seamlessly covers the following design stages:
    * flowcharting
    * wireframing
    * mockuping (lightweight adjustments to graphics)
    * prototyping

    It’s working on tight integrations into mockup tools so designers can export wireframes into popular tools like photoshop, illustrator, etc. to build higher-fidelity mockups then import them back into uxpin.com for final prototypes and presentation before development begins. Axure, Omnigraffle, Balsamiq, and others should watch out for this team!

    0
  41. 2041

    I second that! Well researched article. Here’s one excellent software resource I’m currently using – http://creately.com/diagtype/wireframe Luurve the interface and Smart K Objects, too!

    0

↑ Back to top