What is wireframing? Simply stated, it’s one of the most essential aspects of the UX (user experience) design process. If you’ve dabbled in the complex world of user experience design, chances are that you’ve at least heard the term “wireframes” floating around.
But what exactly are wireframes, and why are they such an important part of the UX design process?
In this guide, you’ll learn exactly what a wireframe is. We’ll begin by showing you the makeup of a wireframe and explain how wireframes fit into the overall design process. You’ll also learn what features wireframes should include.
After that, we’ll show you the different wireframe types and the tools you’ll need to build your own.
At the conclusion, you’ll have gone from wondering, “What is wireframing?” to be able to create and employ your own wireframes with ease.
Now, let’s take a look.
What Is a Wireframe?
Let’s start at square one with the simple question of, “What is a wireframe?”
In reality, it’s not all that different from a blueprint that architects use. It’s a two-dimensional outline of an app or webpage that a designer will use to build the final product around. The intent of a wireframe is to give the designer an obvious overview of a page:
- Layout
- Structure
- User flow
- Intended behaviors
- Information architecture
- Functionality
A wireframe will almost always represent the initial concept of the design project. As such, things like graphics, color, and styling are kept to a bare bones minimum.
In some cases, a wireframe may be sketched out by hand on a piece of paper. Other wireframes are created in the digital realm. It really depends on the detail that’s needed in the specific wireframe. It also depends on how much detail will go into the final design of the webpage or app.
In other words, the more detailed the webpage, the more detailed the wireframe will need to be.
The practice of wireframing is most often used by UX design teams. Going through the process will allow all of the parties involved (stakeholders) to come to an agreement on where information will be located on a page before the project is handed over to developers to build out.
Wireframing a project before it’s handed over to developers often saves a lot of headaches down the road. This is because the initial blueprint of the project (the wireframe) can (and should) always be the first reference point of what the end result should look like.
When Is the Best Time To Wireframe?
In most cases, the process of wireframing will happen during the phase of the product life cycle called the exploratory phase.
The exploratory phase is the time when designers are:
- Collaborating on ideas
- Identifying business-related requirements
- Testing the overall scope of the project
In other words, wireframing a webpage gives it its first iteration, which is used as the starting point for the overall design of a project.
Wireframes are also valuable because they can be presented to future site users in order to get feedback on the effectiveness of the design. Based upon user feedback, the designers of the project will then build a much more detailed design iteration, like a mockup or prototype.
From there, the overall project will begin to unfold.
Why are Wireframes Useful?
There are three important purposes and benefits that wireframes bring to the design process:
- They’re inexpensive and easy to create.
- They define, and help further clarify, specific features of a website or webpage.
- They keep the design process focused on the end user.
To break things down further, let’s look in detail at each one of these important points.
1. They’re Inexpensive and Easy To Create
Why do design teams do so much wireframing when beginning their projects? The answer is simple: They’re incredibly easy to create and cost almost nothing. In reality, if you have access to a pen and a pad of paper, you’ll be able to sketch out the details of a new wireframe without spending anything at all.
When it comes to digital wireframes, the wide range of tools available at your fingertips means that you’ll be able to build your own digital wireframe in only a few minutes.
More on those tools later on in this guide.
One of the benefits of a wireframe is their bare bones look and feel. You see, the problem with presenting a polished product to users for feedback is that people are less likely to be honest about their true opinions when a project already looks completed.
But when you use a wireframe to expose the absolute core of page layouts, obvious pain points and flaws are more easily identified and called out. Those issues can then be rectified by the design team without spending a lot of money or time in redevelopment.
After all, the later in the product design process you get, the more expensive and difficult it is to make changes that could have easily been done in the wireframing stage.
2. They Define, and Help Further Clarify, Specific Features of a Website or Webpage
When a web designer is communicating ideas to their client, the client may not always have much of a technical understanding. Designers often use words like “call to action” or “hero image,” and many clients aren’t following along with the language.
By wireframing specific page features, a designer can more clearly communicate to clients how those features will work and the exact purpose they will serve.
Wireframes also allow stakeholders to understand the amount of space that’ll need to be allocated for each one of the page features. The process helps connect visual design to a site’s information architecture, and clarifies the overall functionality of the page.
When you see all the page features on the wireframe, you’ll also get a much better understanding of how all of those features will work in unison. The process of wireframing could even trigger you to remove a few features if you see that they’re not working well with the rest of the elements on the page.
This can cause some major disagreements between project stakeholders as the wireframing process plays out. But it’s much better that those disagreements happen (and get resolved) now, rather than later on in the design process when code will need to be re-written.
3. Wireframes Keep the Design Process Focused on the End User
Wireframes are great devices for communication. This is because they facilitate valuable feedback from users, driven idea-sharing among designers, and launch important conversations between stakeholders.
By engaging in user testing during early stages of the design process, wireframing promotes more honest user feedback. It better identifies the key pain points that will assist in developing a successful concept and end product.
Wireframing is an invaluable way for web designers to see exactly how users would interact with the proposed interface. The insights gathered show the designer what seems intuitive to a user. Designers can then create final results that are easy to use and comfortable, based upon user feedback.
What Different Types of Wireframes Can You Use?
There are three different types of wireframes. The type of wireframe is determined by how much detail the wireframe contains.
1. Lo-Fi Wireframes
This is a bare bones, very basic representation of a webpage. It will almost always serve as the starting point of a design.
Because of this, lo-fi wireframes are usually quite rough. They’re created without sense of pixel accuracy, grid, or scale.
The purpose of a lo-fi wireframe is to omit details that may otherwise distract from the overall layout. It’ll include:
- Block shapes
- Mock content (filler text for headings and labels)
- Simple images
Lo-fi wireframes are used to get conversations going, map user flow, and decide on the navigation layout. Simply stated, a lo-fi wireframe is the perfect solution for when you’ve got clients or stakeholders sitting in a room with you and you want to quickly draw something up while sitting in a meeting.
They also work great for designers that are considering several different concepts and want to decide what direction they should go with a project.
2. Mid-Fi Wireframes
This is the wireframe that’s most commonly used in the design process.
A mid-fi wireframe will display a more thorough representation of the page layout. While it won’t contain things such as typography or images, a lot more detail is given to the specific components. And the page features are more clearly defined and separated out.
In most cases, a mid-fi wireframe will have varying text weights that separate body content from headings. Though mid-fi wireframes are still black and white, a designer will often use different grey shades to showcase the different elements of the design.
A mid-fi wireframe is created with a digital wireframing tool, such as Balsamiq or Sketch.
For WordPress site owners, the Wireframe Blocks feature in the Kadence Blocks plugin gives you the easiest way to wireframe. A bit more on that later.
3. Hi-Fi Wireframes
Last, but not least, are hi-fi wireframes. These have layouts that are pixel-specific. A lo-fi wireframe, for example, will probably have “lorem ipsum” text fillers and grey boxes filled with X’s that indicate image placement. A hi-fi wireframe, however, will include fully written content and the actual images that will be featured on the page.
The detail contained in a hi-fi wireframe makes it ideal for documenting and exploring complicated design concepts, like interactive maps or menu systems. Because of the time it takes to put together a hi-fi wireframe, they should be reserved for the latter stages of your design cycle.
What’s Included In a Wireframe?
The number of features a wireframe includes will largely depend on whether it’s lo, mid, or hi fidelity. However, generally speaking, the main elements that every wireframe will include are:
- Search fields
- Share buttons
- Logos
- Headers
- Lorem ipsum placeholder text
A hi-fi wireframe will also include contact information, navigation systems, and footers.
Remember that imagery and typography don’t ever need to be included in a lo or mid-fi wireframe. However, many designers will experiment with text sizing to help represent the hierarchy of information or to indicate where a header is placed.
Traditionally, wireframes are always created in greyscale. Because of this, a designer will also experiment with greyscale shading by using light shades of grey to indicate light colors. Dark shades of grey will indicate bold colors.
In a hi-fi wireframe, some designers may add in some occasional color. Most often, it will be limited to red and dark blue.
The use of red coloring will indicate an error message or warning, whereas the dark blue will represent what will later be an active link.
Wireframes are always two-dimensional. Because of this, it’s important to remember that they don’t do much for showcasing interactive features of the proposed design, such as hover states, drop-downs, or accordions that use show-hide functionality.
Mobile Wireframes vs Website Wireframes
If you’re like most people reading this guide, you’re probably thinking mostly about desktop wireframes and not a lot about mobile wireframes. But in truth, mobile wireframes will require their own special considerations.
Knowing that, what exactly is the difference between mobile wireframes vs website wireframes?
1. Wireframe Size
Because there’s an obvious size difference between desktop websites and mobile sites/apps, the layouts of each have to be taken into consideration.
For example, a desktop website has a wide screen. Because of this, the wireframe for a desktop site would likely feature a layout that spreads out across several different columns.
On mobile, however, a wireframe will typically be restricted to only one or two columns. This means that you’ll have to decide whether a user sees an infinite scroll, or if you’d rather decrease how many items are displayed per page with the purpose of displaying additional content beneath.
2. Behavior
Another core difference is the overall behavior of a desktop site or mobile app/site. On a desktop site, a site user uses a trackpad or mouse to navigate the web page. In addition, a user can click on the features that interest them in order to reveal more information.
On desktop, users can even hover over certain elements to reveal site menus.
When a user is on mobile, however, users have to tap their screens in order to open up features.
This means that when you’re wireframing for mobile, you’ll have to think more critically about how you want to encourage users to tap on specific buttons to reach certain goals.
3. Interaction
Users will interact very differently on your mobile site or app than they do on your desktop site.
While the mobile version of your site is pulling data and content in the same fashion as a desktop site, mobile apps and sites often have the option for users to download content for use offline, for example.
When wireframing for mobile, make sure to take into account how interaction varies between mobile and desktop.
Wireframing in WordPress
In today’s landscape of abundant technology for seemingly everything imaginable, web designers have a lot of advanced wireframing programs and tools available for use.
Overall, Sketch is probably the best-known tool for wireframing. It uses a combination of vector design shapes and artboards that enable web designers to create their own wireframes on a canvas that’s pixel-based.
For WordPress users, however, the best tool for wireframing is the brand new Wireframe Blocks feature in the Kadence Blocks plugin.
Wireframing Blocks from Kadence Blocks are a new set of WordPress blocks that’ll give you clean, pre-built sections that will help guide the build of your site. Best of all, it’s all done from right inside the natvie WordPress block editor.
Wireframe Blocks gives users over 30 different wireframe blocks to use, including:
- Content
- Pricing tables
- Footers
- Testimonials
- Cards
- Countdowns
- Portfolios
- Forms
- A lot more
As a WordPress site owner, there’s no need to do your wireforming outside of the native WordPress block editor. Wireframe Blocks by Kadence Blocks gives you the only tool you need to wireframe in WordPress.
And it could not be easier to use.
The new Wireframe blocks are available in the free Kadence Blocks plugin. Take a look and see what it can do for your wireframing process.
What Is Wireframing? Now You Know!
There you have it: “What is wireframing?” explained in 10 minutes or less.
Wireframes may seem like something that could be easily overlooked. But they will enable designers to get clear client, stakeholder, and user feedback related to the navigation and layout of a site’s important pages.
And when you’re armed with the approval of clients, stakeholders and users at the wireframing stage, you’ll be able to move your project forward with confidence, knowing that you’re creating something that users and clients will approve of… and hopefully love.
Kristen has been writing tutorials to help WordPress users since 2011. As marketing director here at iThemes, she’s dedicated to helping you find the best ways to build, manage, and maintain effective WordPress websites. Kristen also enjoys journaling (check out her side project, The Transformation Year!), hiking and camping, step aerobics, cooking, and daily adventures with her family, hoping to live a more present life.
Keep reading the article at WordPress News | iThemes Blog. The article was originally written by Kristen Wright on 2022-08-01 13:19:09.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.