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.
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
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
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
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.