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