Renowned author and UX expert Steve Krug is renowned for a reason: He knows what makes a good user experience. As we’ve discussed, a central tenet of the UX is creating simple web interfaces that are compelling, easy to understand, and most of all, intuitive. These are lofty goals to reach for those unfamiliar with the web development process, but for designers, it all begins in one place: The wireframe.
Just as houses are built on foundations, and blogs are based off of outlines, your website’s wireframe provides the structure for nearly every decision your designer will make.
In the simplest terms, a wireframe is a skeletal framework of a website’s layout used to show how everything connects together, with the goal of guaranteeing that the end product will meet the company’s goals.
What Info Do Wireframes Include?
Wireframes can be as simple as pen and paper sketches or as complex as fully-realized, interactive web environments. But no matter how in-depth they are, they all provide the same information:
-
Projected number of pages
-
How each page relates to one another
-
Form functionality
-
Navigational elements
-
Where content will go
-
Any other functional considerations that a specific site needs
It’s important to note that skeletal wireframes should be pretty bare bones compared to what’s delivered at the end of the project, free of any type of visual flair such as imagery, typography, or even color.
Why? Because of the UX, of course! Stylistic design choices are crucial to the later stages of web design, but the wireframe isn’t the place for it. A key goal of your wireframe is to guarantee that the website’s basic hierarchy supports a natural and intuitive user experience in regards to how each page connects and how navigation works.
At this stage, visual considerations are just distractions. Designers shouldn’t worry about those issues until the more essential, functional elements are nailed down.
How Do They Support Web Design?
Given how important the UX is, it’s fair to say that wireframes don’t really support web design—they’re fundamental to web design. But that’s not their only benefit.
Website Element Prioritization
Wireframes help designers lay out the website from beginning to end and create structured, visual hierarchies for all website elements. This is a UX element involving how information is received by each viewer and how different page elements influence their overall perception of the brand.
For example, the written content itself won’t be included in the wireframe—but what will be included will be the location of the page headers, the size of these headers, how staggered each subheading is, and where any relevant CTAs might fit into the puzzle. Wireframes provide a roadmap for every on-page element—including the white space between elements—and how these elements work together in the visual layout.
Functional Visualization
For websites that require significant interactivity, wireframes are an important tool for visualization. Interactive wireframes are a common way to manage this, built on apps that let clients click around the website and get a feel for what viewers will experience across each page. While most clients have an idea of how they want this to work in theory, this often changes once they see things in action. Wireframing is an essential aspect of UX assembly for interactive websites.
Client/Designer Interaction
Wireframes are the first deliverable that designers send to clients, and how they handle this process establishes an important precedent for the future relationship. Quality designers will walk clients through the planning process, determine what elements they need, and how to best apply their ideas.
When it’s ready, they should show it to you and justify their decisions, giving you chances to provide feedback along the way. Web design is an iterative process, after all, and collaborative wireframes are a great way to insure that you and your designer are on the same page before the real work begins.
Cost-Effectiveness
Despite the benefits, on occasion there will be pushback from some regarding the cost of wireframing.
As with any planning process, if you don't plan, you're planning to fail. Wireframes allow designers to mock out sites and the UX without a large commitment of resources. They use them to play with features, experiment, and find the right combinations before committing to the more costly elements like graphic design.
Wireframes also provide an outline, of sorts, that allow client and designer to be on the same page regarding a future site's design. Without it, you can end up in situations where lots of time has been put into a site's design only to have to scrap it and start from scratch because it turns out the clients hates the design or it doesn't address some key market need.
Is saving a few dollars early in the project worth the cost of significant redevelopments later on? In our experience, the answer is no. Wireframes always lead to a better product.
Your Web Design Starts With a Plan
At their core, wireframes are tools that help designers understand your company and how to get you the website you want. Of course, the designers will weave their natural expertise into its creation and guarantee that it’s supportive of a quality UX—but at the end of the day, it’s a necessary tool that facilitates communication between you, your designer, and your eventual viewers.
