Wireframing

Cre­at­ing a wire­frame or sketch before build­ing a web site is like cre­at­ing a blue­print before build­ing a house. Wire­frames are sim­ple, black and white mod­els that help to define the hier­ar­chy of the infor­ma­tion in a site and how the user will inter­act with the site inter­face. Wire­fram­ing allows a designer to plan the lay­out accord­ing to the hier­ar­chy of infor­ma­tion and the desired user experience before writ­ing code or cre­at­ing design ele­ments. It’s the “exper­i­men­tal” stage where you can try out var­i­ous iter­a­tions of a site design before you really start build­ing it.

As a designer, wire­fram­ing allows you to cre­ate a strong foun­da­tion for your design with­out being dis­tracted by details like color, typog­ra­phy, or even the actual con­tent. Wire­fram­ing also gives you the oppor­tu­nity to eas­ily exper­i­ment with dif­fer­ent lay­outs to find one that best fits how you want to com­mu­ni­cate infor­ma­tion to the user. Even though a wire­frame is black and white, you can use the grayscale spec­trum and typog­ra­phy to show the rel­a­tive visual strength of ele­ments. If you are creat­ing a site with a high degree of inter­ac­tiv­ity, you may even­tu­ally need to do more inter­ac­tive proto­typ­ing and wire­frames would then be only a quick, ini­tial part of your devel­op­ment process.

Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information.

It's like an architectural blueprint; you need to see it in two-dimensional black and white diagrams before you understand how to build the actual house. Similarly for a screen design, you can't start building pixel layers in photoshop, or writing blocks of code, without knowing where the information is going to go.

At a deeper level, a wireframe is also very useful in determining how the user interacts with the interface. For example, wireframes can contain various states of button or menu behaviours.

Wireframing is important because it allows the designer to plan the layout and interaction of an interface without being distracted by colors, typeface choices or even copy. I like to explain to my clients that if a user cannot figure out where to go on a black and white wireframe, it doesn't matter what colors you eventually use. A button has to be obvious even if it's not shiny or brightly colored.

Like the foundation of a building, it has to be fundamentally strong before you decide whether to give it an expensive coat of paint.

Choose your Wireframe Tools:

Framebox (web based) Pencil (download) Mockflow (web - account needed)

Wireframe.cc (web based) More options here...

Let's Get Started

Determine Layout With Boxes

Start by drawing boxes on the grid. Think about the order of information you would like to present to your visitors, top to bottom is the easiest, followed by left to right. Below is an example of a wireframe which has a layout commonly used by software companies these days:

Sometimes, depending on your objective and the entity you are designing for, you can be creative with the layout, though still keeping the hierarchy of the information in mind.

Here's a layout for a blog, with carefully positioned advertising containers and specific instructions for the client:

Define Information Hierarchy With Typography

After you are satisfied with how the boxes are laid out, start dropping in bits and pieces of your content to get a feel of whether the information is being well-structured. The rule of thumb is the same: the information you want to deliver to your audience has to be clear, even in a black and white wireframe.

Simply using different font sizes as a start is a great way to differentiate between the different levels of information.

Don't be afraid to experiment at this stage. Sometimes, as you fill in more detail, you may realize the original layout is not working well. That's the whole point of the wireframing process; to make as many iterations as possible in order to narrow down the best way of representing the information you are trying to communicate.

In the example below, I have decided I wanted the screenshots to have more impact and I have also started to use black boxes to define which are the areas that would take visual importance for this website:

Fine-tuning With Grayscale

Using the full spectrum of grayscale can help you determine the visual strength of your elements without having to pick a color palette. In fact, it may help you during the visual design process later on.

Assignment 1

Create two wireframes based on the content of this page.

Create one wireframe that is an exact replication of the page as it exists.

Then, create a second wireframe with a completely new and hopefully improved layout (but the same content!)

Web page: http://www.accuweather.com/en/ca/coquitlam/v3j/weather-forecast/53187

*You will then be printing your wireframe projects out when complete. Please see Mr. Hamlin before printing*

Learning Objectives

At the end of this assignment, you will be able to:

  • Reverse engineer a webpage into a wireframe.

  • Construct a wireframe with a defined set of content.