Blog, Learn Design, Learn Tech Skills


Wireframes are sketches, drawn by hand or using a computer program, that show the features, content, and functionality of a website or software application.

Wireframes are sketches, drawn by hand or using a computer program, that show the features, content, and functionality of a website or software application. Wireframes are the blueprints of the tech world, they give you a rough sense of what a website will look like, illustrate what features you are to build and define how all the different parts of a website are meant to work together, without actually creating final designs.

A handdrawn wireframe

Wireframes can take a myriad of forms. Wireframes can be sketches drawn by hand, static annotated wireframes created with a wireframing program, or clickable wireframes that can serve as a rough prototype for the finished product.

A wireframe made with a wireframing app

Making wireframes of your site can be a great step at many stages in the lifecycle of a web development process. It’s often a good idea to start your brainstorming by sketching out a wireframe or two. Then, once you begin to develop a list of product features, wireframing out your site can help you make sure that you aren’t forgetting anything. And finally, clickable wireframes are an excellent way to test the usability of your product and gauge user interest before you invest your time and money in developing the final product.

A Deeper Dive

There are three main reasons why you should wireframe thoroughly and often:

  1. At first blush, you will always underestimate the complexity of the task at hand. In our experience working with individuals, small businesses, and Fortune 500 companies, one thing is constant: everyone believes that their project is small and straightforward, and it rarely is. The good news is that creating a complete wireframe of your website, with every single page wireframed out, can go a long way in making sure that you have everything accounted for.
  2. Even if you think you are all on the same page, everyone is imaging something different. We promise! For better or for worse, language is an incomplete communication medium. When it comes to software design, nothing–no amount of emails, feature documents, or hand-wringing–beats having a rough prototype that everyone can look at, and better yet, click through.
  3. Usability! Usability problems are inevitable! Best to diagnose them early and often. And a little known secret in the tech world is that you can test usability of your website using only wireframes. Even paper ones. Seriously, give it a try!
Now Try This

Before you get started, remember that wireframes can take many forms, as long as they illustrate your site content, features, and functionality. You don’t need anything more complex than a sheet of paper and a pen to make your first wireframe.

That said, there are a number of excellent wireframing softwares out there, some free, most paid, that come with preset website elements–stuff like buttons, drop down menus, and whatnot–to make wireframing easier. Some programs even let you make your wireframes clickable and interactive.

Our favorite wireframe apps:
Mockingbird: Mockingbird is a web based wireframing application that allows you to create your wireframe online and share it with collaborators. Personal plans start as low as $9/month.

Omnigraffle: Omnigraffle is one of the most popular wireframing tools. The desktop application, only for Macs, allows you to create reusable styles for your site, generate page outlines, and take advantage of the extensive library of Omnigraffle stencils. Licenses start at $99.

Axure: Axure is super expensive (~$300!) but there is nothing like it. Axure allows you to create clickable and dynamic wireframes that you can output to HTML and JavaScript files to put online. If you are working in client services, the investment is definitely worth it. Axure also has a big library of presets to make wireframing for iPads, Android phones, and iPhones quick and easy.

One Last Tip: As you go through wireframing your site, make sure that the connections between pages are clear. When you click the search button, where do you go? How do you get from Home to Tech Terms, and back? If someone lands on a single tech term page, how easy is it for them to access the article archive?

Asking yourself these questions as you go through your site will help you get a much clearer sense for all of the features that you will need to build.

Did we miss any awesome wireframing tools or wireframing tips? Let us know in the comments.