What comes to mind when you hear the words “digital design agency”? What do you picture? Not just the building, but the team itself. Take a moment to visualize it.
Depending on its size, that design team could have five, ten, or even more members. On the other end of the spectrum, a design team might only consist of one or 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, most of them have a few things in common - especially in regards to their wireframing processes. But first, let's take a moment to define what a wireframe is.
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.
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:
While 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. ADK Group, 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.
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.
Every 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 risks.
Curious what these wireframes turned into? Check out our Sonoma Cutrer case study.
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!
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 ADK design team explains what some of the most frequently wireframed parts of our clients’ websites have been over the years (and why):
“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.”
-Maggie O’Connor, 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.”
-Lindsey Kinzer, 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 users with too much information. It’s a fine line to walk.”
“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.”
“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.”
“It’s important to work these pages out so that large amounts of content are still engaging without being overwhelming.”
“Finding a way to keep the user interested in the large content pages can be more of a 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.”
“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?”
“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.”
“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.”
“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.”
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.
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.
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.