The Complete Guide to Wireframing

Why you should wireframe, when to do it and a step-by-step tutorial on how to do it.

asha

Ashanya Indralingam

April 26, 2018

banner

Though wireframes and prototypes are often used interchangeably, they actually perform two distinct functions at opposite ends of the design cycle. In this guide, we’ll share everything you need to know about:

Wireframing vs. Prototyping

Wireframes are the backbone of any project and generally created during the early stage ideation phase. They should provide only enough layout and functionality to get the whole team on the same page. But wireframes should also be iterative in nature: start with simple sketches, share those, get feedback, then build out from there. The more purposeful your wireframes, the less time you’ll waste during the prototyping phase.

Conversely, prototyping refers to the process of designing an interactive experience, which can range from low to high-fidelity. At this stage, you will be hyper focused on the practical details of how a user will interact with your design. Because of the level of fidelity you can achieve by designing in Framer, prototypes are often used to test and validate with end users.

low fi mid fi hi fi
From simple sketches to high quality mockups, wireframing can span different levels of fidelity in between.

Wireframing Tools and Tips

Wireframes can be both pencil and paper or low-fidelity (digitally made in programs such as Framer). There are benefits to both, so select the medium that applies best to both your working style and the scope of your project. If you’re sketching by hand, we recommend Dot Grid notepads for a slight bit of structure, without being constrained by typical notebook lines. But while it’s much easier to sketch on paper during a brainstorm a low-fidelity wireframe gives your designs a better chance at success during a review.

tool comparison
Digital wireframing tools make it easier to share and get buy-in on your early stage wireframes.

Here are a few tools to consider for your wireframing needs:

4 Steps to Create Your First Wireframe

If you’re interested in wireframing with Framer, download our free 14-day free trial. It comes with a handy Wireframe Kit packed with all the templates and elements you need to blueprint your next project. Then follow along with this step-by-step tutorial:

resource
Framer’s free Wireframe Kit offers premade UI elements, content blocks and instructions to help you create a useful wireframe.

1. Set layout and structure

Start by determining the hierarchy of your content using blocks and grids. Don’t focus on the content itself, just how its presented. In terms of layout, the mobile-first approach works because it allows you to prioritize only the essentials and scale up as needed. In Framer, any screen you set up will responsively adapt across all devices, even while retaining their structure.

2. Determine information hierarchy

Next, think about the order of information that you would like to present to your visitors, from top to bottom, left to right. Designate where individual links, buttons and icons will go, as well as user flows. Keep your wireframe intentionally bare bones, but with enough visual hierachy to generate constructive feedback. In Framer, you can hit CMD+C to copy and share selected screens in Slack for feedback.

3. Fine-tune flows and details

Once you’ve incorporated input from UX researchers, product writers and fellow designers, it could helpful to add more details to your wireframe for context. Keep it low fidelity and focus on broad issues like layout and navigation. Use color and type intentionally, such as to determine font size or showcase a prominent CTA.

4. Present for feedback

For your final step, remember to get the green light from all project stakeholders. In Framer you can export and share entire screens or simply hit View > Preview > Present to showcase your design during a review.

wireframe in framer

More Wireframing Resources

Like this article? Spread the word.

Want more design articles?

Sign up for our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.

The Official Loupe 2018 Recap

Read more ›

Featured Framer X Packages: October

Read more ›

Interactive Components From Top Design Teams

Read more ›

Try Framer X.

The world’s most advanced tool for interactive design has arrived. Get started with Framer X today.

Try it for free ›

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.