Would you attempt to build a house without a blueprint? I hope not. The same goes for developing websites. Instead of heading directly into writing code, you should always begin with a careful analysis of your client’s business needs and a plan for addressing those needs. It’s vital for the success of a project that you clearly define its scope and gain a good understanding of the target audience before you proceed to the implementation. If you don’t specify and discuss what you are going to create, you risk ending up with a solution nobody is satisfied with.

Taking the extra time to do some upfront planning will pay off in the long run by helping you reveal problems and misunderstandings early when they are still quick and easy to fix.

More and more web developers use wireframes as a visual tool for quickly specifying the layout and functionality of a website. Wireframes are simple block diagrams that demonstrate the placement of page elements, such as headers, navigation menus, content areas, and footers. They are typically kept in grayscale or with minimal color, leaving out design details like font types, gradients, or drop shadows. This helps guide feedback toward organizational and functional issues rather than discussions about aesthetic choices. Their simplicity also allows everyone to participate in the design process without requiring any artistic skills.

A good wireframe addresses questions from several different design areas:

• Layout: What interface elements will be used? Where will the elements be placed? Which items are related to each other and should be grouped?
• Priority: What are the key elements that you want users to notice first? What do you want a user to do when he or she arrives at a page?
• Content: What content should be present on a page? Is text enough or should there be images and videos as well? Which options should UI elements like drop-down lists or pop-up menus contain?
• Navigation: How will users move around and interact with the site? Will there be a site-wide navigation menu or any other guidance? Does the website provide a search function?
• Functionality and behavior: How does a page respond to user input? Will an action require a full page refresh? How will form validation errors be handled?

Who Uses Wireframes?

Wireframes are a great planning and communication tool and benefit pretty much everyone engaged in a project. They help clients and business users understand your ideas and concepts much more easily than when you describe them in textual form. After all “a picture is worth a thousand words.” Showcasing a wireframe to a client often raises questions and reveals problems that have not been adequately considered before. Editing wireframes is quick and easy and requires far less effort than making changes and dealing with issues later in the implementation process.

Visual designers can build upon wireframes as a starting point for creating the final page layout and producing graphics for the site. Wireframes provide them an overview of the required page elements and give information about how the user will interact with the site.

Developers use wireframes to get an understanding of the technical functions and behaviors that they will have to code. Particularly helpful are storyboards consisting of a series of related wireframes that demonstrate how the front-end should react to inputs or conflicts.

How to Create Wireframes?

In its simplest form, a wireframe is just a bunch of rectangles drawn on a piece of paper to show the placement of the major elements of a page. This means that all you need to get started is a pen and a piece of paper (you can also use a napkin, a whiteboard, or whatever surface is available and suits you). Designing websites on paper may appear absurd and archaic at first, but almost any seasoned designer uses this technique to kick-start the creative process. Actually, sketching is a great way to get the creativity flowing and to quickly experiment with different ideas in a trial-and-error manner. A blank sheet gives you total freedom to design anything you can image at any place you want. It is perfect for exploring and prototyping layout approaches on a high level. For detailing and refining your wireframes, it is best to turn them into a digital form using one of the tools described in the next section. Many wireframe tools also allow you to collaboratively work on a file, keep track of changes and turn wireframes into clickable prototypes.

Wireframing Tools

If you search around the Web, you will notice that there is no shortage of software tools dedicated to creating wireframes. This gives you lots of choices: Do you prefer a web-based tool or are you more comfortable with a native desktop application? Does it have to be free or are you willing to pay for a good solution? Should the tool only provide support for creating wireframes, or does it also have to able to create pixel-perfect screen mockups and HTML prototypes?

I will now introduce you to eight different tools that I have tested and found worth presenting here. Which tool you ultimately decide on is up to you and your preferences and project requirements. Use whatever solution fits you and your team best.

PowerMockup

PowerMockup is not a stand-alone wireframing tool but an add-on for Microsoft PowerPoint. It provides approximately 90 PowerPoint templates for typical UI elements (buttons, grids, menus, etc.) and over 100 wireframe icons. Using PowerMockup is simple: You select an item from the library pane and drag it onto a PowerPoint slide. The items can then be resized or otherwise altered using the standard editing features that PowerPoint provides. What also deserves to be mentioned is that PowerMockup lets you add custom UI elements to the library and share them with others. PowerMockup requires PowerPoint 2007 or 2010 for Windows to be installed and can be purchased at a price of $39.95 (single-user license).

Balsamiq Mockups

Balsamiq Mockups is one of the best known wireframe apps with tens of thousands of users. It aims to reproduce the experience of sketching on paper, resulting in low-fidelity wireframes that look like hand-drawn scribbles. In its current version, it comes with 75 built-in UI components and 187 icons. Notable features include the ability to create simple click-through prototypes by linking wireframes together, and the possibility to export to PNG and PDF. Balsamiq Mockups is a Flash application that can either be used online in the browser or be downloaded as a stand-alone version for Windows, Mac and Linux. A single-user license for the tool is available at $79.

