Wireframing in UX

As defined by Usability.gov, a wireframe is “a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors.”

In layman's terms, think of wireframes as a low fidelity, digital illustration of a website.

They are static, don't include any color, don’t show interaction, and are entirely about communicating the site’s structure and functionality.

Pros of wireframing:

• They’re relatively quick to make because they aren’t detailed.
• They provide early visuals to communicate layout, concepts, functionality, and interactions with team members.
• They’re easy to turn into a low fidelity prototype to test with users.
• They’re easy to change.

Cons of wireframing

• Because they are lower fidelity, they don’t include the details, or technical functionality. This can make wireframes harder for team members, users, or clients to envision.
• As you increase the detail in the wireframe with real content, it can throw off the layout.

There are many tools that you can use for wireframing, but here are just a few:

• Figma
• Sketch
• Balsamiq
• Axure
• Adobe XD

Go to the Wireframes tab in the Figma workbook.

Take your sketches and start turning them into wireframes. Use the wireframing library to create your designs. If you sketched multiple ways of solving the problem and still aren’t sure what the right one is, create some wireframes and see if that helps provide clarity. Keep iterating until you find what you believe to be the best solution.

When people think of UX, people generally think of wireframes.

They're considered one of the most important deliverables throughout the UX process.  

By the end of this video, we hope that we'll have demystified wireframes and empowered you with enough knowledge to make your own.    

In this lesson, we're going to go over wireframes, what they are, the pros, the cons, the tools you can use to create them, some tips, we'll look at wireframes compared to other design documents, and finally how to do it for yourself.  

Let's get after it.  

So let's start off by defining what wireframes are.  

As defined by Usability.gov, a wireframe is "a two-dimensional illustration of a pages interface that specifically focuses on space allocation and prioritization of content functionalities ,available and intended behaviors."  

If this definition puts you to sleep, here's an illustration of an angry cat in a box.  

That cat knows about space allocation.  

To put it far more simply, just think of wireframes as low fidelity, digital illustrations of a website.  

Here's an example.  

Because they're low fidelity, they do not include any styling color or graphics.  

Think of wireframing as the skeleton of your website.  

They are static, don't show interactions, and are entirely about communicating the site structure and functionality.  

You don't need to have the details ready before creating wireframes.  

They can be high level and conceptual, or they can have more detail.

It's really up to you and where you are in the process.  

As you iterate on your designs, you'll move your wireframes up the fidelity food chain, adding more and more detail.  

In case you weren't aware for some design terminology, final designs that are high fidelity are generally referred to as mockups or comps.  

Comp stands for comprehensive and it's the final version of what the page will actually look like.  

Now let's talk about the pros of wireframes.  

First, they're relatively quick to make, because they usually aren't that detailed and don't use any color.  

Second, they provide early visuals to communicate layout concepts, functionality, and interactions with team members.  

Third, they're easy to turn into low fidelity prototypes to test with users.

And fourth, they're easy to change.  

At this point, you might be saying, "that sounds great. Why would I do anything else?"  

So let's talk about the downsides of wireframing.  

There are two primary cons.  

First, because they are lower fidelity, they don't include the details or technical functionality. This can make wireframes harder for team members, users, or clients to envision.  

Second, as you increase the detail in the wireframe with real content, it can throw off the layout.  

Regardless of the pros or cons, wireframing is still considered to be one of the main UX deliverables.  

It's usually a necessary step that you'll take to successfully complete a case study.  

Let's move on to wireframing tools.  

There are many tools that you can use for wireframing, but here are just a few.  

Figma, Sketch, Balsalmiq, Miro, Axure, and Adobe XD.  

That was a bit quick and easy.  

Let's get a bit more into the weeds by talking about some tips for wireframing.  

First, start with sketching.  

Sketching can jumpstart your creative process and help you get miles further with your wireframes.  

Second, don't use color, stay with black and white or grayscale.  

You don't want people to get caught up in the visual design.  

At this stage, you're trying to define functionality.  

Third, use free wireframing kits to get started quickly.  

The Figma community has a ton of different free wireframing kits that you can download to get you started.  

Download one or two of them to save yourself some time.  

Fourth, don't fall in love with your first great idea. Keep iterating.  

