Wireframing
Darshika Srivastava
Associate Project Manager @ HuQuo | MBA,Amity Business School
What is Wireframing?
Wireframing is a process where designers draw overviews of interactive products to establish the structure and flow of possible design solutions. These outlines reflect user and business needs. Paper or software-rendered wireframes help teams and stakeholders ideate toward optimal, user-focused prototypes and products.
Play
Showvideo transcript
“Here is one of the few effective keys to the design problem — the ability of the designer to recognize as many of the constraints as possible — his willingness and enthusiasm for working within these constraints. Constraints of price, of size, of strength, of balance, of surface, of time and so forth.” — Charles Eames, Pioneering designer, architect and filmmaker
Learn how to use wireframing to spot constraints and opportunities – and bridge the gap between abstract requirements and likely solutions.
Table of contents
Good Wireframes are Skeletons for Powerful Prototypes & Delightful Designs
Wireframes are basic visual guides in which designers propose elements for screens and webpages and show how experimental solutions would flow for target users. Wireframing is invaluable early in the interaction design process for design teams to explore how concepts accommodate user and business needs. You mark out a solution’s bare bones and include navigation features and more detail than in sketches. Good wireframing is the skill of creating realistic-looking, lean layouts so your team and stakeholders can quickly determine if concepts are worth developing. Wireframing is distinct from prototyping in the sense that prototyping deals more with testing interactivity and—when done at the highest level of fidelity—sophisticated versions that might closely resemble the released products. However, it’s similar in that you can also do wireframing by hand (e.g., using boxes and lines to represent pictures, text, etc.) or with software and make low- to high-fidelity versions. In low-fidelity wireframing, you use placeholders to mark content and pictures in grayscale. In high-fidelity wireframing, you introduce more realism, including pictures and perhaps even some interactivity. You can adapt well-crafted wireframes far more easily into prototypes for usability testing.
? Interaction Design Foundation, CC BY-SA 4.0
Software choices vary in price (some are free), options (e.g., click-through interactivity) and suitability (e.g., for mobile). When you do wireframing well, you can help safeguard yourself, your team and your brand against pursuing flawed solutions. Good wireframing can also support agile development as team members needn’t wait for sophisticated deliverables.
Desk with Sketchbook, Pens, and Keyboard. Font: FOCA Stock
Wireframing is the Art of Efficiency
The aim is to communicate the structure of a possible solution so your team can identify solid user experience (UX) design foundations to build on and stakeholders can offer feedback on a visual item.
So, you should show what elements your users would expect to find and how these work in flow. To begin, you should:
Remember, wireframes are primarily tools for collaboration toward making better prototypes and products faster. As such, they’re deliverables you shouldn’t overinvest in. Your best wireframes will prove your ability to strip back to basics and recognize constraints in user-centered design. They’ll therefore confirm your expertise as you and your design team iterate toward the most effective solution in a project.
Learn More about Wireframing
Take our UX Portfolio course to see how to use wireframing best.
Play
Showvideo transcript
Here’s a list of helpful, free wireframing tools.
Read one designer’s inspiring approach to wireframing.
This is a varied collection of wireframing examples.
How to Create a UX Portfolio
How to Create a UX Portfolio
Course closed
booked
View Course
Get Weekly Design Insights
Join 310,401 designers who get useful UI / UX Design tips from our newsletter.
Go
Literature on Wireframing
Here’s the entire UX literature on Wireframing by the Interaction Design Foundation, collated in one place:
Featured article
How to Create Wireframes: An Expert’s Guide
Wireframing is a fundamental step in UX design. Imagine building a house without a blueprint. Tough, right? Wireframes are similar. They're the blueprint for digital projects. These sketches provide a visual guide to the layout of a website or app. It shows where elements will go before detailed design work starts.
Following user research, wireframing is one of the earliest stages in UX design. They save time, reduce errors, and ensure a clear vision. When designers, developers, and stakeholders see a wireframe, they get a clear project view. It helps in syncing everyone's expectations.
Showvideo transcript
If you’re curious about creating efficient digital solutions, then this content is for you. We’ll talk about the nuances behind creating wireframes and how they serve as the roadmap to a user-friendly digital experience.
The Basics of Wireframing
Wireframing is a visual representation of the workflow of a website or mobile application. This preliminary design step illustrates the page's structure, layout, and functionality. It helps in planning the user experience without distractions from color, graphics, or content.
The Elements of a Wireframe
Showvideo transcript
Different Types of Wireframes
1. Low-fidelity Wireframes
Low-fidelity wireframes are the first you create. They provide the basic visuals of the design, but lack scale, grid, or pixel accuracy. The main aim is to strip away distractions. You’ll find simple images, block shapes, and placeholder text in this wireframe. An example is sketching an app layout on paper. This approach is beneficial for initial tests.
These wireframes ease discussions, help in setting navigation, and outline user paths. Picture a room with stakeholders or clients. A designer sketches ideas with a pen during a meeting. When many product ideas float around, low-fidelity wireframes help zero in on one.
2. Mid-fidelity Wireframes
Among the three, mid-fidelity wireframes are the most prevalent. They offer a clearer layout view, though they still omit visuals like images or specific typography. But, components have more precision, and features stand out.
Designers might use varied text weights. It helps distinguish between titles and body text. They don't use colors, but different shades of gray can indicate elemental importance. While suitable for early product stages, designers usually craft these using digital tools like Miro or Figma.
3. High-fidelity Wireframes
High-fidelity wireframes are detailed. They provide pixel-specific layout views. Unlike the low-fidelity version, which might use placeholder text (lorem ipsum) and symbols, these wireframes present actual images and relevant content.
Their intricate detail makes them apt for exploring and recording complex ideas. Think of detailed menu systems or dynamic maps. Designers reserve high-fidelity wireframes for the design cycle's advanced stages. They refine and finalize design concepts using these.
When to Use Wireframes?
Wireframes play a role throughout a project. They're essential for clarity, feedback, planning, and testing. But they serve a specific purpose. Here are the scenarios where creating wireframes can help.?
Showvideo transcript
Choosing the Right Wireframing Tools
Benefits of Digital Wireframing
Showvideo transcript
Wireframing tools and software
Wireframing tools help you map out the user experience, layout, and overall flow. It streamlines the design process and ensures everyone is on the same page. In this section, we'll talk about some of the top wireframing tools that are leading the industry. (Prices correct at the time of writing.)
1. Figma
Figma is a top-tier, cloud-based design tool. It's a favorite among solo designers and teams alike. Even free users benefit from its comprehensive feature set.?
FigJam, an online whiteboard, integrates with Figma, and you can use it for brainstorming and user flow mapping. This way, you can transition to wireframing and prototyping within the same platform. There is no need for external design apps.
The platform excels at team collaboration with real-time edits and in-file discussions. Developers can extract CSS for smooth transitions to production.
Best Features
Pricing
Free (3 projects). Professional plan at $12/user/month (annual billing).
2. Mockflow
MockFlow is an online wireframe tool with real-time collaboration. Its clean, intuitive interface makes wireframing simple with many UI packages. The platform has design controls placed on the left, which maximizes the space for the design. Beginners find it easy to use due to the precise placement of its diverse elements.??
The platform offers unique features, like organizational functionality. It allows you to create separate spaces for each project. You can also export in various formats, including Word and PowerPoint.?
With native Slack and Microsoft Teams integrations, team communication stays streamlined with Mockflow. Bonus features like AI image and text generators enhance its capabilities.?
Best Features
Pricing
Free (1 UI project). Wireframing plan at $14/user/month. Product Design plan at $19/user/month.
3. Lucidchart
Lucidchart is a diagramming tool accessible via web browsers. It empowers users to draw, do revisions, and distribute charts and diagrams collaboratively. This platform is ideal for enhancing organizational structures, systems, and various workflows. With a user-friendly interface, it's a top choice for those seeking visual collaboration tools.
The platform’s strength lies in promoting teamwork through real-time collaboration, in-app chats, and extensive integration capabilities. Lucidchart syncs with popular tools, including Microsoft Office and Google apps, and connects with its virtual whiteboarding product, Lucidspark.?
Best Features
Pricing
Freemium version. Paid plans start at $7.95/month.
4. Miro
Miro is a dynamic AI-powered virtual whiteboard platform. It fosters real-time team collaboration with features like sticky notes, wireframe libraries, and mind-mapping tools.?
With diverse integrations and templates, Miro provides a holistic solution for brainstorming and design. The free version is generous, and additional perks come with the team plan.
Best Features
Pricing
Free for up to 3 boards; Team plan at $8/member/month for added features.
More notable mentions: Adobe XD, Balsamiq and Adobe Illustrator.
How to Create Wireframes: A Step-by-Step Guide
Understanding how to create effective wireframes is crucial for a seamless user experience (UX) design process. Wireframes serve as the foundation of your design, as they allow you to visualize the layout and features of your website or application.?
With the right process, you can ensure precision, save time, and avoid costly changes in the later stages. So, let's look at the essential steps to create impactful wireframes.
领英推荐
Step 1: Do Your UX Research
Before sketching, you need to have a good understanding of your audience and business. Start your UX research from the perspective of your target audience.?
Utilizing tools like user personas or the jobs-to-be-done (JTBD) framework can be invaluable here.
Showvideo transcript
Simultaneously, familiarize yourself with the business side. Understand what you offer, the goals you have set, and what your desired outcomes are. The main point is to balance user needs with business objectives in your wireframe.
Showvideo transcript
Step 2: Define Requirements and Prioritize Features
After you complete your UX research, the next step is narrowing down what to build. At this stage, involve stakeholders or the product owner. They will help translate broad user needs into specific features.?
For example, if your e-commerce site aims to improve user engagement, it may require a 'Recommended Products' section. Stakeholders can provide insights on what features align with both user needs and business goals.
This step is crucial for deciding what elements will make it to the wireframe. Make a list of prioritized features to guide the design process. This ensures you focus on what’s most important for users and the business.
Step 3: Map the User Flow
User flow is the blueprint of a user's journey on your platform. Taking an e-commerce site as an example, a user's path might start from the homepage, leading to a product search, then product selection, payment, and finally, order confirmation.?
Recognizing these steps will highlight the necessary features and inform your design decisions.
Step 4: Sketch the Layout and Features
With the user research and project requirements in hand, sketch your wireframe. Select an appropriate canvas size and start positioning elements. Piece together a puzzle; you can shift components to achieve an intuitive, user-friendly design.
Here are some things to consider:
Step 5: Review and Iterate
Now, share your wireframes. Gather input from stakeholders, including business professionals and developers. Consider guerrilla usability tests, which involve testing the wireframe with users to gather insights.?
When you collect feedback, frame your questions to include broad insights and specific details. If you have varied wireframe versions, let reviewers pick their favorites.?
Collaboration is key here. As a UX designer, your role is to champion the user's voice. While businesses have objectives and developers focus on feasibility, you advocate for a user-centered design.?
Step 6: Build on It
Upon reaching a mutual agreement on the wireframe design, progress to the next stages. Create detailed mockups and interactive prototypes and transform them into minimum viable products. This progression helps refine the user experience so that the final product is functional and user-centric.
Showvideo transcript
(Watch this video to learn about the minimum viable product and how to scope out the MVP)
What is Wireframing in UX?
Wireframing in UX refers to creating a skeletal layout for a digital product. It's the blueprint or foundation upon which you create the design. Think of it as the architectural plan for a website, app, or digital platform.
Different platforms have specific wireframe sizes. These are:
Showvideo transcript
(Watch this video to learn about the differences between smartphones and tablets)
The Necessity of Wireframing
Approaches to Wireframing
Wireframing Principles
Wireframing for User Testing
Testing with wireframes is invaluable. Before getting deep into design or development, wireframes provide a tangible product for users to interact with. This early-stage testing identifies potential usability issues, layout problems, or unclear navigation paths.?
Using wireframes for testing ensures that the final product is both user-friendly and meets business objectives.
Wireframe Page Layout: Structuring Content
The key is to organize the content logically. The layout should guide the user smoothly through the information to create an intuitive and pleasant browsing experience.
UX and UI Wireframe Examples
Every wireframe begins as a basic drawing of your desired layout. Check out the examples below for ideas!
1. Website Wireframe Sketch
A basic homepage wireframe sketch. It outlines sections and highlights essential details. Simple and straightforward.
Strengths
Weaknesses
2. Mobile Webpage Sketch
A hand-drawn app wireframe with detail. It gives context for each step and uses grids for structure.
Strengths
Weaknesses
3. eCommerce Mobile Wireframe Sketch
The digital sketch shows the main parts of a mobile eCommerce site. Products are at the top for easier user transactions.
Strengths
Weaknesses
As the design matures, transitioning to digital tools can bring more precision and clarity to the wireframes. After sketching out your desired web design layout, progressing to the upper level of digital wireframe refines your design approach.
4. Classic Blog Website Wireframe
A straightforward digital wireframe example that uses basic tags for description. Empty boxes in the wireframe with crossbars indicate image spots in the UI. This wireframe is ideal for blogs and basic eCommerce sites.
Strengths
Weaknesses
5. Service or Product-Based Website Wireframe
This well-designed example shows diverse page layouts. It includes products, reviews, services, and a blog section in a clear format.
Strengths
Weaknesses
6. E-commerce Low Fidelity Mobile Website Pages
A superb low-fidelity digital wireframe for mobile. It features filled buttons, headings, and text content.
Strengths
Weaknesses
Finally, we have high fidelity wireframe that bridges the gap between concept and reality. It infuses brand elements such as imagery, typography, and colors. This allows you to visualize your website's final look while ensuring alignment with your brand's identity. Here are three examples of high-fidelity wireframes.?
7. Business Website Wireframe Example
A clear, organized business site wireframe. It includes a header logo, menu, windows, and top-placed call to action for best visibility.
Strengths
Weaknesses
8. Food Website Wireframe
A lively wireframe featuring ample white space and round images. It has a distinct call to action and is user-friendly, and the circular designs add a vibrant touch.
Strengths
Weaknesses
9. Branded Food Website High Fidelity Wireframe
A complete wireframe showcasing text, buttons, colors, and images. It provides a preview of the site's final look before development.
Strengths
Weaknesses
A detailed vision of high-fidelity wireframes reduces ambiguities during the development phase. It leads to a smoother project flow.
The Take Away
As we talked about wireframing in this content, it’s clear that wireframes play an integral role in UX design. You need a clear understanding of elements, types, and appropriate use cases to create better wireframes. You have wireframing tools like Figma, Mockflow, and Lucidchart to support your efforts.?
Use the step-by-step guide and wireframe examples as stepping stones toward creating the best wireframes of each type.?
Here are the two major takeaways:??
Show full article
Learn more about Wireframing
Take a deep dive into Wireframing with our course How to Create a UX Portfolio .
Did you know the average UX recruiter spends less than 5 minutes skimming through your UX portfolio? If you want to join the growing and well-paid field of UX design, not only do you need a UX portfolio—you’ll need a great UX portfolio that showcases relevant skills and knowledge. Your UX portfolio will help you get your first job interviews and freelance clients, and it will also force you to stay relevant in your UX career. In other words, no matter what point you’re at in your UX career, you’re going to need a UX portfolio that’s in tip-top condition.
So, how do you build an enticing UX portfolio, especially if you’ve got no prior experience in UX design? Well, that’s exactly what you’ll learn in this course! You’ll cover everything so you can start from zero and end up with an incredible UX portfolio. For example, you’ll walk through the various UX job roles, since you can’t begin to create your portfolio without first understanding which job role you want to apply for! You’ll also learn how to create your first case studies for your portfolio even if you have no prior UX design work experience. You’ll even learn how to navigate non-disclosure agreements and create visuals for your UX case studies.