According to the Jackson 5, ABC is as easy as 123 - but when it comes to the ABCs of wireframing, things unfortunately aren’t quite ‘as simple as do re mi’.
That’s because there’s a lot riding on getting your wireframes right. These page schematics are the very foundation of a product or service, providing a basic outline of key page structure, layout, information architecture, user flow, and functionality. As a result, wireframing is an integral part of the early discovery process, ensuring developers, designers, business analysts and stakeholders are all on the same page from the off.
These initial blueprints establish the foundations of your digital product before getting involved in the ‘fancier’ elements like visual design and content, and are essential in streamlining ideation and communication around a digital product.
Just imagine designing a new home. You wouldn’t pick out what shade of yellow to use in the living room or the granite for the kitchen worktops before having meticulously planned the layout and structure of the home first. (And in our opinion, yellow doesn’t really work in living rooms anyway). Nor would you expect the construction workers to jump right in and get to work without a comprehensive blueprint in hand. We saw how that worked out for Ned Flanders’ home.
But establishing a blueprint isn’t easy, no matter if you’re Norman Foster or Homer Simpson. And while we hope you would have consumed significantly less Duff when mapping out your digital product’s foundations, wireframing can be challenging too. Common hurdles you’ll likely face when creating your wireframes include;
- Struggling to define the purpose: a lack of clarity around the purpose, goals, and scope of a digital product can cause significant blockers to your wireframing. A deep understanding of the problem you’re solving and the users you’re serving is non-negotiable to avoid wireframes becoming too vague, inconsistent, or missing the mark - and this understanding should be established through comprehensive research, analysis, and documentation
- Making them easy to understand: one of the main aims of wireframing is to gather feedback from stakeholders and users, and it’s important to understand that these are often non-technical audiences. So, you want to avoid adding unnecessary details that run the risk of overwhelming or confusing this audience, while simultaneously recognising that wireframes aren’t inherently easy to understand. What may appear self-explanatory to you may be confusing to someone else - just think of your grandparents trying to change the TV to HDMI 2. To keep it obvious, wireframes should be clearly annotated and explained to avoid miscommunication and misinterpretation at any stage
- Streamlining feedback and amendments: whether it’s your users, your stakeholders, or other developers and designers across the team, there’s likely going to be a whole lot of feedback to consider. And this is great news - you want to encourage as much input as possible to ensure your wireframes hold the utmost value. But without the proper feedback mechanisms and processes in place to evaluate, agree upon, and implement alterations, this process can quickly become unmanageable
Of course, that’s not to say you’ll inevitably fall at these blockers. With the right approach and know-how, you can clear these hurdles better than Red Rum and create grand slam worthy wireframes that get your digital project off to the races.
Why you need a wireframe
We’ve all had great ideas that remain just that; a book you never wrote, a business you never started, a trip you never made. That’s because the first step is often the hardest - just like your New Year’s resolution on January 2nd, it’s easier to put it off and kick it down the road. How’s joining the gym going, anyway?
But when it comes to creating a digital product, wireframes provide a quick and simple solution to getting ideas to paper and getting the ball rolling. They provide a functional jumping off point to turn concepts into reality without the need for any significant investment or commitment, making them a low-risk, high-reward element integral to any digital project.
Wireframes are often an ideal springboard for a range of use cases. In fact, as a good rule of thumb, look to create a wireframe for any instance you need to communicate, trial, and develop new ideas and concepts.
For example, let’s say hello to Steve (hi Steve). Steve is a successful property portfolio owner looking to streamline his manual and outdated inspection process by developing an app. Wireframing would be the ideal starting point to map out the app's structure, ensuring everyone is on the same page.
Wireframing would help Steve visualise the app's layout, functionality, and informational architecture, from viewing properties to assigning inspections and adding repair notes. It would also help structure the database to efficiently understand and manage the inputted information.
Steve also wants to create an admin area that mimics the app's usability and cohesion for analysts to interact with the data coming from the inspection app. Wireframing would enable Steve and his team to easily conceptualise and visualise these structural and navigational differences.
As Steve integrates the app into daily operations, he identifies the need to further automate the admin process to maximise time savings. Bulk editing and upload features could be added, and wireframing would be the best way to map out how these elements would fit into existing user flows and interactions, ensuring they align with admin expectations.
Wireframing is such an effective starting point because of the wide range of benefits it brings, including:
- Kick things off quickly: wireframes are a quick and efficient solution to establish a framework without getting stuck down in the nitty gritty. They enable you to visualise concepts much easier, subsequently identifying the fundamentals and agreeing upon a direction without a significant amount of commitment, effort, or investment. In fact, for initial low-fidelity wireframes, all you really need is paper and a pen!
- Ensure clear communication throughout: when there are various voices and perspectives to consider, it can be tough to get everyone on the same page. Wireframes provide a tried and tested way of talking teams through the elements that matter at this stage of the process. Think structure and functionality over colours and fonts; how easy is the site to use; can a user complete their objective; what’s the hierarchy of pages and how are they navigated? You’d be surprised at just how much focus can be derailed by unnecessary distractions like ‘I don’t like that shade of red’ or ‘can we change that image’ - and that’s not just with clients, but internally between teams and departments too! These elements will of course matter further down the line, but wireframes ensure communication is kept clear and concise by focusing on the right things at the right time, avoiding any unnecessary spikes in your designer’s blood pressure as a result
- Collect input and feedback in the early stages: speaking of the right time, wireframes also allow you to collect feedback that can be actioned without causing great inconvenience. While it is important to try and gather all of the requirements you can, life has a habit of changing things. Wireframes are an essential tool for gathering input and feedback throughout the product development cycle. They allow you to quickly visualise and test new features and ideas, and to iterate on them based on feedback from team members and stakeholders. This iterative process helps to ensure that the final product meets the needs of all users. Overall, wireframes are a valuable tool for collecting input and feedback throughout the product development cycle. They can help to ensure that the final product meets the needs of all users and is well-designed and user-friendly. Feedback on functionality and structure often requires significant revisions to a digital product, which can contribute to scope creep and project delays. Instead, establishing this functionality with wireframes throughout the process reduces the amount of back and forth in the design and development stage by ensuring everyone is in agreement from the start.
- Test different ideas and uncover new opportunities: wireframes are a risk free way to explore the different avenues at your disposal, collecting feedback on what does and doesn’t work from both stakeholders and users without risk. By sparking these conversations early, you’re also more likely to identify new opportunities such as methods or technologies you hadn’t previously considered, and will even be more effective in your self-critique. After all, it’s much easier to self-assess an initial idea than a concept you’ve become attached to - that’s just simple human nature!
Remember: wireframes are the springboard for every element of your digital project, serving as the starting point not just for designers and developers to begin building your product, but even for marketing teams to begin planning content and marketing strategies.
Therefore it’s little wonder why wireframes are considered an essential early step of the process. They’re the whistle to kick off your project, and without them, you’ll be stuck standing in the centre circle.
How to create a wireframe
So we’ve established why you need a wireframe, but at the risk of sounding like your least favourite aunt leaving a Tripadvisor review, ‘where do we start’?
First off, let’s establish the different types of wireframes you can create:
- Low-fidelity wireframe: these are very basic visual representations of a page that serve as the simple starting point for a product’s design. They’re rough sketches usually created without a sense of scale, and use only block shapes and placeholder content
- Medium-fidelity wireframe: although mid-fidelity wireframes still avoid details like images and typography, these give greater attention to specific components by defining relative importance and clearly differentiating features from one another. They’re considered a more accurate representation of layout than low-fidelity wireframes, however will still be presented in basic black and white
- High-fidelity wireframe: these mockups are created with a sense of scale and may include images, colours and content intended for the live product. As a result, these are often saved for the late stages of the design process
So how do you create low-fidelity and medium-fidelity wireframes that launch your project and inspire high-fidelity wireframes further down the line? Like most processes, it all starts with your research…
Step 1: Research your users
Understanding who your users are and what makes them tick is the heartbeat not just of your wireframing, but your digital project as a whole.
Take a multi-pronged approach to this research in order to create well-informed user personas that will inspire the decisions you make and the direction you take (look out John Cooper Clarke, there’s a new poet in town).
Look to conduct market research into your industry and competitors, and pair this with data analysis, interviews, and brainstorming sessions.
The aim is to collect a range of qualitative and quantitative data you can use to establish accurate user personas that enable you to make strategic choices around your product’s functionality based on the wants, needs, and expectations of your core audience.
Step 2: Map out your user flows
Do you know who your users are - that’s a good start. But how will they interact with your product?
Defining the user journey and mapping out user flows is the next integral step in creating your wireframe, helping to establish elements like navigation, information architecture, and page hierarchy.
Ultimately, this is what will determine the layout and functionality of your product, and help you better understand how to guide your audience through to conversion. After all, that’s the name of the game!
Consider where your users will enter your site, how they got there, and where they want to go next. This will help you to understand how best to optimise their journey through to conversion, improving the user experience across your product and lowering drop-off rates as a result.
Step 3: Put pen to paper
When it’s finally time to put pen to paper (or smart pen to tablet, but that doesn’t sound anywhere near as good), it’s important to remember the core elements of wireframing.
A good rule to follow is: draft, don’t draw; sketch, don’t illustrate. We’re not looking for the next Da Vinci here - in fact, the aim should be more stickman than the Mona Lisa.
Look to sketch out the outline of your product’s structure, placing a far greater focus on formats than aesthetics. While drafting, keep asking yourself fundamental questions like:
- How easy is this to use?
- Is the user being guided towards the end goal?
- What does the user expect to see here?
- How will the user navigate from A to B?
- How will these pages be ordered?
- What touch points are needed?
Once you’ve established your low-fidelity wireframes and everyone’s happy with the foundation, consider upgrading your sketches to mid-fidelity. Again, this doesn’t mean it’s time to bring out your inner Picasso, so put the paintbrush down and instead focus on adding minor details to define specific components like simple, instructional wording and usability conventions. This medium-fidelity stage is a great time to begin developing prototypes too, enabling developers, marketers, and stakeholders to get a better sense of how the user journey might look and how the solution might perform.
Don’t forget to keep seeking feedback from users and stakeholders along the way - remember that not only is this input invaluable to the success of your end product, but it’s also far easier to action at this stage than later on in the cycle!
But watch out…
It’s important to know what to do when creating your wireframes, but it’s just as important to understand what not to do to avoid unnecessary scope creep, back and forth, and go-live delays.
Common pitfalls you should look to avoid include:
- Going into too much detail: whether it’s jumping into high-fidelity wireframes too quickly or simply adding more detail to initial mockups than needed, remember to keep it simple. Wireframes are meant to be rough drafts that gather feedback, meaning too much detail serves only to confuse and distract users and stakeholders from the main purpose. Don’t get bogged down in aesthetics or features like wording and images that, at this point, are menial. Instead, stick to symbols, icons, and placeholders until the project demands otherwise - there will likely be plenty more versions you can add detail to further down the line
- Becoming too attached to the first draft: we can all be guilty of becoming too attached to something we’ve put our name on, but sticking with the first draft of your wireframe contradicts the whole point of the process. Champion iteration and improvement by understanding that wireframes aren’t final products, refining and revising your mockups based on the feedback you receive. Ignoring the input of others and the results of your testing guarantees that you miss out on opportunities, so always be dynamic in your approach
- A lack of alignment and compliance: remember that, although not directly relevant to this stage of the process, your final product will have a range of standards, regulations, and best practices it will be expected to adhere to. With that in mind, it’s best to integrate these into your designs and build as early as possible to reduce the likelihood of technical issues or rule violations further down the line, so look to spruce up any relevant policies, guidelines, and frameworks that apply
TL;DR
We get it, we get it - this is a pretty long post. Could we not have just made a TikTok instead? Here’s the lowdown on all the important bits you need to takeaway:
- Wireframes are page schematics that provide a basic outline of key page structure, layout, information architecture, user flow, and functionality
- They provide a functional jumping off point to turn concepts into reality without the need for any significant investment or commitment
- A lack of clarity around the purpose, goals, and scope of a digital product can cause significant blockers to your wireframing
- Wireframes should be clearly annotated and explained to avoid miscommunication and misinterpretation
- You need proper feedback mechanisms and processes in place to evaluate, agree upon, and implement alterations
- Wireframes are a quick and efficient solution to communicate and establish a framework without getting stuck down in the nitty gritty
- They enable you to collect feedback and test different ideas at an early stage in the design and development cycle
- There are three different types of wireframes: low-fidelity, medium-fidelity, and high-fidelity
- Start by collecting a range of qualitative and quantitative data you can use to establish accurate user personas
- Defining the user journey and mapping out user flows is the next integral step in creating your wireframe, helping to establish elements like navigation, information architecture, and page hierarchy
- A good rule to follow when creating a wireframe is: draft, don’t draw; sketch, don’t illustrate
- Avoid common pitfalls like going into too much detail, becoming too attached to the first draft, and falling short of compliance
Sure, wireframing’s ABCs might not be quite as easy as the Jackson 5’s 123s, but with the right understanding of your audience and product, you can always kickstart your project the right way. But remember: if you’re still not finding it as simple as do re mi, don’t blame it on the sunshine, moonlight, or good times - just call our name and we’ll be there.