By
You wouldn't choose the color of your walls before knowing how many of them you'll have. This is why before we show clients a single visual design for a web project, we first put together a blueprint: the wireframe.
I sat down with four of Integrity’s user experience designers and learned that wireframes play a significant role in just about every project but that the path to a successful wireframe requires a unique approach each time.
Wireframing is the step in the web development process in which the site or application is sketched out so that the functionality and layout are clear.
Wireframes are the visual representation of a website or application’s information architecture. The content, design and functionality of a project truly meet for the first time in the wireframes.
“They’re quite literally blueprints,” says UX/Dev Lead Ben Gandhi-Shepard. Wireframes lay out the elements that go into making a functional, user-friendly web product just as blueprints lay out the elements that go into erecting a stable building.
The exact location of the wireframe in the process of creating a web product varies. But every designer at Integrity would agree that wireframing before completing a full discovery period is simply impossible.
“You have to have the features, architecture and content defined," says UX Designer and Project Lead James Milam. "If you create a wireframe without all of this information, you’re going to end up having to go back and redo it anyway.”
Wireframes are a sort of visual marriage of content, features and navigation. Where a sitemap conveys navigation and a functionality document lists specific features that will make the site user friendly, a wireframe incorporates the content so that the client can see the functionality in action and actually navigate the site.
“Having all the real content – not just placeholder – is crucial,” says Interactive Designer Aaron Skidis.
It just wouldn’t make sense to jump to wireframing without knowing how much space is needed for the content that makes a site worth visiting or an application worth using.
Nor would it make sense to jump to visual design before simple wireframes are completed. Just as an architect’s blueprint doesn’t show us the stylistic elements of a structure – the particular brick of the exterior or the color of the carpeting in the hallways – a wireframe doesn’t show us the colors or graphics that will appear in the final product.
“It’s important to remove any styling and just to look at the information architecture and functionality in their simplest forms,” says Skidis. “This is for the sake of the project team as well as the client. The fewer subjective variables, the better, so that you don’t get bogged down by conversations about colors and logos before you have to.”
After the wireframes are completed – and, of course, approved by the client – visual design can be implemented in the form of a design comp.
But there are a variety of ways to go about wireframing, and the choices a team makes in the wireframes will impact the development process – actually coding the website or application into existence.
Once upon a time, design and development were known as two very separate processes. Integrity’s movement away from functional teams and toward the “project team” structure we employ now came about in part due to the realization that the web development process requires collaboration.
During the wireframing process, we’re seeking “a balance between design and development,” Milam says.
Skidis reinforces the idea: “Wireframes should bridge gaps between design and development. They shouldn’t represent a wall between the two project phases.”
So the impact a wireframe has on a project might be different for one website than it is for another – it’s up to the team to decide exactly what the wireframes should do.
Before a designer starts wireframing, the entire team should agree on how to go about creating the right wireframes for the client and the project.
“I start by asking questions that can help define the rest of the process. What purpose do the wireframes need to serve? Should we go with low-res or high-res wireframes? Do we wireframe in code? Are we wireframing as a team or just one designer?” Interaction Designer Caleb Chesnut asks himself before beginning. “All of these questions will help us filter down to the right tools.”
And there are a lot of tools out there. These range from “low-res” to “high-res,” or from simple drawings on paper and whiteboards to coded, in-browser wireframes. Many of Integrity’s designers agree that beginning with a sketch is almost always a good idea.
“Regardless of what tool you’re going to use, everything should start with a sketch,” Skidis says.
But a pen-and-paper sketch will rarely, if ever, represent the final, client-facing version of the wireframes.
There are a number of desktop and web applications designed for wireframing, and every designer seems to prefer a different one.
Some, like Balsamiq, Mockflow and UXPin, offer libraries of components – buttons, forms, calendars, etc. – that users can literally drag and drop into their responsive wireframes. These allow for collaboration with features like sharing and comments.
But some designers prefer tools that accommodate more freedom, tools in which they can create their own components from scratch.
“Illustrator is fast and you get whatever you sketch out,” Milam says of his current favorite tool, Adobe Illustrator. He’s able to save his wireframes as PDFs or print them to share with clients.
Sketch is Chesnut’s current choice of wireframing tool: “It has the benefits of a vector-based program like Illustrator, which was what I used before Sketch. Both give you the ability to quickly create a simple layout, but with Sketch’s focus on UI design, you also have the ability to go from low-res grayscale to color and detail later on."
The list of available tools goes on and on. But what it really comes down to is a combination of the project’s requirements and the designer’s personal preference and proficiency in a given app.
Wireframing is so important in the process of creating a website or app because it marks a sort of turning point in the project. Before the wireframes are completed, the project is still largely intangible – a collection of content and ideas.
Wireframes give those ideas a place to come to life in the form of functionality. And they give the content a place to be formatted and visualized as it will be when it eventually lives on its website or application.
As with any part of the web development process, wireframing involves variables and subjectivity. But also as with any other step along the way, wireframes are necessary if your website or application is going to be as awesome as it should be.
Ready to get started architecting your big idea on the web? We're just a couple of clicks away. Contact us.
