The Complete Guide to Wireframing

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

by Ashanya Indralingam

Ashanya Indralingam

Content Strategist at Framer.

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
Wireframing Tools and Tips
4 Steps to Create Your First Wireframe
Wireframing Resources

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.

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.

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:

Wireframe CC — A minimalist interface for sketching wireframes that don’t distract from the product experience.

Balsamiq — This low-fidelity tool offers several drag-and-drop elements, from buttons to lists, each styled as a hand-drawing.

Framer — Thanks to adaptive layout and auto-hierachy features, Framer makes it easy to wireframe your idea. The best part? You can turn your wireframe into a high-fidelity interactive prototype in the same tool.

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:

Framer’s Wireframe Kit offers UI elements, content blocks and instructions to help you create wireframes.

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.