Products Enterprise Pricing Resources Community Contact sales Log in Get started for free

Resource library / Design basics / What is wireframing

What is wireframing?

What is a wireframe?

3 types of wireframe
designs

When to skip wireframe

stages

7 best practices in
wireframe design

Wireframe design
checklist

How to tell when you've

nailed your wireframe If you’ve ever tried designing a website or app without a wireframe, you’ll know
why the wireframing process matters. Without wireframes, how can you and
Create and customize your team visualize what you're trying to do? How do you sequence user flows,
wireframe designs with or know what content goes on which screens?
Figma
“It's frustrating if people are commenting on visuals when what you actually
need is high-level feedback, like ‘Is this the most important thing?’” says Tom
Lowry, Director of Advocacy at Figma. Excellent product and site design starts
with smart wireframe design – read on to ace every wireframing stage with
Figma’s pro tips and wireframing tools.

What is a wireframe?
Wireframes are basic blueprints that help teams align on requirements, keeping
UX design conversations focused and constructive. Think of your wireframe as
the skeleton of your app, website, or other final product. Your wireframe shows
the design team and stakeholders the bare-bones outlines of essential
webpages, components, and features, including:

Screen layouts
Navigation bars
Components of UX and UI design
Interactive elements

At the early stages of design, low-fidelity wireframes rely on lorem ipsum text
and simple boxes as placeholders for images and videos. This helps the design
team, copywriters, and other team members to focus on basic functionality to
align around the right direction.

Starting with a clean, spare wireframe design also gives UI/UX designers room
to iterate. They can collect early feedback from user testing on core UX/UI
elements, without distracting users with visual design details. Design teams try
out different concepts, user flows, and templates as they work toward the
ultimate user experience.

Start your wireframe with Figma Sign up

3 types of wireframe designs

The UX design possibilities may seem infinite, but most wireframe designs fall
into three basic levels of fidelity. You may work through all three kinds of
wireframe design on the way to your final product.

1. Low-fidelity wireframes are basic wireframes focused on layout,

navigation, and information architecture. They show what the interface will
look like, illustrating user flows with key UI design elements. Physical
whiteboard sketches can work at early wireframing stages, though they
aren't always easy to share, save or rework. With Figma's online
wireframing tool, you can quickly create, share, and iterate on low-fidelity
wireframes.
2. Mid-fidelity wireframes help designers iterate and shape the final design.
Design teams may add annotations and content as they try out different
approaches to user flows and UI design elements, mapping out core
functionality and key interactions. This enables teams to settle on the final
wireframe design framework before adding visual design components.
3. High-fidelity wireframes look like early product mockups, with interactive
and visual design elements—but without the functionality of low-fidelity
prototypes. At this point of the design process, you may want to add brand
elements like fonts, colors, and logos. That way, you can capture the look
and feel of the final product for user testing.
When to skip wireframe stages
Many design teams assume they have to start with a low-fidelity wireframe and
evolve from there. That makes sense when you're exploring new product
concepts, so you can align on key components, iterate, then add visual design
details later. But according to Tom, there is a case for jumping straight into
high-fidelity wireframe design.

“If you have an established design system, and the design you're exploring is
like others that already exist, conversations probably won't get too derailed by
visual design details,” Tom explains. “In these cases, exploring a design idea at a
higher fidelity can be just as fast and just as effective.”

7 best practices in wireframe design

An effective wireframe can be as simple as a napkin sketch or as complex as a
static product mockup. By applying these best practices in wireframe design,
you can align on directions with your team faster, and move forward with the
best approach.

1. Identify your design goals.

Before you start sketching or tinkering with wireframe templates, name your
design goals. Consider user needs, and what actions you want them to take to
achieve them. Maybe you can help the user to solve a problem by buying a
helpful product, or by signing up for an educational newsletter. Align your
design team around this goal, so that your wireframe designs advance
that cause.

2. Choose the right size for your wireframe.

Your wireframes should match the size of the screen your target audience will
be using. Naturally, a website or application will look different on a laptop than
it would on a mobile device. With that in mind, standard wireframe sizes for
screen types are as follows:

Mobile: 1080 pixels wide by 1920 pixels long

8” Tablet: 800 pixels wide by 1280 pixels long
10” Tablet: 1200 pixels wide by 1920 pixels long
Desktop: 768 pixels wide by 1366 pixels long

3. Keep your wireframe design simple.

Start your wireframe using grayscale colors, limiting fonts, and replacing
graphics with boxes. Make sure your blueprint meets the user requirements at
the most basic level. If you focus on details like misspellings or color schemes,
you might overlook a flaw in the user experience.For simple early-stage
designs, truncated previews or cards may suffice. But for content-rich
interfaces, Tom recommends using real content instead of “lorem ipsum”
placeholder text. “When you start to apply information architecture on a user
interface, listing menu items 1-2-3-4 isn't very useful,” he explains. “Then you
want to use real content.”

