A Look Inside: The Importance of Wireframing

Whether you’re working on a paper or building out a presentation for a client, I’ve found that starting with a project outline is a really valuable exercise.

As a web designer I create outlines all the time for both new and existing projects; these outlines are known in the industry as wireframes. Like an outline, the wireframe is the skeleton or backbone that everything else like imagery and text is built upon. Without a skeleton we as humans would be useless, just like websites without wireframe. 

In this post, I’ll breakdown wireframing into three key elements I’ve used for kicking off projects and aligning site elements and goals.

What is a Wireframe?

Wireframing, in the simplest definition,  is the creation of a website’s “blueprint”. Housing contractors begin with building blueprints and I begin designing websites the same way. Creating wireframes allows me to visually map out the big concepts and work through the user flow.

Where do I begin?

When I sit down to develop a wireframe I start with a pencil and some paper (or a pen if I’m feeling adventurous). At this stage in a project I’m not worried about perfection, my sole focus is to communicate my ideas. I want to rapidly map out the goals of the website and get a rough idea of how a user will move through the website. 

There are many types of wireframing techniques that other designers use ranging from pencil and paper sketches to high-fidelity interactive mockups, but that is for another blog post. Below is a quick overview of three concepts I try to keep in mind when wireframing a project.

The Structure of a Wireframe

A typical wireframe generally focuses three things: structure, behavior and content. 

Structure

When I begin planning a layout, I try to only use boxes and shapes. At this stage I am planning where everything will go, not exactly how it will look. Using boxes and shapes to define the structure is helpful in keeping me focused on the website’s purpose, and not on fonts, copy, colors and themes.

Image Source: Allison House, Dribbble

Behavior

Once the basic structure and elements are mapped out, I want to think about how users will use and interact with the website. I need to figure out where to position important elements such as navigation, forms, photographs, and copy blocks. The way all of these elements are structured and interact will affect the quality of the website, and how effective it is at communicating its purpose.

Image Source: Drafting Tips for Creative Wireframe Sketches

Content

After working through the wireframe structure, I can then focus on content. I’m not interested in the actual copy that will appear on the finished website, I am focusing on the placement of content and its hierarchy. I want to make a plan how a user will digest the information on a web page. Some websites are hard to read because there is no visual difference between the size of the headline and the body copy. During the wireframes I want to make sure my content blocks focus on hierarchy and defining visual cues for the user.

Image Source: Nicholas Swanson, Dribbble

Conclusion

Wireframes are never finished and my wireframes are constantly evolving throughout the initial stages of a project. My goal is to continually improve my wireframes and find new ways to solve a design problems.

I want my wireframes to create a strong foundation for the website on which the design and content can stand. Visually mapping out elements and thinking through the user interactions helps team members keep the overarching site goals at the forefront and thus deliver a more unified user experience.

I enjoy collaborating on wireframes, but I encourage anyone, especially people thinking about developing a website, to begin thinking about the items outlined above. A sturdy foundation is the first block to an everlasting structure.