Before you build a house, you have blueprints created to help you visualize the overall layout of your new home. Blueprints layout the design of your home, identifying room size and shape, as well as the placement of windows, doorways, and closets. Just as we plan out a home before we start building, we need to plan out a website to create the framework for design. Just as blueprints to give us a clear visual of what the home will look like, Wireframes create an initial graphic representation of the website.

What is a Wireframe?

A wireframe is not the official design stage, but a sketch of how you expect your information to be laid out on the computer screen. This step is not about defining the colors or fonts in the design, but it is the gateway to understanding how things function on your website.

The Wireframe Process

Different web firms may approach this process differently, but for us here at the Technology Therapy Group this step should build on steps one and two. Before you begin to frame out your site you need to be clear of your goals and you need to have created your structure. Here are some questions to help you.

Question 1: How Many Wireframes Do We Need To Create?

Think back to your goals and map; do you see each page having the same purpose and layout? Create a list of the pages you’ll want to layout, for example:

• Home page
• General content page
• Shopping category page
• Search results page
• Video page
• Blog

As you can see, there may be several pages to draw out before you begin designing.

Question 2: What Type of Information is on the Page?

Let’s go back to our analogy of the home blueprint; wouldn’t it be nice to know the furniture going in the room before you built your house? What if you designed a room that could not support that big screen TV and the sectional coach you already picked out?

You must ensure that the pages you are laying out will support the content with which you will fill them. Identify the items and content that will be needed, for example:

• How much content will the page need to hold?
• Are you putting in video?
• How prominent does the call to action need to be?
• Will you have social sharing icons?
• Do you want to cross relate information?
• Do you want to capture contact information?

These questions are starting us on the road to step 4 on function that we will cover next. However, these items will make it easier to see what might be missing in a wireframe and they will help denote placement for prominence.

Question 3: Will the site be Responsive?

This question is an important one in the wireframe phase because it will affect how you can layout your frames. Responsive websites need to be designed on a grid in order to stack elements properly. When you create a wireframe for your website, you will also want to create wireframes for how the content will scale on smaller devices and screens. This will help tremendously in the design phase. If you plan on creating a separate mobile website instead of responsive site, you can mock up the layout on your mobile after you have clarified the desktop version.

Just like building a house, before you pour the concrete you need a blueprint to know where you are going. Before you design a website, especially when you are starting out, laying out your framework can help you see what you have and what’s missing. Getting a visual picture before you send out an rfp or write a line of code can really help strengthen the goals you have set and will save your budget in the long run.