What is Wireframing? (+How to Create a Wireframe in 2022)
If you’ve ever been involved in application design or web design in any capacity, then you’re likely familiar with the process of wireframing.
Web pages or applications can contain numerous elements: headers, footers, menus, search bars, headers, text, calls-to-action, etc. The way they’re arranged on your screen often took many people hours and hours of work to arrange all those elements, and many iterations to get those elements in the right arrangement to make the page work optimally.
Wireframing is a key step in bringing a web page or app from a thought in someone’s mind to a live product.
Jump to a section:
- What is wireframing?
- What is the purpose of wireframes?
- Where do wireframes come into the design process?
- Who uses wireframes?
- How do you create a wireframe?
What Is Wireframing?
Essentially, a wireframe is an early skeleton of a website or an app, or of adding new functionality to an existing page. A wireframe is a visual representation of what will be on a given page: what content and functionality it will contain.
The elements that are included in the wireframing of a page will wholly depend on the purpose of the given page. A blog homepage and a webinar landing page, for instance, will contain different elements and functionality.
Since “wireframing” is a term that’s directly associated with computers and surrounding technology, the term has basically only been in use since the 1980s.
At the highest level, wireframing is an early design of an app or web page. But there’s much more to understanding what wireframes truly do, why they’re used, who uses them, and then how they are built.
What Is the Purpose of Wireframes?
Wireframes are used in the early stages of the application and web page development processes, but apps and websites can be built without wireframes. It’s just not recommended.
Think of a wireframe and how it relates to a website like you would a blueprint and how it is used in the home-building process. A blueprint is the plan contractors use to turn an architect’s vision into a home. A wireframe facilitates web design in the same way.
Web design projects can involve many stakeholders and moving parts. Bad communication or process can derail a project or cause it to miss its intended goals. Wireframing helps to avoid both.
Projects often go through many wireframes as the project moves along and changes are made. A wireframes acts as a system of record for a project, so stakeholders can look back at the changes that were made or at prior decisions.
Wireframing software also often allows for collaboration in various forms across teams. All team members involved technically in the creation of the website or application can remain in communication and can see the same information about what needs to be included. So as the development process moves along, wireframes keep everyone on the same page and moving toward the same goal.
Where Do Wireframes Come Into the Web Design Process?
According to Dave Holston’s course “Managing a Web Design Project From Start to Finish,” there are eight steps in the creation of a website:
- Project definition
- Project scope
- Wireframes and site architecture
- Visual design
- Site development
- Site testing
- Launch
- Site maintenance
Wireframing takes place early in the process and at the same time as site architecture, which takes into consideration things such as user experience, content strategy, and business goals.
Essentially, a website or application that is built professionally and intentionally cannot be built without a wireframe. It is one of the earliest visualizations of a web page or app, and it helps to guide the work of many individuals or teams involved further downstream in the development process.
What Is the Difference Between a Wireframe and a Mockup
Wireframe is a term that is closely related to others in the development process. For example, a mockup is somewhat similar, and as a result is often confused with a wireframe.
While a wireframe contains the basic layout of the web page or application, a mockup is a more advanced version of the product’s design elements.
Think of it this way: A wireframe is used mostly to design the functionality of a product. A mockup is used to test different cosmetic elements of a product, but it is constrained to the functionality designed with a wireframe. To go back to the house-blueprint metaphor, a mockup would be a computer program that allows you to see what different wallpaper would look like in the bedroom, or which backsplash matches the kitchen countertops.
For info on the key differences, checkout this guide to wireframes vs mockups.
What is the Difference Between a Wireframe and a Prototype
A prototype is more advanced than either a wireframe or a mockup. The best way to think of a prototype is to envision it as the “rough draft” of a product. Prototypes are the only one of the three that is interactive and allows a user to click it.
Overall, prototypes are not-yet-live simulations of the web page or application that allows a team to try out how it functions. It doesn’t function like the final product because it doesn’t incorporate elements of the back end, but a prototype is meant to be as close to the real thing as possible.
A prototype of a home would be a virtual reality application that lets you walk through your house and make sure that the rooms flow naturally one to the next.
Who Uses Wireframes?
Wireframes are used by people in various roles throughout the website and app development processes, and each role uses them in different ways. Aha!, a product management software tool, breaks this into two segments: technical and non-technical roles.
How Technical Roles Use Wireframes
UX designers
UX designers are the team members who actually create the wireframe based on the project scope and definition they’ve received. They take many factors into consideration while attempting to create a layout that will meet the project goals: usability best practices, visual hierarchy, brand guidelines, and much more. UX designers also take part in user research and usability testing to better understand how a user will navigate a page. Drafting a wireframe with UX at the forefront is crucial to a positive customer experience.
Graphic designers
Graphic designers take the iterations of wireframes for a project and turn them into a finished design.
Developers and engineers
The developers and engineers take a wireframe and bring it to life technically. They take a wireframe and create the code and back end necessary to make it function as it is supposed to. There are times where the design of a wireframe isn’t feasible in practice, or the solution to make functionality work will cause unexpected issues (decreasing site load speed, for instance). This can create the need for further iterations and the creation of new wireframes.
SEO teams
If a web page is designed to bring organic traffic to a website, SEO team members need to ensure it is set up technically to be optimally crawled by search engines. They will have considerations such as page click depth (how far a page is from a home page), web page load speed, headers, image alt text, page content, links to other pages on your website, and more.
Product managers
Product managers are tasked with wrangling all the other team members and their considerations, managing stakeholders, communicating across the team, and carrying out a product from concept to finished project. Project managers interact with wireframes just as one step in this process, ensuring that the wireframe meets the goals of the project and fits the needs of each stakeholder. Often, they will need new wireframes to be drawn up as new iterations are necessitated.
How Non-Technical Roles Use Wireframes
Non-technical roles are the project members who aren’t directly involved in the creation of the wireframe or app/web page, but they still are stakeholders in the end product.
Customer success
Customer service or customer success representatives can learn about what new features or pages you’re adding to your site or app. If they have customers or prospects that have related concerns, the reps can assure them that the solution is coming in the near future.
Sales team
Similar to the customer success team, looping in a sales team allows them to share with customers or prospects the upcoming features or products for a company. This can be dangerous if your sales team overpromises, however. Also, allowing sales team members the ability to comment on a wireframe can help them share feedback they’ve received from customers or prospects in the past, potentially saving a company from negative feedback.
Marketing team
Marketing team members can ensure that the design meets the branding and messaging of a page, or that the intended CTA is on the page.
How to Create Wireframes
Wireframes can be created by hand with paper and pencil, and UX designers often do so in their note-taking stages. But almost always further iterations are done with software. This allows for more exact designs, easier revisions, better collaboration, and much more.
The list of tools available for creating wireframes is long, and there is no shortage of considerations.
Software for Creating Wireframes
Wireframing grew in popularity with the rise of UX, UI, usability, and the general growth in the number of websites and applications in existence.
With this has come growth in the number and quality of wireframing software tools. The adoption of cloud software and the ease in building apps and websites has also factored in.
Essentially, wireframing can be done digitally with most tools in which you can create visuals. General-purpose design tools, such as Adobe Illustrator, can be used to create wireframes.
However, experienced designers and design teams often use wireframing tools created specifically for the design of wireframes. These software products often have functionality that makes working on wireframes faster and more collaborative than other tools.
When selecting the best wireframing tool for you or your team, there are many things to consider:
- Cost of the product: Wireframing products are often available at different tiers, with more expensive options offering more users and increased functionality. There are even free wireframing tools if you’re trying out a product for the first time, or if you have limited budget.
- Size of your team: Some products have expansive features for collaborating across multiple team members, with settings for different roles. Other products are aimed at individuals or lack these collaboration functions.
- Cloud or on-premise: There are wireframing programs for the cloud, so you can access files from anywhere with multiple team members. There are other products that must be downloaded to a computer’s hard drive.
- Integrations: Wireframing products can integrate with many other software tools, including other design tools, collaboration platforms, and project manage products. The rest of your software stack may play a heavy role in your wireframing tool of choice.
- UI kits and design libraries: Many wireframing tools offer libraries with ready-to-use components, and/or allow you to add your own components or branding. This can make your wireframing process easier and more productive.
Conclusion
Wireframing is an essential element of the web design process. Still, they are just one stage in what can be a long, collaborative process. Skilled UX designers can wireframe a page in ways that help predict usability issues and funnel users to the action a company desires while meeting a user’s desires. Learning to be skilled at creating wireframes doesn’t happen overnight, but it’s an essential skill for any web development team.
