100 THINGS I LEARNED ABOUT DESIGN  |  SEPTEMBER 10, 2020

100 THINGS I LEARNED ABOUT DESIGN
SEPTEMBER 10, 2020

14. Wireframes

14. Wireframes

In a UX Design project, Wireframes are the culmination of all the steps leading up to design including Stakeholder Interviews, User Interviews, Personas, User Flows and Information Architecture. This makes Wireframes the most important contribution you can make to a project as a UX Designer.

In a UX Design project, Wireframes are the culmination of all the steps leading up to design including Stakeholder Interviews, User Interviews, Personas, User Flows and Information Architecture. This makes Wireframes the most important contribution you can make to a project as a UX Designer.

What is a Wireframe?

It’s a visual outline of content and functionality on your product. In other words, it maps outs the elements that make up each page on your website or app. These elements include text, images, videos, menus, buttons, forms, links, etc. 

In addition to defining what elements live on the page, Wireframes also define functionality, meaning what happens when users interact with the elements. For example, when a user clicks on the menu, what appears? Or what happens when a users clicks on a button or link? 

Now one important note here, just so there’s absolutely no confusion. When I talk about elements like images, videos and even text, I’m not talking about the polished visual design of these elements. So by no means would you include final images, videos, colors or typography in your Wireframes. These are things that pertain to UI Design. Instead, you include placeholders for these elements in your wireframes. This allows you to map out what content goes where in your product and how it all works. 

An analogy that I really like to use for Wireframes is the blueprint. In architecture, a blueprint outlines the layout of a building in a simplified visual diagram. This diagram includes things like walls, doors, windows, stairs and essentially all of the elements that make up the different floors of a building. Wireframes are the same thing, but for your website or app. They’re a simplified diagram of the elements that make the different pages of your product. 

What is a Wireframe?

It’s a visual outline of content and functionality on your product. In other words, it maps outs the elements that make up each page on your website or app. These elements include text, images, videos, menus, buttons, forms, links, etc. 

In addition to defining what elements live on the page, Wireframes also define functionality, meaning what happens when users interact with the elements. For example, when a user clicks on the menu, what appears? Or what happens when a users clicks on a button or link? 

Now one important note here, just so there’s absolutely no confusion. When I talk about elements like images, videos and even text, I’m not talking about the polished visual design of these elements. So by no means would you include final images, videos, colors or typography in your Wireframes. These are things that pertain to UI Design. Instead, you include placeholders for these elements in your wireframes. This allows you to map out what content goes where in your product and how it all works. 

An analogy that I really like to use for Wireframes is the blueprint. In architecture, a blueprint outlines the layout of a building in a simplified visual diagram. This diagram includes things like walls, doors, windows, stairs and essentially all of the elements that make up the different floors of a building. Wireframes are the same thing, but for your website or app. They’re a simplified diagram of the elements that make the different pages of your product.

How to design Wireframes?

Now if a picture says a thousand words, a video must say a billion. That’s why below I’ve include a tutorial that explains the ins and outs of designing wireframes in Figma.

How to design Wireframes? 

Now if a picture says a thousand words, a video must say a billion. That’s why below I’ve include a tutorial that explains the ins and outs of designing wireframes in Figma.

The tutorial is part of the Butter Academy UX Design Course, and if you want to learn more about the course, click here. 

Why design Wireframes?

Now let’s look at why you should give a F about Wireframes. Actually, 2Fs for that matter, which are Feedback and Feasibility. 

Let’s start by looking at Feedback. Now the real value of Wireframes is that they allow you to get feedback on your designs before your product is even built. In other words, before you put those countless hours into UI Design and Development. Who are you getting feedback from? From both the business you’re creating the product for and the users. 

So on one side you have the business, who you can share your wireframes with to make sure your designs are aligned with their vision and objectives. 

Then on the other side you have your users, who you conduct user testing with to validate that your designs meet their needs. You’re also looking to flag major issues. 

Now the value of gathering this feedback from both sides is that you you can detect design problems early on and fix them in Wireframes, which is simple and inexpensive. As opposed to fixing problems in UI Design or Development, which is time-consuming and costly. 

