The Complete Guide to Wireframing
Why you should wireframe, when to do it and a step-by-step tutorial on how to do it.
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.
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:
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.
More Wireframing Resources
Want more design articles?
5 Ways Facebook Scales Their Design System
Read more ›
Design Systems in Framer X
Read more ›
Creating Code Components
Read more ›