/

July 27, 2017

What Are Wireframes?

What comes to mind when you hear the words “digital design agency”? What does it look like? Not just the building, but the team itself. Who are the people you will be working with?

Depending on its size, that design team could have five, ten, or even more members, each owning a highly specific role. Or, on the other end of the spectrum, your design team might only consist of one to two people. In that case, there’s probably a lot more overlap in regards to responsibilities.

Regardless of how big (or small) a design team is, they’re all likely to have a few things in common—especially in regards to their design process. And with agency designers, one of the hallmark components of any digital process is the wireframe.

Website Wireframing 101

Though their exact components may vary from agency to agency, website wireframes always play a critical role in the overall production process. As a result, it’s a term that you, as a client, definitely want to be familiar with before any serious engagement. It is likely the first opportunity you will have to get a glimpse at what creative minds have concocted to represent your brand, your products and more.

However, you’ll find that wireframes come in various types, some more minimalistic in their approach and others more fully formed. Sometimes, things that aren’t even wireframes at all get referred to as wireframes! It can really get confusing if you’re not prepared. This blog will hopefully clear up some of that confusion to make your engagement as clear as possible.

So…What Are Wireframes?

Generally speaking, a website wireframe can be thought of as “a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors.” We’ll go ahead and break that down a bit…

In many ways, standard wireframes are essentially website blueprints. They’re partially realized visual representations that show clients, designers, and developers what the ideal final product (website) will not so much look like, but act like. They’re about the user experience, or how the people interacting with the website will actually process the information step-by-step.

Functionality, structure, and navigation are the central focus of most wireframes. In fact, many website wireframes don’t even include color or styling elements at all—but this isn’t necessarily universal. As you’ll soon find out, there are typically a few different levels of website wireframes.

There’s Levels to This! (Usually Three, to Be Exact)

Since every digital design agency does things differently, the definition of “wireframe” can easily change. In general, wireframes come in three different “levels”. And, just like most things in life, each has its advantages and disadvantages:

Rough Sketch Wireframes 

One of the rough sketch wireframes drawn by a Blackstone Media designer showing the potential page layout of a wine manufacturer's websiteWhile hand drawn sketches usually don’t make their way to the client, they can be super useful for illustrating a concept internally. They can also serve as a cost-efficient solution for designers in need of quick feedback. However, their bare-minimum approach prevents designers from creating any sort of solid digital framework, so clients usually don’t get to check out wireframes in this stage. Blackstone Media, for example, will start with sketches and share them internally with the project team for feedback and in-depth analysis. Occasionally, we might also share the sketches with the client to ensure they are on board with the direction the designers are taking with the project.

Digital Wireframes 

An example of a digital wireframe by one of Blackstone Media's designers
For many web design agencies, this is the “traditional” wireframe: Minimally interactive, spacious, and full of blank grey boxes. But this isn’t inherently a bad thing—in fact, this minimalist approach is the point. Digital wireframes emphasize a site’s visual hierarchy and illustrate the paths that users will take, as well as the various buttons or links they’ll click to get there and how content they land at will be structured on specific pages. It’s a high-level yet low-fidelity framework where clients can see the paths visitors will take. For many designers, this simplicity helps them focus on the big picture without getting too focused on one single iteration that might change anyway. However, the static nature of these digital wireframes still hinders true interactivity, and clients often have a hard time visualizing the final product without that true responsiveness in the design.

Functional Wireframes 

An example of a functional wireframe by one of Blackstone Media's digital designersEvery now and then, a digital design agency will want to include something a little extra into their wireframes. Enter: Functional wireframes! These seek to provide an as-close-to-reality representation of the site as possible, complete with color, real content, responsive buttons, and data-driven design choices. For an increasing number of web design agencies, the functional wireframe is becoming the go-to option since it give clients a feeling of what the final product will actually act like. That provides them with a uniquely immersive experience. Plus, having wireframes that actually respond in real time to clicks and other interactions really help designers when it comes time to present their ideas, as well.Still, even this has its risk. For example, this extremely detailed approach means more hours get spent researching and building the wireframes. If it turns out the team’s heading in the wrong direction, that could really affect the timeline. That’s why functional wireframes are so dependent on user data to to confirm that every choice made is a sound one. Guesswork has no room in functional wireframes!

How Do Designers Choose What to Wireframe?

Depending on the nature of the project, the data available for collection, the goals the client wants to achieve, the feedback provided by users, and so many other factors, the design team may or may not decide to wireframe just about anything. Those “things” can be particular pages, specific workflows, or anything else that they just want to point out to the client.

Below, the Blackstone Media design team explains what some of the most frequently wireframed parts of our clients’ websites have been over the years (and why):