4. Maintain design consistency.

Wireframes shouldn’t cause distraction or confusion. Similar components

should look the same across all wireframes, so they're easy to grasp, iterate on,
and code. Even if there’s a slight variation between two related components,
different designs can create uncertainty for developers across pages
and iterations.

5. Make navigation obvious.

Your user flows should be fluid and intuitive. As you apply information
architecture to your wireframe, consider where you might need to support it
with navigation and wayfinding cues. If users have to consult a sitemap, your
navigation and information architecture need improving.

6. Don’t get too attached to your wireframe.

Even a high-fidelity wireframe is still a rough draft that needs changes to

become a final product. Once your design team finalizes the wireframe design,
it’s time for collaboration with developers and other creative team members to
add functionality.

7. Leverage wireframing tools.

Design teams need wireframes they can share, save, and turn into mockups
online. Figma's wireframe kit comes with drag-and-drop design tools that make
it easy for beginners and design pros alike to create customized, high-fidelity
wireframes.

Wireframe design checklist

The wireframing process helps you plan, build, and collaborate throughout the
design and development cycles—but how do you know when you're done? Once
you can check off these action items from your wireframing to-do list, your
wireframe is ready for mockups and higher-fidelity prototypes.

Once your wireframe is done, look back at your initial scope of work. Now that
you've outlined your final product, you may be able to refine your estimate. Even
if it’s just a sketch with placeholders, your wireframe should show:

What screens are essential to meet user needs

User flow through conversion funnels
Usability considerations, including navigation and organization
Main goals and user flows for each screen
Key UI design elements, plus content and interactive features
on each screen
How design components fit together to form screen templates
 When your design team starts the design process, you might not know exactly
how your final product should work or look. Beginners may be tempted to skip
wireframing and lean on existing models for designs—but that can result in an
uninspired, unhelpful user experience. Wireframes focus creative attention on
user needs, and help teams align throughout the design and development
process.“The wireframe gives people an early window into the project, before
you've invested a lot of time polishing something,” Tom says. “Anytime you can
align more people in the organization early saves time later.”

Chances are that your final product will look dramatically different from the
initial wireframe— and that’s a positive thing! Wireframing gives you the
freedom to experiment, make changes, try new concepts, and take risks. With a
skeletal framework in place, you can easily tinker with workflows and design
elements that would be difficult to adjust later in the design process. Your final
design will look and feel better, thanks to the trial-and-error wireframing
process.

Wireframes put usability first, focusing creative attention on elements that are
essential to the user experience, including:

User flows and scenarios

UX design fixes for potential pain points
Navigation and wayfinding functionality
Information hierarchy built into screen templates

How to tell when you've nailed your

wireframe
Gauging wireframe success is tricky without quantitative data, but Tom says
there are several qualitative metrics you can apply. He recommends running
moderated user testing to see if users can get through the user experience
without instructions—instead of getting "tripped up or not knowing what
to do next.”

Another sign of wireframe success is alignment with stakeholders. “If you’re

coming out of a creative session feeling like you got the type of feedback you
wanted, and that you can move forward to next steps confidently, then I would
say that your wireframe was really successful,” Tom says.

But if stakeholders are focusing on minor details or aesthetic considerations

instead of core user needs, he says, "that might be an indication you should
lower wireframe fidelity. Remove some of that polish on the artifacts that
you're sharing, until you get the feedback that you need.”

Create and customize wireframe designs

with Figma
Teams need wireframes to connect and brainstorm UX/UI designs together—
and Figma's wireframe kit gets you started. You can validate ideas and speed up
design workflows on Figma's collaborative design platform—and jumpstart web
design projects with Figma's free website wireframing kit.

For further insight and inspiration, Tom recommends connecting with the Figma
community. “Our community shares a plethora of wireframe ideas and UI
templates,” he says.

Use Cases Explore Resources Compare

X UI design Design features Blog Sketch

YouTube UX design Prototyping features Best practices Adobe XD

Instagram Wireframing Design systems features Color wheel Invision Studio

Facebook Diagramming Development Features Support Framer

Brainstorming Collaboration features Developers Design on Windows

Online whiteboard Design process Resource library Miro

Team collaboration FigJam Reports & Insights

Agile workflows What's new Webinars

Strategic planning Releases Downloads

Mind mapping Pricing Careers

Concept mapping Enterprise Our story

Org charts Organization Affiliate program

Online sticky notes Professional Partners

Templates Customers Legal and Privacy

Remote design Security Modern Slavery Statement

Agencies Integrations Climate Disclosure

Statement
Figma for education Contact
Status

English