Wireframes

Your constantly-updated definition of Wireframes and collection of videos and articles
578 shares

What are Wireframes?

Wireframes are basic visual representations of a user interface that outline the structure and layout of a webpage or app. They’re a key deliverable of UX (user experience) design. Wireframes serve as a blueprint that helps designers, developers, and other stakeholders understand the placement of elements like headers, buttons, navigation, and content blocks. They don’t focus on design details like colors, fonts, or imagery.

Show Hide video transcript
  1. Transcript loading…

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.

“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

Wireframes allow teams to:

  • Visualize ideas: Wireframing gives form to abstract concepts and ideas which enables designers to see how elements will work together on a screen.

  • Spot opportunities and constraints: Wireframes reveal usability challenges, technical limitations, and opportunities to improve the user experience.

  • Facilitate collaboration: Because wireframes are quick to create and easy to modify, they foster collaboration among design teams, developers, and stakeholders.

  • Save time and resources: When issues are identified and resolved in the wireframe stage, teams can avoid expensive changes later in the process, particularly during development.

Wireframes: The Foundation of Powerful Prototypes and Delightful Designs

© Interaction Design Foundation, CC BY-SA 4.0

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. Designer’s mark out a solution’s bare bones in more detail than a sketch, including navigation and other features of the design’s layout.

Good wireframing is the skill of creating realistic-looking, lean layouts so a 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 wireframing can also be done 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, placeholders can be used to mark content and pictures in grayscale. In high-fidelity wireframing, more realism is introduced, including pictures and perhaps even some interactivity. These can be adapted into well-crafted wireframes far more easily into prototypes for usability testing.

Software choices vary in price (some are free), options (e.g., click-through interactivity) and suitability (e.g., for mobile). When wireframing is done well, it can safeguard a design, design team and a 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

© FOCA Stock, Fair Use

Key Components of Wireframing

A well-designed wireframe typically includes the following elements:

  1. Layout and structure: This outlines how content is arranged on the screen. It shows where key elements like headers, images, text blocks, and buttons will be placed.

  2. Navigation: Wireframes indicate how users will move through the product, including the placement of menus, tabs, and other navigational elements.

  3. Content hierarchy: Wireframes establish a clear visual hierarchy that prioritizes the most important content and guides the user’s attention.

  4. Functionality: Wireframes show interactive elements like buttons, input fields, and forms, but without detailing how these will look.

  5. Annotations: These are notes that explain the functionality, behavior, or rationale behind certain design decisions.

Low-Fidelity vs. High-Fidelity Wireframes: What’s the Difference?

  1. Wireframes come in different levels of fidelity, depending on the project’s needs and the phase of the design process.

    © Interaction Design Foundation, CC BY-SA 4.0

Low-Fidelity Wireframes

Low-fidelity wireframes are rough, simplified layouts that focus purely on the basic structure and layout of the page. They often use placeholders for images, text, and interactive elements and are usually created in black and white, or grayscale, to keep the focus on functionality and content hierarchy rather than aesthetics. Designers commonly use low-fidelity wireframes in the early stages of a project to quickly explore different layouts and ideas without investing much time in details.

Low-fidelity wireframes are useful for:

  • Brainstorming and ideation: Teams can rapidly create multiple wireframes to explore different design solutions.

  • User flow and navigation: These wireframes help map out the user’s journey through the product and determine if the navigation is logical and intuitive.

  • Collaboration: Low-fidelity wireframes are easy for team members and stakeholders to understand, making them effective tools for feedback and discussion.

High-Fidelity Wireframes

High-fidelity wireframes are more detailed and realistic representations of the final product. These wireframes may include accurate sizes for elements like buttons and fonts, as well as actual images and more specific content. In some cases, high-fidelity wireframes can also include limited interactivity, such as clickable elements that simulate basic user interactions.

High-fidelity wireframes are useful for:

  • Finalizing the design structure: When teams are close to deciding on the final layout and functionality, high-fidelity wireframes provide a more polished representation.

  • Developer handoff: Developers can use high-fidelity wireframes as a reference to ensure they are building the product as designed.

  • User testing: High-fidelity wireframes can serve as prototypes for testing usability with real users, providing valuable insights into how users will interact with the final product.

How to Wireframe Efficiently and Effectively

An illustration depicting an annotated wireframe of website

An annotated wireframe of a job listing website.

© Interaction Design Foundation, CC BY-SA 4.0

To make wireframing effective, focus on key elements users expect to see and how they will interact with them. Prioritize functionality, accessibility, layout, and navigation—the backbone of a well-structured design. Avoid unnecessary features or "nice-to-haves" at this stage.