Axure RP

Among the eight tools presented here, Axure RP is certainly the most comprehensive one, but also the most expensive (priced at $589 per license). It provides functionality for creating wireframes, flow diagrams, screen mockups, prototypes, and specification documents for applications and websites. In particular its features for creating interactive prototypes are extremely versatile and powerful, ranging from simple links to complex rules for displaying dynamic content. Various widget libraries with icons, design patterns and UI elements can be downloaded from the product’s website. Axure RP is a native desktop application available for Mac and Windows.

Pencil

Pencil is an Open Source wireframe tool that can be installed as a plug-in for Firefox or as a stand-alone application for Windows, Mac and Linux. It support links between pages, can export to several formats including HTML, PDF and Word, and allows you to add your own stencils and templates. The style of the included stencils ranges from rough and sketchy to crisp and clean, allowing you to create wireframes or mockups of different fidelity.

ProtoShare

As indicated by its name, ProtoShare puts its focus on creating prototypes that are easily shareable. It enables you to start with basic wireframes and evolve them into high-fidelity clickable prototypes, while constantly seeking feedback and suggestions from other team members and client. The built-in library of stencils and widgets that ProtoShare provides, can be extended by creating custom items with HTML, CSS and JavaScript. ProtoShare is a fully web-based solution with prices starting at $29 per month.

MockFlow

MockFlow is a Flash-based wireframing tool that can be used in the browser or installed on the desktop as an Adobe AIR application. When working offline with MockFlow, all changes are stored locally and synced back to the server once you are online again. While being online you can collaboratively work together with other team members and make changes to a wireframe at the same time. A “Team Chat”feature helps everyone coordinate their changes. MockFlow offers a basic free plan with limited options; a premium plan for unlimited projects and project members costs $69 per year.

WireframeSketcher

WireframeSketcher is a desktop-based wireframing solution that is not only available as a stand-alone application (for Windows, Mac OS X and Linux), but also as a plug-in for any Eclipse IDE. This makes it an interesting choice for software and web developers who already work in an Eclipse environment. The tool lets you choose between a sketchy style that makes your wireframes look unfinished and hand-drawn, and a clean style that uses crisp, straight lines. A single-user license for WireframeSketcher can be purchased at a price of $99 and includes twelve months of free updates.

UXPin

UXPin is a web-based system for managing design documents like wireframes, sitemaps, persona descriptions or flowcharts. It lets you upload image files, invite teammates to review and comment on them, and keep track of revisions. The system also includes its own wireframe editor that supports real-time collaboration and allows you to export your wireframes to HTML. Another feature worth noting is that UXPin can convert paper prototypes into digital wireframes as long as they have been created using an official UXPin notepad (available for $30 on their website). You simply take a picture of the prototype and it will automatically be recognized by the UXPin app. Prices for UXPin start at $7 per month for a single-user project.

Wireframing Tips

Before concluding this article I would like to share a few wireframing tips and best practices that I have learned through my own experience.

Learn from examples

In order to get a better understanding of wireframes and what they might contain and look like, you should spend some time browsing the Web and examining examples of wireframe sketches. It’s always interesting and inspirational to see the approaches that others have taken. A good starting point is the I Love Wireframes group that you can find on Flickr.

Continuously seek feedback from co-workers and clients

Wireframing is a collaborative process and not a task that should be done in isolation in the proverbial ivory tower. It’s crucial to loop the whole team in and schedule frequent review meetings to discuss and validate your ideas. As soon as you have something basic to show, get it in front of the other team members or present it to the intended users. Ask them if everything makes sense, if something important is missing, and what they would do differently. Getting this kind of feedback early ensures that you don’t waste time optimizing the wrong things.

Keep your wireframes simple and purely functional

Don’t put too much effort into making your wireframes look neat and sweet. Wireframes are a tool for planning and communicating the structure and functionality of a website. Color gradients, drop shadows and other gimmicks that can be construed as visual design should be strictly avoided to keep the focus on the more important structural questions. It’s also important not to include too much information in one wireframe. Every wireframe must have a clear message and should contain only those elements that are necessary to communicate this message.

Use annotations where helpful

Never assume that elements of the page speak for themselves and that others will immediately understand what you intend to communicate. Therefore, you should always label those elements that are not self-explanatory and add annotations to describe the interactions.

The Bottom Line

Wireframing has become an important part of the web development process and is especially useful in larger projects with several team members and stakeholders. Wireframes help plan and document decisions about the structure, content and behavior of a website without delving into visual design details. They make an excellent tool for communicating concepts to clients and soliciting feedback from other team members. I can only recommend giving wireframing a shot.You won’t regret it!