We've said it before and we'll say it again... one of the major differences between an entry level and senior UX designer is that the senior continues to explore.  

They don't stop with their first good idea. They try out a ton of concepts so they can choose what works best.  

Now let's compare wireframes with other design documents so there's no confusion about UX deliverables.  

First, wireframes versus mockups.  

We've already talked about this a bit, but let's go over it again.  

Here's an example of each with a wireframe on the left and a mockup on the right.  

Mockups are high-fidelity visuals of the product that you're creating.  

They show what the product is actually going to look like.  

After prototyping and testing, you'll turn your wireframes into mockups.  

Mockups are where you finalize your visual decisions and experiment with different styles and placements.  

Next, there are prototypes.  

A prototype is a clickable early version of a website meant to simulate user interactions so you can get feedback on a concept.  

They're made by linking screens together and creating interactions on a page to show how the product works.

You can build a prototype at varying stages of the UX process. It can be built early on in the wireframing stage or when things are more visually finalized, like in the example on screen.  

The main point is that they are functional, dynamic, and simulate user interaction.  

By contrast, wireframes are static and low fidelity.  

Now, let's talk about how to turn your sketches into wireframes.  

Before wireframing, gather the following artifacts to guide you throughout the wireframing process.  

First, framing the problem.  

Second, your competitors screenshots.  

And third, your sketches.  

Then start by opening your wireframing software.  

Next, select the right screen resolution frame depending on whether you're designing for desktop or mobile.  

If you're designing for desktop, choose a resolution of 1440 by 1024 pixels or 1280 by 720 pixels.  

By choosing a smaller size, it forces you to simplify your designs and ensure they'll work across different screen sizes.  

For mobile, use a resolution of 375 by 812 pixels for iOS and 360 by 640 pixels for Android.  

Then pull up the website or app you are working on, so you can use a similar layout in your wireframes.  

For example, if you're designing a new feature for Airbnb, pull up their website to see their general layout.  

This provides the structure to build your wireframes in.  

Before taking a screenshot, make sure to use the plugin window resizer to set the browser to the resolution you chose.  

Make sure you don't skip this because that way, when you drop the screenshots into Figma, they'll automatically fit into the frames and they'll be at the correct break point size.  

This ensures that you'll get the correct measurements of font size spacing, et cetera.  

You can also use these screenshots as stencils/templates where you just draw your shapes over them. Like this.  

When wireframing and designing in general, it's important to think through all the elements that will be reusable.

In this case, each card is being reused over and over again. That means we can turn our wireframe version into component.  

Then, if we make one change, it will change all of them.  

While this takes a little bit of time upfront to set up, it saves you a ton of time in the long run.  

Once the component is set up, we recommend you move it somewhere where you won't accidentally mess it up.

Then you can just copy and paste it throughout the frame.  

Don't try to be pixel perfect here.  

Seriously. If you do, the pixel monster will come out of your closet and roast your computer in the flames of hell fire.  

Anyway, when you're actually wireframing, just start dragging in elements from the wireframing kit library.  

Using these objects start copying the company's permanent UI elements onto your wireframe. Don't overthink it.  

And that's really it to wireframing.  

To recap, wireframes are static, low-fidelity, digital illustrations of a website.  

They don't include any styling or color and are the skeleton of your website.  

They're relatively quick to make because you aren't focused on visual design.  

They provide early visuals that can be used to communicate layout concepts, functionality, and interactions with team members.  

They're really easy to iterate on.  

You can quickly turn them into a low fidelity prototype to test with users.  

And we showed you an example of how to wireframe in Figma..

When you get hired as a UX designer, we recommend that you annotate your wireframes and keep design documentation to help people understand what's happening on the screen.  

To do this, add a section next to your wireframes explaining how it works and anything else that's important to note.  

Now it's your turn.  

Go to the wireframes tab in your Figma workbook and start creating your wireframes for the REI hiking app.  

As a reminder, if you haven't already. And at this point, I honestly don't know how you wouldn't have done it yet, go to kickassux.com and go to the free UX course page to download the Figma workbook.  

Then when you're actually wireframing use your framing the problem competitors, screenshots, and sketches to guide your wireframing session.  

Happy wireframing!

Figma templates