Steps to Build Effective Wireframes

  1. Prioritize content and hierarchy: List and organize the most important elements for each page early. Establish a clear information architecture, so users can navigate content intuitively.

  2. Create large content blocks: Divide the screen into broad sections for content, then refine these blocks with details like links and placeholders.

  3. Use a grid-based layout: A clean, grid-oriented structure ensures a balanced, user-friendly layout. This helps users focus and improves overall usability.

  4. Annotate for clarity: Use annotations to explain functionality and design rationale, ensuring everyone—designers, developers, and stakeholders—can easily interpret the wireframes.

  5. Start with mobile-first design: By designing for the smallest screen first, you create a more focused, scalable layout that translates well to larger devices.

  6. Add detail in high-fidelity wireframes: For more advanced wireframes, include accurate sizes for fonts, icons, and other elements. Be specific but avoid overloading the design with unnecessary content at this stage.

Focus on Clarity and Collaboration

Keep your wireframes concise, focusing on core elements like functionality and user flow rather than visual aesthetics. Wireframes are tools for collaboration, not polished deliverables. Their purpose is to ensure alignment across teams, speed up iteration, and refine ideas before committing to high-fidelity designs.

Well-executed wireframes demonstrate your ability to strip a design down to its essentials, helping your team recognize constraints and identify the most effective user-centered solutions.

How to Successfully Showcase Wireframes in a Portfolio

An illustration that shows the sketching and wireframing part of a UX design portfolio

© Interaction Design Foundation, CC BY-SA 4.0

Wireframes are an effective way to demonstrate a designer's problem-solving skills and how they structure user interfaces. Wireframes reveal the design process, focusing on functionality and user flow before visual refinement. To include them effectively, designers should:

  1. Select: Choose wireframes that demonstrate key problem-solving moments and strong organizational skills.

  2. Clarify: Redraw unclear wireframes to prioritize readability and ensure they effectively communicate structure and functionality.

  3. Organize: Present wireframes in a sequence that shows the evolution from initial concepts to refined layouts, highlighting iteration.

  4. Annotate: Add brief notes explaining design decisions and how challenges were addressed.

When UX designers present wireframes thoughtfully, they show their ability to prioritize functionality and user needs while refining solutions based on feedback. A well-organized wireframe display reflects a designer’s attention to detail, strategic mindset, and skill in creating user-centered products. This clear presentation positions them as strong candidates who balance both technical and creative aspects of design.

Learn More about Wireframing

Take our course, Build a Standout UX/UI Portfolio: Land Your Dream Job UX Portfolio.

Take our course, User Experience: The Beginner’s Guide.

Read the article, 10 Free-to-Use Wireframing Tools.

Read the article, How to Create Wireframes: An Expert’s Guide.

Questions related to Wireframing

Why are wireframes important in the design process?

Wireframes are critical because they allow designers to focus on structure and usability without being distracted by visual design. They enable teams to discuss and refine the layout early, saving time by catching usability issues before they progress to higher fidelity stages. Wireframes also help in client and stakeholder discussions by providing a clear visual reference.

Take our course, User Experience: The Beginner’s Guide to learn more about wireframes.

What is a well-regarded book on wireframes?

Angeles, M., Barnard, L., & Carlson, B. (2023). Wireframing for everyone. Book Apart.

What are the differences between wireframes, mockups, and prototypes?

Wireframes focus on structure and functionality, providing a low-fidelity outline. Mockups add visual design elements, offering a more detailed representation of the final product. Prototypes, however, are interactive and allow for user testing to evaluate the flow and functionality of the interface.

Read What are Prototypes? and What are Mockups? to learn more about the differences between them and wireframes.

What are the different types of wireframes (low-fidelity vs. high-fidelity)?

Low-fidelity wireframes are basic, using simple shapes and placeholders to depict content and layout. They prioritize structure and user flow. High-fidelity wireframes resemble the final design more closely. They incorporate typography, specific spacing, and sometimes images.

Take our course, User Experience: The Beginner’s Guide to learn more about wireframes.

How detailed should a wireframe be?

The level of detail in a wireframe depends on its purpose and stage in the design process. Early wireframes should be simple and focus on layout and flow. As the project progresses, wireframes can become more detailed, incorporating grid systems, specific typography, and annotated features to ensure clarity in functionality.

Take our course, User Experience: The Beginner’s Guide to learn more about wireframes.

How do wireframes fit into the overall design workflow?

Wireframes sit at the early stages of the design workflow, following user research and personas, and preceding visual design and prototyping. They act as blueprints that guide the development of mockups and prototypes, ensuring that both design and functionality align with user needs.

Take our course, User Experience: The Beginner’s Guide to learn more about wireframes and the design process.

What are the key elements of a good wireframe?

A good wireframe includes clear navigation, consistent layout, intuitive information hierarchy, and placeholder content for text and media. It should focus on usability and functionality, with each element serving a purpose. Additionally, it often includes annotations to explain interactive elements.

Take our course, User Experience: The Beginner’s Guide to learn more about wireframes.

What are common mistakes to avoid when wireframing?

