Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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 Link

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 Wireframing
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 Screenshot

Get Wireframing: The All-In-One Guide9
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 Screenshot10

The Importance of Wireframing11
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 Screenshot12

Pwireframing: Paper Wireframing13
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 Screenshot14

Shades of Gray: Wireframes as Thinking Device
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 Screenshot

Wireframing Over the Shoulder15
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 Screenshot16

The ‘Boxing Glove’ Wireframing Technique17
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 Screenshot18

Framing the Problem19
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 Screenshot20

SEO Wireframing21
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 Screenshot22

HTML Wireframes and Prototypes: All Gain and No Pain
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 Screenshot

The Ancient Art of Wireframing
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 Screenshot

“I Need to See It”—Wireframing for a Richer Web23
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 Screenshot24

Better Perspective in Wireframing
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 Screenshot

Wireframing Using InDesign
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 Screenshot

I <3 Wireframes25
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 Screenshot26

Website Wireframes27
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 Screenshot28

Wireframing Web Applications
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 Screenshot

Content Wireframing: Ducks Meet Row.29
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 Screenshot30

How to Create Website Wireframes31
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 Screenshot32

How to Wireframe
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 Screenshot

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

Wireframes Screenshot

2. Wireframing and Mockup Tools Link

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 Screenshot

Pencil Project
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 Tools33
A review of five wireframing tools from CMS Wire. Tools included are OmniGraffle, MockupScreens, iRise, Axure, and MindJet MindManager.

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

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

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

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

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

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

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

