Industry Resources

What Is Wireframing?

A website wireframe—also called "a screen blueprint," "white site model" or "page schematic"—offers you a visual of the basic architecture and functionality of your website. It essentially allows you to plan how your customers will navigate and use your site before you begin the time-intensive and costly endeavor of designing and building your site.

In the simplest terms, building a wireframe means that you will create a basic, visual representation of your website that includes text, shapes and working links, but usually doesn't include the final images, graphics or content. When you wireframe with a computer application, you can drag around widgets such as boxes, lines and buttons to represent the basic concept of how the website will ultimately look. This allows you to understand the user-friendliness of a site without being bogged down by the content.

With a wireframe, you have more versatility when it comes to collaborating, iterating and reworking the design; it also helps to ensure that you stay on budget and meet your deadlines because fewer revisions are necessary after the site is built.

The good news is that there are tons of wireframing resources available to walk you through the process. Here are some of the most popular:


Wirify is a bookmarklet that allows you to see the wireframe of any existing website. Visit competitors' sites or just other sites you think are well-done to see how they have laid out content. Cost: Free.


The Balsamiq Mockups app renders your wireframing to appear as a pen-and-paper sketch, so it feels less permanent than other tools. It also offers drag-and-drop features that allow you to resize and rearrange items without having to start from scratch. Cost: Starting at $79 for single users.


This online tool makes it easy to create and share your wireframes with others. You simply hit the “Share” button in the toolbar and edit the access settings to share projects with people. Cost: $9 monthly for the "Personal" plan, $20 monthly for the "Teams" plan, $40 monthly for the "Pro" plan and $85 monthly for the "Unlimited" plan.


This software allows you to experience real-time wireframing with your team. Additionally, you can use the built-in chat function to talk to far-flung team members as you work. Cost: $14 monthly for the "Group" plan, $28 monthly for the "Team" plan, $54 monthly for the "Agency" plan.


Another web-based tool, MockFlow offers such features as BannerPro, which allows you to create HTML5 animated banners without any coding, and BrochurePro, which lets you design and publish PDFs of brochures and flyers. Cost: The basic version is free. Considered the best for startups and freelancers, the Premium package is $69 per year, and the Team-Pack, which is ideal for businesses and teams, is $166 per year.


This resource allows you to create interactive HTML wireframes without coding; it also lets you easily share your wireframe with clients or team members. Plus, you and your team can use PCs, Macs or a combination of both because the files are compatible between Windows and OS X. Cost: Plans start at $289 per license, and at press time, you could sign up for a free trial.


FlairBuilder is a mockup and prototyping tool that keeps it simple and straightforward. The website boasts "Everything you need, nothing more." Features include being able to easily reorganize pages, easy generation of site maps and annotating capabilities. Cost: Licenses for one user start at $99, but at press time, you could try a free 15-day trial.

Once you have wireframed a basic mockup of your site, you will most likely need a designer to bring the template to life and a programmer to code it. You might also be able to hire a web designer who can manage both tasks. Learn more about hiring a developer here, and a designer here.