What is Wire Framing?

Wait. You are creating a design without putting together wire frames first? Big mistake. While skipping this step may get you a completed design quicker, without wire frames, your pages may end up missing critical elements or have functions in the wrong place. It may seem like a simple fix, but the design frequently distracts us from seeing the things we should be seeing. – 21 Things Every Web Developer Should Be Doing

As you just read, understanding and using wire frames is super important. Essentially, wire framing is the rough draft aspect of a website and the structure it is meant to contain. It can be as simple as writing down what you have in mind as a sketch or as complex as using an outright wireframe program or prototype tool.

Sounds simple enough, right? Wrong. With all of the emphasis on mobile design, one does not simply make just one website, but at least 3 altogether: desktop, tablet, and mobile styles. And the design features for mobile in general will have to be strikingly different altogether:


Image source: How & Why Prototypes Are Mandatory for Good Design

Prototypes Versus Wire Frames

There are different ways to describe the development of a website in its early stages. Prototyping is a popular term. Some people describe it as a mock up. Others choose wire frame as the word.

A website prototype can be any mock-up or demo of what a website will look like when it goes live. It can be anything from a paper sketch, to a clickable HTML prototype. However, typically when people talk about a prototype they are referring to an interactive prototype of some kind which allows users to navigate from page to page and use functionality such as drop down menus.- What is a website prototype?

A prototype for web development is therefore more like an almost-working website. This technically means a prototype is conceptually quite far from a wire frame, which is only a skeleton. Being a pseudo-finished product, prototypes are much more work, but they are great for testing. And testing can expose problems or if something on the website needs to be scrapped and it can be changed before the website is launched, instead of after it is made live.

Is wire framing the “rough sketch” then? Somewhat. Perhaps at this point in development, “mock up” fits as a better word to describe that, because it implies the design is not (yet) real.

First Steps to Wire Framing

When mocking up, hand-drawn versions can be an excellent approach for several reasons. Here are two reasons for the pen and paper approach as described by Nick Petitt from Treehouse.com that are my favorites:

Dozens of quick thumbnail sketches can be scratched out in a few minutes. The less time I spend on an idea, the less attached I’ll be; this is good in the early phases because I don’t want to settle too soon. Now is the time to explore all the possibilities.

Drawings are great because the level of abstraction can change wildly in a matter of seconds. One moment I might be blocking out the major columns, and the next I might be deciding on the order of navigation elements.

  Wire Frames Defined

The answer as to what wire frames really are is quite simple:

“Once I have a paper mockup I’m happy with, only then will I use a digital mockup tool to wireframe my ideas.” – Nick Pettit from Treehouse.com

So ultimately, this is why wire frames are described as like a backbone. They are actually when a design has begun to gel a bit and take form, has been selected, but it’s still too much of a rough sketch to be made into an actual website yet.

“Wireframes, mockups, and requirement documents live in paper, not reality.”
Designer Todd Zaki Warfel

Keeping this in mind,  usability.gov says that wire frames “typically do not include any styling, color, or graphics”. They also list the following items that will typically make up the bare minimum, or rather, the “wire” of the wire frame:

  • Logo
  • Search field
  • Breadcrumb
  • Headers, including page title as the H1 and subheads H2-Hx
  • Navigation systems, including global navigation and local navigation
  • Body content
  • Share buttons
  • Contact information
  • Footer

The more complex the wire frame, the closer it is to becoming a prototype, which is representative of the final product. Until that happens, dummy text and placeholders are often used, along with experimental spacing. Wireframes are not interactive! It is also during this time when any specific technologies that are meant to be used can be decided upon and/or anticipated.

This illustration should now make a lot of sense!


Image source:  How & Why Prototypes Are Mandatory for Good Design

Making Mistakes

Mistakes are certainly expected during the development process and it is during the prototyping stage when these problems are ironed out:

“Prototyping allows teams to experiment, giving them the freedom to fail cheaply while learning more. Just take a look at how prototypes helped increase estimate accuracy by 50% while reducing requests for clarification by 80%.” – Designshack.net

Indeed, at this stage, not only is communication actively happening as everything is being put together, but it is also the time when UX (user experience) can be observed and tested more accurately because the website is no longer just an idea, but an actual concept in motion.


The individual needs of websites vary greatly, but making proper wire frames are key in making something that works the well from the start, instead of wasting time and money into redoing or fixing something all over again.

For a cheat sheet, here is a quick summary of everything, along with a description of the what roles wireframes, prototypes, and mockups play in web development (as summarized by speckyboy.com). These details are helpful for considering whom the audience is that you are working with:

  • Wireframe
    • Key Aspects: Basic representation of design elements.
    • What to use for: Communication, documentation.
  • Prototype
    • Key Aspects: Interactivity.
    • What to use for: Interactive user testing, UI design.
  • Mockup
    • Key Aspects: Static visualization, branding.
    • What to use for: Stakeholder design buy-in.

About Juliette

Techy girl who also loves both technology and culinary arts. Programming and recipes are my thing! Currently learning about web development while taking a bite out of a delicious crusty piece of bread.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s