Templatr40
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 Link

  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://www.gracesmith.co.uk/get-wireframing-the-all-in-one-guide/
  10. 10 http://www.gracesmith.co.uk/get-wireframing-the-all-in-one-guide/
  11. 11 http://www.45royale.com/blog/articles/the-importance-of-wireframing/
  12. 12 http://www.45royale.com/blog/articles/the-importance-of-wireframing/
  13. 13 http://www.mstoner.com/index.php/blog/comments/651/pwireframing_paper_wireframing
  14. 14 http://www.mstoner.com/index.php/blog/comments/651/pwireframing_paper_wireframing
  15. 15 http://www.from-the-couch.com/post.cfm/title/wireframing-over-the-shoulder
  16. 16 http://www.from-the-couch.com/post.cfm/title/wireframing-over-the-shoulder
  17. 17 http://www.90percentofeverything.com/2008/01/02/the-boxing-glove-wireframing-technique/
  18. 18 http://www.90percentofeverything.com/2008/01/02/the-boxing-glove-wireframing-technique/
  19. 19 http://www.clickz.com/1491921
  20. 20 http://www.clickz.com/1491921
  21. 21 http://www.seomoz.org/ugc/seo-wireframing
  22. 22 http://www.seomoz.org/ugc/seo-wireframing
  23. 23 http://www.optaros.com/blogs/i-need-see-it-wireframing-richer-web
  24. 24 http://www.optaros.com/blogs/i-need-see-it-wireframing-richer-web
  25. 25 http://wireframes.tumblr.com/
  26. 26 http://wireframes.tumblr.com/
  27. 27 https://medium.com/user-experience-3/22668fcba9b3
  28. 28 https://medium.com/user-experience-3/22668fcba9b3
  29. 29 http://pasteinteractive.com/blog/2009/01/content-wireframing-ducks-meet-row/
  30. 30 http://pasteinteractive.com/blog/2009/01/content-wireframing-ducks-meet-row/
  31. 31 http://graphicdesign.about.com/od/effectivewebsites/ss/wireframes.htm
  32. 32 http://graphicdesign.about.com/od/effectivewebsites/ss/wireframes.htm
  33. 33 http://www.cmswire.com/cms/featured-articles/web-design-top-5-wireframing-tools-002922.php#evt-never
  34. 34 http://iplotz.com/
  35. 35 http://www.jumpchart.com/
  36. 36 http://hello.hotgloo.com/
  37. 37 http://aiburn.com/article/building_a_website_wireframe_in_illustrator
  38. 38 http://www.balsamiq.com/products/mockups
  39. 39 http://www.networkworld.com/newsletters/web/2009/030209web1.html
  40. 40 http://templatr.cc/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ 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

    yet another comment

    September 1, 2009 5:04 am

    OT – Is it just me, or are these really utterly unnecessary comments? Why do so many people feel the urge to comment on SM, like their day would not be complete without it? “Thanks, great, SM really shine here, etc?” Do you guys like to hear your voice? I too think that SM is great, and feedback + comment traffic is good for them, but it’s just so hopeless to find any additional info in the comments. I hereby propose some self-moderation. If you don’t have anything to add, think about saving a few keystrokes. Don’t worry, there’ll be still enough positive feedbacks.

    Sorry if I came across as rude, not my intention.

    2
  2. 2

    Gr8 Article! From the last two months smashing seems to give voice to my thoughts and explore my intuitions to increase the knowledge I need. Simply the best.

    -1
  3. 3

    Great post guys! This was helpful and it’s nice to see that other people see the importance of wireframes.

    -1
  4. 4

    I’d also recommend people look at ProtoShare — we’ve been using it for a few months and love it. Cut our wireframing time in half — and it’s all functional!

    0
  5. 5

    Excellent article! Thank you !

    0
  6. 6

    Smashingmagazine is really in its element here!
    Very specialized & relevant information in this article.

    Thanks.

    0
  7. 7

    Smashing as usual! Loads of thanks!

    0
  8. 8

    very very thanx…

    1
  9. 9

    always like to see wireframing articles – too often an overlooked element of the dev process.

    2
  10. 10

    great article.. Thanks

    0
  11. 11

    John (Human3rror)

    September 1, 2009 4:40 am

    excellent. great stuff!

    0
  12. 12

    Sublimo Designs

    September 1, 2009 4:51 am

    mmmh…
    this should work: link

    0
  13. 13

    Wonderful! I was actually on a break during wireframing while I decided to do my daily visit to smashing and found this article about.. wireframing :)

    Excellent – as usual – smashing!

    0
  14. 14

    I really should do more wireframing, but I try to work it all out in my head first! It just leads to wasted time! Great article!

    0
  15. 15

    Great roundup of wireframing knowledge. We’ll definitely point potential customers to this article! We hope people consider ProtoShare.com as well as the other fine tools mentioned (thanks for the shout out, Chris Adams, #32 above!). We are a collaborative online wireframing/prototyping tool used by many leading interactive agencies and companies. Our latest release just came out last week (YouTube preview).

    One point we like to stress is that wireframes are a means to an end – of getting a better spec and requirements – they are not an end-product in and of themselves. The wireframes are to foster communication to ensure the right things are built. Some projects warrant very detailed wireframes and prototypes, but most only need enough detail to get the discussion going. You have to guard against overdesigning in the wireframing stage.

    0
  16. 16

    Thank you for the great article! Very helpful. I want to try the pwireframing technique soon.

    1
  17. 17

    Have you looked at Microsoft’s Expression tools with SketchFlow? It’s a very nice wire framing/prototyping/documentation tool (no I don’t work for MS).

    SketchFlow video from MIX09 conference

    0
  18. 18

    Why do so many people feel the urge to comment on SM, like their day would not be complete without it?

    Because, in my case, my day is not complete without SM. Really, I’m always looking for inspiration, advices and help, as I’m always learning. And SM is a great help.

    0
  19. 19

    Chris Korhonen

    September 1, 2009 5:38 am

    Any recommendations for a good brand of notebook for sketching/wirefaming?

    I’m thinking something with a good paper stock, decent sized, but not too big, and maybe pre-printed grids?

    -1
  20. 20

    Alex Luna (justinmind.com)

    September 1, 2009 5:42 am

    No rich interactions prototyping tools? You could consider also Justinmind Prototyper.

    Besides that, great content and very nice resources. Gonna RT.

    1
  21. 21

    Another great list! Thanks for taking the time to put all of this in one place. It’s helpful looking at others’ design processes, especially those earlier stages, such as wireframing.

    Keep up the good work!

    0
  22. 22

    Any recommendations for a good brand of notebook for sketching/wirefaming?

    Chris, I’m a big fan of the pocket moleskine grid notebook and the large moleskine grid notebook. Splash out on a decent pencil too.

    0
  23. 23

    Brilliant!!! Apart from i just sent a wireframe to a designer before reading this!

    One thing though, I have started wire framing with Fireworks, does anyone know of a symbol pack available for fireworks or templates etc that would speed up my workflow???

    Cheers

    0
  24. 24

    Wow… There’s a LOT of info here! Where to begin?!

    What about http://www.gliffy.com/ ?

    0
  25. 25

    Great read. Thanks for the perfect compendium!

    0
  26. 26

    Look, I’m a Mac user, too. But Microsoft SketchFlow really should be in this list. I’m surprised more products of this ilk are not out there. Looks very promising!

    Microsoft SketchFlow

    peace | dewde

    0
  27. 27

    Strange.. not a single word about fireworks.

    0
  28. 28

    You missed FlairBuilder, which has treated me oh so well. I wire-framed up a fairly complex mobile app just a few days ago using it and it took me less than two hours to get the whole thing up, and worthy of presentation to the client. Two hours!

    0
  29. 29

    Exactly what I needed, was yesterday looking for a good tool to wireframe more easily..

    thanx, Tom.

    0
  30. 30

    Another wireframing tool is WireframeSketcher: http://wireframesketcher.coom

    It’s an Eclipse plugin that also works in Aptana, Zend Studio and even Flex Builder. Some of it’s distinctive features are master screens, wiki syntax in components and storyboarding mode. The plugin is commercial but free licenses are offered to open-source developers, bloggers and non-profits.

    0
  31. 31

    Ricardo "mAiN_iNfEcTiOn" Machado

    September 1, 2009 7:27 am

    Very nice post!!! I’m a freelancer and, for me, this kind of posts help me a lot to improve my web-development capabilities. Allows me to organize myself and present a better and more professional work to the client.

    Thanks SM. YOU ROCK :)

    0
  32. 32

    This is a really nice collection, Cameron, thanks for including a lot of tools I’d never encountered before and that look rather intriguing.

    I just hope people are in the mood for more articles on wireframing :)

    0
  33. 33

    Courtny Cotten

    September 1, 2009 8:56 am

    For those seriously looking into the future of rapid prototyping and sketching of interfaces:

    Sketchflow > http://www.microsoft.com/expression/products/Sketchflow_Overview.aspx
    Adobe Catalyst (BETA) > http://labs.adobe.com/technologies/flashcatalyst/

    0
  34. 34

    I use Oversite. It’s pretty cool: http://taubler.com/oversite/

    0
  35. 35

    Another wireframing tool is WireframeSketcher. It’s an Eclipse plugin that also works in Aptana, Zend Studio and even Flex Builder. Some of it’s distinctive features are master screens, wiki syntax in components and storyboarding mode. The plugin is commercial but free licenses are offered to open-source developers, bloggers and non-profits.

    0
  36. 36

    Joshua Sortino

    September 1, 2009 9:21 am

    As a designer, I greatly appreciate the time it took for Smashing Magazine to create this list of wireframe resources! Wireframing is one of the most underrated techniques in modern web design.

    0
  37. 37

    Have you ever heard of iRise? it’s a great wireframing tool.

    http://www.irise.com/index.php

    0
  38. 38

    Outstanding article! Thank you Smashing Magazine.

    0
  39. 39

    None of this stuff matters when nobody ever hires information architects and interaction designers to even create these wireframes.

    They believe the best ones are right out of school, but they dont have 10 years of experience so they can’t be good can they? Of course, only the best ones have 10 years experience and are senior quality right?

    Why waste time learning to wireframe when you won’t be able to get a job doing it? Makes zero sense.

    1
  40. 40

    Great article! Very useful.

    0

↑ Back to top