There’s a great quote about Feedback that’s always stuck with me that’s highly relevant here. It’s from a book called Smashing UX Design by Desmond Allen and James Chudley. The quote is: 

One of the founding principles of UX Design is to fail first and fail early. -Smashing UX Design Book 

Let that sink in. Fail first and fail early. As you test out new ideas in Wireframes, present them to clients and validate with users, it’s likely that you’ll encounter failure. But don’t be discouraged. This is normal and in my opinion very positive. As long as you can detect these problems early on, when they’re still relatively easy to fix versus after your product launches, flops and changes mean a lot of design and development time. 

And unfortunately I learned this lesson the hard way. When I first started designing websites I would immediately jump into UI Design. No Wireframes and little or no research. And what would inevitably happen is that I would get feedback from clients or users and would end up having to make changes in UI Design and sometimes even Development. Which means twice the work. So that’s why now, I always design Wireframes first, then test, and then, only then, will I move into UI Design and Development. 

The second F is Feasibility. Wireframes are a great way to determine if what you’re designing is feasible in terms of Development and even UI Design. What does that mean exactly? As designers we’re always pushing to create something that’s never been done before. Which is great, and you should never be discouraged from doing this. 

HOWEVER. When coming up with these incredible ideas you also need to consider if what you’re designing can be done within the timing and budget constraints of the project. And this is where Wireframes come into play. Wireframes allow you to quickly get your ideas on paper and validate them with your UI Designers, Developers and Project Managers to make sure they’re actually feasible.

The tutorial is part of the Butter Academy UX Design Course, and if you want to learn more about the course, click here. 

Why design Wireframes?

Now let’s look at why you should give a F about Wireframes. Actually, 2Fs for that matter, which are Feedback and Feasibility.

Let’s start by looking at Feedback. Now the real value of Wireframes is that they allow you to get feedback on your designs before your product is even built. In other words, before you put those countless hours into UI Design and Development. Who are you getting feedback from? From both the business you’re creating the product for and the users. 

So on one side you have the business, who you can share your wireframes with to make sure your designs are aligned with their vision and objectives. 

Then on the other side you have your users, who you conduct user testing with to validate that your designs meet their needs. You’re also looking to flag major issues. 

Now the value of gathering this feedback from both sides is that you you can detect design problems early on and fix them in Wireframes, which is simple and inexpensive. As opposed to fixing problems in UI Design or Development, which is time-consuming and costly. 

There’s a great quote about Feedback that’s always stuck with me that’s highly relevant here. It’s from a book called Smashing UX Design by Desmond Allen and James Chudley. The quote is: 

One of the founding principles of UX Design is to fail first and fail early. 
-Smashing UX Design Book 

Let that sink in. Fail first and fail early. As you test out new ideas in Wireframes, present them to clients and validate with users, it’s likely that you’ll encounter failure. But don’t be discouraged. This is normal and in my opinion very positive. As long as you can detect these problems early on, when they’re still relatively easy to fix versus after your product launches, flops and changes mean a lot of design and development time. 

And unfortunately I learned this lesson the hard way. When I first started designing websites I would immediately jump into UI Design. No Wireframes and little or no research. And what would  inevitably happen is that I would get feedback from clients or users and would end up having to make changes in UI Design and sometimes even Development. Which means twice the work. So that’s why now, I always design Wireframes first, then test, and then, only then, will I move into UI Design and Development. 

The second F is Feasibility. Wireframes are a great way to determine if what you’re designing is feasible in terms of Development and even UI Design. What does that mean exactly? As designers we’re always pushing to create something that’s never been done before. Which is great, and you should never be discouraged from doing this. 

HOWEVER. When coming up with these incredible ideas you also need to consider if what you’re designing can be done within the timing and budget constraints of the project. And this is where Wireframes come into play. Wireframes allow you to quickly get your ideas on paper and validate them with your UI Designers, Developers and Project Managers to make sure they’re actually feasible.

Get started with our online UX course.

Get started with our online UX course.