Common mistakes include overcomplicating the design, adding too much detail too soon, neglecting user flow, and ignoring content hierarchy. Avoid focusing on aesthetics during the wireframing stage, as the purpose is to refine the structure and functionality, not the final look.

Take our course, User Experience: The Beginner’s Guide to learn more about wireframes.

How do you present wireframes to clients or stakeholders?

Present wireframes by explaining the layout, navigation flow, and rationale behind content placement. Highlight key interactions and get feedback on the structure and user experience. It’s important to manage expectations by emphasizing that wireframes are not final designs but a starting point for further development.

Take our course, Build a Standout UX/UI Portfolio: Land Your Dream Job UX Portfolio to learn more about how to present to clients and stakeholders.

Answer a Short Quiz to Earn a Gift

Question 1

What is the main purpose of wireframing in the UX design process?

1 point towards your gift

Question 2

What distinguishes a high-fidelity wireframe from a low-fidelity wireframe?

1 point towards your gift

Question 3

How do wireframes facilitate collaboration in design teams?

1 point towards your gift

Question 4

Why are wireframes important to manage the scope of a project?

1 point towards your gift

Question 5

At which stage of the design process do designers commonly use wireframes the most?

1 point towards your gift

Better luck next time!

0 out of 5 questions answered correctly

Do you want to improve your UX / UI Design skills? Join us now

Congratulations! You did amazing

5 out of 5 questions answered correctly

You earned your gift with a perfect score! Let us send it to you.

Letter from IxDF

Check Your Inbox

We’ve emailed your gift to name@email.com.

Do you want to improve your UX / UI Design skills? Join us now

Literature on Wireframes

Here’s the entire UX literature on Wireframes by the Interaction Design Foundation, collated in one place:

Learn more about Wireframes

Take a deep dive into Wireframes with our course Build a Standout UX/UI Portfolio: Land Your Dream Job .

“Your portfolio is your best advocate in showing your work, your skills and your personality. It also shows not only the final outcomes but the process you took to get there and how you aligned your design decisions with the business and user needs.” 

— Morgane Peng, Design Director, Societe Generale CIB 

In many industries, your education, certifications and previous job roles help you get a foot in the door in the hiring process. However, in the design world, this is often not the case. Potential employers and clients want to see evidence of your skills and work and assess if they fit the job or design project in question. This is where portfolios come in.  

Your portfolio is your first impression, your foot in the door—it must engage your audience and stand out against the hundreds of others they might be reviewing. Join us as we equip you with the skills and knowledge to create a portfolio that takes you one step closer to your dream career. 

Build Your Portfolio is taught by Morgane Peng, a designer, speaker, mentor and writer who serves as Director of Experience Design at  Societe Generale CIB. With over 12 years of experience in management roles, she has reviewed thousands of design portfolios and conducted hundreds of interviews with designers. She has collated her extensive real-world knowledge into this course to teach you how to build a compelling portfolio that hiring managers will want to explore. 

In lesson 1, you’ll learn the importance of portfolios and which type of portfolio you should create based on your career stage and background. You’ll discover the most significant mistakes designers make in their portfolios, the importance of content over aesthetics and why today is the best day to start documenting your design processes. This knowledge will serve as your foundation as you build your portfolio. 

In lesson 2, you’ll grasp the importance of hooks in your portfolio, how to write them, and the best practices based on your career stage and target audience. You’ll learn how and why to balance your professional and personal biographies in your about me section, how to talk about your life before design and how to use tools and resources in conjunction with your creativity to create a unique and distinctive portfolio. 

In lesson 3, you’ll dive into case studies—the backbone of your portfolio. You’ll learn how to plan your case studies for success and hook your reader in to learn more about your design research, sketches, prototypes and outcomes. An attractive and attention-grabbing portfolio is nothing without solid and engaging case studies that effectively communicate who you are as a designer and why employers and clients should hire you. 

In lesson 4, you’ll understand the industry expectations for your portfolio and how to apply the finishing touches that illustrate your attention to detail. You’ll explore how visual design, menus and structure, landing pages, visualizations and interactive elements make your portfolio accessible, engaging and compelling. Finally, you’ll learn the tips and best practices to follow when you convert your portfolio into a presentation for interviews and pitches. 

Throughout the course, you'll get practical tips to apply to your portfolio. In the "Build Your Portfolio" project, you'll create your portfolio strategy, write and test your hook, build a case study and prepare your portfolio presentation. You’ll be able to share your progress, tips and reflections with your coursemates, gain insights from the community and elevate each other’s portfolios. 

All open-source articles on Wireframes

Please check the value and try again.

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

Interaction Design Foundation - IxDF. (2016, September 25). What are Wireframes?. Interaction Design Foundation - IxDF.

New to UX Design? We’re Giving You a Free ebook!

The Basics of User Experience Design

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,420 designers enjoy our newsletter—sure you don’t want to receive it?