Wireframing is an important part of the design process, one that shouldn’t be overlooked by even the most experienced designers. Wireframes can save development time by outlining exactly how a site should look and function, in a manner that can be shown to and approved by your clients.

And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some generated content. This way it gives you, your clients and colleagues a simple visually oriented layout that illustrates what the structure of the website will be by the end of the project. Also it serves as the foundation for any future alterations and is a key tool for communicating to developers.

In this article I will be focusing on resources for creating better wireframes, including tools and tutorials that will help you in the near future. Also consider our previous article about wireframe tools.

Wireframe Articles

1. Wire Frame Your Site

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.

2. Wireframes for the Wicked

A slideshow that talks about the purpose of wireframes and the different types of wireframes.

3. Wireframes Magazine

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.

4. My Five Commandments for Wireframing

A podcast and article from Boagworld on good practices for wireframing, including why you should wireframe and the benefits of paper wireframing.

5. Sometimes, the Best Wireframing Tool is a Pencil

A brief post on why wireframing with paper and a pencil sometimes works better than using computer-based tools.

6. Ajax Wireframing Approaches

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.

7. Wireframing is Not a Religion

A short but impactful piece from 52 Weeks of UX on the different types of wireframes and why there’s no “right” way to wireframe.

8. Why Sketching and Wireframing Ideas Strengthens Designs

This post from SpyreStudios covers why sketching and wireframing your ideas leads to the evolution of good designs.

9. The Future of Wireframes?

A post on the evolution of wireframes from functional to visual from Made by Many.

10. The Wireframe: All You Need to Know

This is a very basic guide to wireframing, perfect for beginners.

11. UX 101: The Wireframe

A beginner’s guide to wireframing from Viget Advance.

12. Guidelines, Tools and Resources for Web Wireframing

W3Avenue has put together this great resource roundup for wireframing.

13. Storyboards vs. Wireframes

This post talks about the benefits and drawbacks of using storyboards vs wireframes.

14. The Right Way to Wireframe

This is a fun video from Will Evans that shows the “right” way to wireframe (using OmniGraffle and stencils), as well as some commentary about wireframing. The background music is NSFW.

15. The Value of Wireframing

A post talking about the importance of wireframing and why it makes the design and development process go more smoothly.

16. The Importance of Wireframing

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.

17. Pwireframing: Paper Wireframing

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.

18. Concerning Fidelity in Design

Here’s a post on UX Booth that talks about using the proper level of fidelity in different design deliverables.

19. Wireframes vs. Prototypes

Another longer article on the differences between wireframes and prototypes.

20. Wireframing is Not Prototyping

A very short article on the differences between wireframing and prototyping.

Complete Wireframing and Mock Up Tools

1. FlairBuilder

FlairBuilder is a downloadable wireframing program that lets you build wireframes you can then share with clients (there are free online and desktop viewer clients that let them see the files). They offer a free fifteen-day trial, and then can bill monthly ($24/month) or yearly ($99/year). The program includes tools for prototyping websites as well as iPhone apps.

2. Quommunnication Stencil Kit

A PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids.

3. Facebook Applications Stencil Kit

Sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

4. Mockingbird

Mockingbird is a simple but powerful wireframing tool for Firefox, Safari and Chrome. There are a variety of paid plans available depending on your usage needs, and they don’t charge you for months where you don’t have any active projects.

5. ProtoShare

ProtoShare lets you create interactive prototypes that can include CSS, JavaScript and HTML, and you can add Flash, images, and other files. It also offers real-time collaboration tools with browser-based access.

6. Flex Stencil Kit

Includes all Flex components from Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.

7. Eclipse Stencil Kit

This stencil enables you to easily prototype Eclipse (wizard) dialogs with OmniGraffle(TM).

8. MockFlow

MockFlow lets you wireframe both online and offline, and offers a design library addon service with components and templates you can use. You can link pages using a sitemap, creating a clickable prototype.

9. Lovely Charts

Lovely Charts is free a wireframing and diagramming tool that lets you create all sorts of professional-looking wireframes, flowcharts, and other diagrams.

10. Massive Web UI & Button Set

This set contains UI elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the PSD file). Available are control buttons including arrows and basic symbols, info and text boxes, breadcrubs, buttons, and other navigation elements, drop-down and collapsible box styles, speech bubbles, search forms and loading elements.

11. Free Sketching & Wireframing Kit

The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG, which can be easily modified. It can also be downloaded in PDF and EPS formats.

12. Cacoo

Cacoo is a free online drawing tool that can be used for creating wireframes or other diagrams. You can export images in PNG format.

13. EightShapes Unify

EightShapes Unify is a collection of templates, libraries and other assets that enable user experience designers to create more consistent and effective deliverables faster. The system uses the Adobe Creative Suite of products; Adobe InDesign is the primary authoring tool

14. Wireframe Symbols

This download contains a wireframe symbol library and a full Adobe Illustrator file with all of the elements spread out on a board. To install the library just drag and drop the file named Wireframe Symbols.ai into your Adobe Illustrator “Symbols” directory. Once you open Illustrator, go to your Symbols Palette and load the library.

15. Lumzy

Lumzy is a free app that lets you quickly create interactive mockups. It includes live chat and real-time collaboration, as well as a built-in image editor.

16. SimpleDiagrams

SimpleDiagrams is an Adobe Air app that lets you build sketchy diagrams in minutes, and includes pre-made design elements. There are free and paid ($19) versions.

17. Web Page Elements

18. Gliffy

Gliffy is a free wireframing tool that requires no signup and lets you share and collaborate on the wireframes you create. You can also use it to create diagrams and flowcharts.

19. Keynote Wireframe Toolkit

This toolkit gives you various elements you need to create wireframes using Apple’s Keynote software. Included are things like form inputs, scroll bars, tabs, breadcrumbs, progress bars, iOS elements, modal windows, and more. The website also offers some tips and tricks for creating wireframes using Keynote. Price $12.

20. Keynotopia Wireframing Set

Another free wireframing template set for Keynote. It includes controls, breadcrumbs, containers, dialogs, galleries, social elements, and more.

21. PowerPoint Wireframe Template for UI Design

PowerPoint templates for PC users out there. These include sample screens with various design elements included.

22. 10 Free Printable Web Design Wireframing Templates

If drawing wireframes by hand is more your style, then the printable wireframing templates in this collection are for you. There’s everything from printable browser frames to iPhone mockups.