The Complete Guide to Wireframing

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

Ashanya Indralingam

April 26, 2018

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.

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.

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:

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.