Chances are, if you’re embarking on a B2B website design project, you’ve heard of wireframing. But you may not be as familiar with the concept of a wireframe session. After all, wireframing is something designers do in isolation, right?
Wrong.
Website wireframing should never (ever - we mean it) be done alone, by one poor designer hunched over in a corner out of sight, and close to breaking point. Like all aspects of the website design process, wireframing should be a collaborative activity, where key project individuals and stakeholders come together to structure the foundation of your web pages - before moving on to a more visually pleasing UI.
However, like all collaborative sessions, there needs to be some sort of structure in place to ensure it doesn’t descend into chaos. That’s what we’re here to avoid. So, whether you’re choosing to run a website wireframing workshop in-house, or you’re preparing for one with an external website agency, here’s how to prepare for (and run!) a successful session that keeps everyone happy. And no designers harmed in the process.
Before starting out on your wireframing session, why not review our wireframe best practices & tips.
Here at Axon Garside, we strongly believe that wireframing (and in fact, pretty much all stages of a website design project) should be done collaboratively. So we choose to run wireframing sessions, where key people within a project (including the client) have their say on what a page should roughly look and function like.
It’s important to remember at this stage that the goal of a wireframing session ISN’T to get a finished product; but instead to get a solid base for the site which can then be built on in the UI design stage.
But in order for this to happen, there’s a number of things you need to have prepared in order for the session to run smoothly - whether you’re running a workshop in-house, or working with an agency.
For designers, copywriters and developers, wireframing is a key part of what we do, so it comes naturally to us. However, if you’re redesigning your website and have never done it before, it’s essential that you understand:
Most importantly, it’s key that not only you understand the concept, but everyone else who might be involved in the session does too. For example, if you have a colleague whose service insight would prove to be really valuable, ensure that you brief them on the session beforehand. If you’re working with an agency, ask them to provide context.
Don’t just send a zoom invite with an oddly vague description and hope for the best. Nothing derails a session more than someone who is clearly very knowledgeable about the subject matter, but doesn’t understand the process. Preparation is key, people!
This goes hand-in-hand with understanding the wireframing process, and it’s equally as important. Particularly where there are multiple stakeholders on a website design project, managing expectations is key throughout the entire process - and it’s no different for wireframing.
If the wireframe is the stage where senior people within your business are expected to see the work in progress for the first time, be sure that you explain what exactly they’re going to get. Telling more senior stakeholders that they’ll get a final design isn’t right - be honest and manage their expectations accordingly. Don’t put pressure on yourself, or your project team by overpromising.
By now, you should already have a good understanding of what content you need to have on the site, and which pages it should fit into as a result of condescending your wishlist (the prior phase of Growth Driven Design).
If you haven’t yet finalised the content you need, it’s time to jump back a stage in the process and figure it out through a MoSCoW analysis.
Once you know what content you need on each website page, and have documented this in what we call content maps - documents where the sections of each page are defined and laid out to create a narrative. For example, if you’re wireframing your homepage, a rough content map may look something like this:
Having this content laid out and sharing it with the individuals involved in the session beforehand will ensure that everyone is focused on a common goal, and knows exactly what each page needs to contain.
Content maps help give context to the wireframe. And for those who aren’t from a design or writer background, they ensure that no one gets lost during the session, as there’s a clear document to refer to when things may go slightly off track.
Much like the wireframes themselves, content maps aren’t set in stone. You may find that during the wireframing session, you decide that certain content isn’t needed, or identify a need for a new piece you hadn’t previously considered. That’s fine, but coming to a session without anything prepared is a recipe for disaster.
Now, we get that we sound like hypocrites here. After just claiming very confidently that “the wireframe isn’t a finished product!” it seems strange to then suggest you need to have some idea of what you want the design to look like.
But while you shouldn’t enter into a wireframing session believing that you’ll leave with a finished, fully designed product - you should still have some idea of the kind of look you’re aiming for.
Even if you’re handing full creative control to your designer, at the most basic level you must provide brand colours, guidelines and any key considerations before the session. For example, if the industry you’re in requires a risk warning or disclaimer on certain web pages, ensure that your designer is aware of this before wireframing. Not only will this help move the wireframing along, it will ensure that nothing unexpected crops up midway through the session.
This is exactly why preparation is key. Now that you’re sure you have everything you need ahead of time, we can move on to actually running the wireframing session itself.
To be a success, a website wireframing session needs to be a collaborative, creative discussion where all individuals are focused on a common goal. Whether everyone is sitting together in one room, or joining the session remotely from halfway across the country - the overall premise remains the same.
We like to begin website wireframing sessions by ensuring that everyone has access to the resources they may need to refer to throughout the session, such as content maps and user intent documents. This way, everyone has visibility over what we’re trying to accomplish, and changes can be easily made in real time.
Then, we can get started. Here’s some best practices to follow in order to run a successful wireframing session.
Whether you’re wireframing one page or multiple in a session, it’s important to begin each individual wireframe by reviewing the following:
Ideally, you’d set a timer for each page and get to work, to keep focus. However, if it’s your first time wireframing (which is common for a lot of our clients) this isn’t necessary while you get a feel for the process. However, without some sort of structure (by this we mean more than just someone yelling “let’s move on”) wireframing does risk becoming a very long, laborious process where keeping focus is impossible. When it comes to wireframing, the shorter and more specific the session, the better.
Your wireframes should give you a solid base to build on; so while having actual specifics at this point is a “nice to have”, sometimes it can over complicate the process. For example, if you’ve already written web copy - great! But it shouldn’t be too nailed down at this stage. Design should inform copy and vice versa. Use simple titles and subtitles to give context to individual sections on the page, but don’t worry if you don’t have actual copy written just yet.
Top tip: If you’re designing the wireframes, keep this simple too. Create wireframes in low fidelity and a grayscale colour palette, to keep focus on high level concepts and allow for quick and easy changes.
Too often, individuals in a wireframing session get so caught up in the details that they lose sight of what they’re trying to achieve. Keeping it simple is a hard skill if you’re a perfectionist, but it’s a vital one to have when it comes to website wireframing.
Remember, no matter what your role in the project is, your opinion (in most cases) isn’t more important than someone else’s - so listen to each other. Don’t dominate the conversation, allow for constructive feedback - NOT criticism - and utilise the different skills of the team.
Side note: there does come a point where you have to trust the experts, however. If someone with a specific skill set is explaining that an action can’t be achieved due to limitations (be it budget or functionality), listen to them.
Whether you’re watching a designer work away in Sketch via a screenshare, or using a collaborative tool such as Figma, everyone should be contributing to the discussion. Designers should be listening to what people are saying, and then going back to the wireframe to make tweaks.
Take advantage of the wireframe being the skeleton of your website, and use the session to explore your creative ideas in terms of layout and functionality.
"Sorry, it's not you, it's me..."
This one’s important - don’t get too attached to your wireframes! The whole purpose of wireframing is to build on the design, copy and functionality as the project progresses - not to fixate on how close to the wireframe the actual UI design is.
Once revisions have been made and you’ve gathered feedback after the session, you can gradually elevate the designs from low fidelity, to medium and so on. A wireframe is meant to change, so don’t try too hard to keep it static.
Often, when website wireframing sessions are unstructured and drag on for a while, people tend to shoot off at the quickest opportunity, meaning that actions aren’t taken down, and next steps are unclear.
If you’re hoping to present the wireframes to higher stakeholders, then there should be a clear plan of action of what needs to be done to get to that point, such as:
Wireframes are an excellent way to show tangible evidence to a senior stakeholder, but if you aren’t familiar with them, they can become very confusing, fast. Avoid this by ensuring that everyone in the session knows exactly what they need to do next to move the session along.
While there are things you can do to ensure it goes smoothly, overall, a wireframing session can be a really fun activity in your website design project. They allow key members of your team to collaborate with each other in ways they most likely haven’t in the past, and many people find them to be an enjoyable experience - that is, if they don’t go on for too long!
Hopefully, you have some idea on how to run a successful wireframing session, and you’re on your way to being prepped for your first one.