What Is a Wireframe? (+How to Create One in 5 Simple Steps With Templates)

Bridget Poetker
Bridget Poetker  |  April 4, 2019

X marks the spot, well sort of.

Wireframing is an essential part of your development process. You wouldn’t build a house without a blueprint, would you? Similarly, don’t build out your app design without creating a wireframe first.

Users expect more and more from brands. For instance, 97 percent of business customers cite ‘ease of use’ as most important quality for mobile apps. The small stuff adds up.

What is a wireframe?

A wireframe is a visual representation of a specific page’s content, and oftentimes functionality. The drawings usually consist of boxes, or frames, to convey the interface's layout in terms of space allocation and prioritization of images, copy, buttons, etc. Wireframes are used by designers and/or developers to build out the basic structure of their web service, whether it’s creating an app, a website, or just a single landing page.

this is an example of a wireframe drawing

Wireframes typically don’t include any styling, meaning there are no final colors or graphics. The sole focus of wireframing is to determine what goes where in the user interface (UI) design and why for the best user experience (UX).

Wireframing can and should be a collaborative effort, but there is such a thing as too many cooks in the kitchen. It’s better to gather opinions from a diverse group, rather than say, only UI/UX designers.

TEMPLATE: Try your hand at it with these easy-to-use app and website wireframe templates. Simply print as many as you need and start sketching your ideas!

RESOURCE: Wireframing Download Template Now, FREE →

How to wireframe

Let's walk through the five steps you need to take to create a great wireframe.

1. Do your research

Before you pick up a pen and start sketching, make sure you have your ducks in a row. You have to really understand your audience and then create user personas. From there, think about the variety of use cases. You might even have to do a competitive audit and other industry research to get a better perspective on how people will be interacting with your service.

2. Use your findings as a reference to build out a strategy

Keep all of that research handy, especially your primary goals. If you’re lucky enough to already have audience feedback from back when you first had the idea for an app, then use it! User experience should always be front and center in the design process.

3. Map out user flow with a focus on UX

How many screens do you plan to have? Where will the back button take them on each screen? Creating this architecture and flow before you actually draw anything will help keep things organized.

mobile app wireframes should show user flow

Note how the arrows convey the user flow. Try to work on one flow at a time and see it through until the end before beginning the next. Think about UX and your users’ end goal to anticipate where there could be potential drop-off areas.

4. Draft more than one version of each page

Get drawing! You finally get to put your thoughts on paper, or in some cases, on screen. Keep in mind that you’re just outlining high-level concepts, no details necessary. A lot of designers will use a marker to draft wireframes as it forces them to stick to the basics and not think too much about the fine print. Once you have a few versions per screen, it’s time to start collaborating with the team.

TIP: Let’s talk dev. At this stage, you might also want to get input from the developers as to what application programming interfaces (APIs) and software development kits (SDKs) they plan to integrate and leverage for your website or app, so you can design around them.

5. Refine, add details, and start testing

Now it’s time to finally include some data and detail. Using real content, even just a draft of it, will help in the testing phase. It will alleviate some of the potential bumps in the road, like your testers asking a million questions about how the finished product will actually look and function. The content adds context to this conceptual process.

Wireframe tools

Have no fear, software is here. Wireframing can be a very messy process–we prefer the term “organized chaos.” But just because it makes sense to the designers, doesn't mean everyone else will understand it. How are you going to sell this up the chain of command, or present it to a client?

If you don’t want to draft your screens by hand, wireframing tools are used to create these blueprints, to build anything from simple sketches to complex page layouts for websites, web pages or applications. Whether you need an online wireframe tool or one that has a deep library of elements, there’s a tool out there that’s right for you.

See the Highest-Rated Wireframing Software, Free →

Why is wireframing important?

You should create your wireframes early on in the design and development process. Using this scaled-back version of your website or app will allow you to focus on your users and their goals. The wireframing process is a visual exercise that gives you the opportunity to align business goals directly to user needs.

Wireframes are the foundation, next come mockups, and then prototypes. Mockups are similar to wireframes in that they are inoperable, but do include color, graphics, etc. Prototypes take it a step further and are interactive versions of the product.

At the end of the design process, you can’t have a fully functioning prototype without a really good wireframe.

RELATED: First impressions are 94 percent design-related. Presentation matters!

Wireframe examples

Now that we know what a wireframe is, how to build one, and why, let’s take a look at a few basic wireframes and how they translate to the real deal.

App wireframe

In this weather app concept, you can see that the mobile wireframe doesn’t contain any frills. It’s a very straightforward representation of the final product on the right.

mobile wireframe example of weather app

(image courtesy of Matt Sclanrandis)

Notice how the simplicity of the wireframe forces you focus on the spacing and layout of the various elements on the screen.

Website wireframe

This wireframe is elongated to account for the user scrolling down the full page. In this example, the final website isn’t an exact match to the original wireframe. Keep in mind that wireframes are merely guidelines, but for the most part are followed closely by the development team.

website wireframe example template(image courtesy of JustInMind)

Do you ever think that a lot of websites have a familiar look and feel? That’s because they are often built with standard wireframe templates.

Get sketching

Some designers prefer to start with a pen and paper drafts and others will go right to their favorite wireframe tool. There’s no right way to wireframe, but it is essential step when making an app. Just remember to keep your users at the heart of it all and accept feedback from your team.

Learn more about mobile UX design and what trends we can expect to see in 2019.

Bridget Poetker
Author

Bridget Poetker

Bridget Poetker is a senior content marketing specialist at G2, focusing on app development and design. Born and raised in the Chicago area, she graduated from the University of Illinois at Urbana-Champaign. I-L-L! In her free time, you'll find Bridget in the bleachers at Wrigley Field or posted up at the nearest rooftop patio. During the 8 months of Chicago winter, she hibernates.