The Homepage
“This is the face of the website, the page users are most likely to interact with first, and the page most clients are the most eager to see.”
-Ben Stone, Digital Designer

“Even though the homepage is the first page we’ll show during a client presentation, this is usually the very last page we wireframe. Many of the decisions we make throughout the wireframing process end up significantly influencing the homepage.”
-Maggie O’Connor, Digital Designer

“Homepage is important because it gives a first impression. If users don’t see a website’s value within a few seconds, they would leave the site. Therefore, we need to tell the company’s story loud and clear without overwhelming the users with too much information. It’s a fine line to walk.”
-Ca Nguyen, Digital Designer

Specific Workflows
“It’s important to show the client those workflows that are the most important to their clients and their bottom line, like the checkout process for an online store or the how to compare similar products.”
-Ben Stone, Digital Designer

“It’s really important to wireframe the most complicated interactions on a client’s site for several reasons:
1. We’ll be able to offer improvements to these workflows based on the research we’ve completed so far.
2. It’ll force the client to carefully consider what is MOST essential about the process we’re working on.
3. Oftentimes, we’ll come across significant programming or user experience hurdles as we grow to understand the client’s current website and business more deeply. These problems are much easier to understand and work through at the wireframing stage than they would be in the mockup or development stage.”
-Maggie O’Connor, Digital Designer

“A workflow is a series of actions taken by the user to accomplish a goal. Because it is not a single action, there are many chances for a user to be distracted, frustrated or confused midway and abandon the workflow. Therefore, workflows needs to be carefully designed to eliminate distractions and be as easy to follow possible.”
-Ca Nguyen, UX Designer

Pages with Lots of Content
“It’s important to work these pages out so that large amounts of content are still engaging without being overwhelming.”
-Ben Stone, Digital Designer

“Finding a way to keep the user interested in the large content pages can be more of challenge than you think. With different visual pieces or even small interactive sections you can really bring the content to life, while keeping the user in the right workflow.”
-Lindsey Maymon, Designer

Highly Visible Landing Pages
“These pages are most often built to achieve a singular, specific purpose, and you want to make sure they’re accomplishing that goal. Are users finding the content they need? Is it engaging? Is the call-to-action clear?”
-Ben Stone, Digital Designer

“On these pages we focus on keeping the user focused. We eliminate distractions, beef up content, and plan out visuals to highlight these goals so it’s easier for the user to get what they need from the page.”
-Lindsey Maymon, Designer

…And Anything Else That Needs to Be Pointed out!
“Any confusing functionality that’s been ironed out, complex processes that have been simplified, or complicated systems that have been reorganized usually fall in this area.”
-Ben Stone, Digital Designer

“Sometimes, through user testing and observation, surveys, and research, we might uncover a need that isn’t being met by the current site. Wireframing is the perfect time to lay out a new page or functionality because it forces the team to focus on exactly what new content we’ll need, and how long it will take to develop.”
-Maggie O’Connor, Digital Designer

Additionally, as the client, you might have some specific parts of the site that you want to focus on. If you do, good! That information will definitely come in handy.

What to Do (and Not to Do) When Providing Feedback

At this point, you’ve got a solid idea of what wireframes are, plus what types of wireframes there are. You’ve also got an idea of what pages and workflows a design team might wireframe. That’s a good start. But one of the single most important parts of the entire process is the one that you play: Giving feedback!

To make the most out of this vital step, here are some feedback-giving best practices. Following these will provide web design agencies with highly usable insight, while also ensuring that you’re addressing all the right elements you need to touch on.

  • Be clear about what pages you want wireframed (if you know). This will help the design team optimize time and focus. Of course, if you’re not sure, that’s fine, too! Designers have a knack for finding those things out themselves.
  • When you’re looking at the wireframes, focus on structural elements, spacing, site architecture, and flow of information. You want to make sure that the user journey is easy, intuitive, and in line with what you envisioned. And if it’s not, then bring it up!
  • Consider what’s missing from the wireframes. If it’s hard to think of anything, that’s a good thing. But if you feel there’s a glaring omission, mention it! Maybe there’s a good reason for its absence, or maybe your input might be what’s needed to take it to the next level.
  • Always consider what other pages might need wires. This might come to you during the actual presentation. If so, chime in!
  • Think about how the new site layout will integrate with your current data and backend systems.
  • Think about how certain page templates could apply to other parts of the site.
  • Refrain from focusing too heavily on content (at least at this point in the process).

No matter what part of the website building and/or wireframing process you’re in, always remember that your thoughts have tons of value. The smallest bit of input you have could be incredibly helpful as you work towards architecting your brand’s online future. As such, following these pointers will always help you get the most out of your engagement with the design team.