Unlocking the power of wireframes: The key to successful website and mobile app design

Wireframes are an essential part of the design process providing a roadmap for user journeys.

This video features an in-depth look into wireframes and their benefits with Valeria, Lead Designer at 729 Solutions.

• What is a wireframe?
• Why should wireframes be created, and what are the benefits?
• What is the process for creating wireframes?
• What are some tips for creating useful wireframes?
• How can wireframes help with accessibility?
• What else should people know about wireframe creation?

Interview Transcript

James: Wireframes are an essential part of the design process providing a roadmap for user journeys. They allow for quick prototyping and testing of design ideas before moving on to the final stages of development. By using wireframes, you can ensure that your website or app is user-friendly and easy to navigate.

Joining me to take an in-depth look into wireframes and their benefits is Valeria, Lead Designer at 729 Solutions.

Thanks for joining me, Vale. 

Valeria: Hello James. 

What is a wireframe?

James: So let’s start things off with the obvious question. What is a wireframe? 

Valeria: Well, before I answer that, I would like to continue with the analogy of our celestial charts from the sitemaps interview.

I like to think that wireframes are the sky that scientists have been studying for thousand of years. And now all of us can use a celestial chart to find a galaxy. Of course, it is a little bit more complicated for eyes that aren’t used to seeing the sky, but the tool to help, to achieve, to help us to achieve the goal is there.

So the thing we cannot avoid is that all the elements that make up the sky were there before man began to discover and understand them. This leads us to the idea that every person, all people can build a site without the knowledge needed for it. But I will… But this lack of knowledge will cost a lot of time and money until you arrive to a proper user experience.

The thing is that we can say that building wireframes is like creating an imaginary lines in the sky. We won’t see the lines when we look up to the sky. But thanks to the scientist, we will be able to find the constellation. It is the same for sites. Once it’s built, you won’t see the structure, but it is still below all the images, the text, the call to actions. Everything is under… I mean, the structure is under all these nice things we can see. So this is more or less the analogy. 

After that, saying this introduction, I would like to say that [a wireframe] is a super simple, two dimensional illustration that shows the spacing of elements on the page. It outlines how the content is prioritized, what functionalities are available, and how the user will interact with it.

So it’s basically a structure without adding any considerations about colors, images, calls to action – any element. Just the structure of the site. 

Why should wireframes be created, and what are the benefits?

James: Let’s dive in a little bit more about why wireframes need to be created. What are the benefits to doing something like that? 

Valeria: Well, there are many benefits, to be honest. I will try to name the most important ones in this interview. First of all, they can be used to plan the growth of a website. It means that when you have the structure, you can easily… from that structure, easily grow to many, many, many other pages because you already have that structure that is gonna be the base of all of them.

They provide visual insight, especially for clients, which is good. What it means that when a clients arrive, they like to, they like to think, I mean, they are normally think what are they’re gonna see, but when you show them the wireframes, they realize they… They realize they have new things that they weren’t expecting.

So it helps us and the client to understand where we standing and what are the things which are really important on the site or the app or whatever thing we are building. They put a spotlight on usability. It means that, whenever we are working on wireframes, we are thinking about the journey, the user experience journey.

Not about colors, not about identity, not about branding, it’s just about what the user needs and how it’s the best way of giving the user what they need. 

They help, as well, designers to save time and resources because you can easily iterate with wireframes and make many, many sketches without losing time and money.

I normally… what I do normally is when, whenever before I even start sketching, I normally talk to the development team. I like to sit with them and talk about, “Okay, this is the project. What is the best things to approach this project?” After that, I start sketching, and once we’re sketching, I continue. I mean, I return to the developers to make another round, and then I continue with the wireframes.

And they’re really a good tool to help us catch problems early. As you are making the whole user experience, the whole flow, you can really see where there is a gap in this flow or where the users are unable to continue. I would like to say that it’s an easy way to iterate with the whole site or app you’re working with, with a really basic structure.

Oh, sorry, I forgot one which is important as well. It helps all of us, all the people who is involved in a project, which is stakeholders, developers, people from marketing, people from content, we are all in the same place. And we can see in this wireframe, which are the structure. Where are we standing and what things need to be improved or changed?

And, as well, for the stakeholders or the client itself, they can see exactly what they’re gonna get. 

James: What I’m getting from this is that, wireframes are the first tangible step. You know, taking it from a vision in somebody’s brain and actually designing it out, but not really designing it out, but making a tangible framework, I guess.

Or, the word is really a “wireframe”, something that people can actually look at that isn’t too far along the path of being designed. We haven’t spent a lot of time making designs, putting branding on it. It’s really about showing the structure, the underlying structure of either the app or the website, and people can review that without having those things kind of taint their opinion about what they’re seeing within the wireframe.

Valeria: Yeah. It is fair to say, and I like what you say, the sentence was something like, “It is design without the design” because it’s nice the way you say it because somehow… no, you are designing a structure. 

James: Yeah, I guess it’s design, but not in the traditional sense of what people think about design. You know, I think a lot of people, when they think about web design or even application design, they immediately go to “shapes and colors” as our former Creative Director used to like to say. 

Valeria: Yeah, I mean, when you think about design, I agree with you. Normally people think about just colors and nice shapes and nice illustrations, but it’s much deeper. I mean, when I think about design, I think about communication, and when you think about communication these days, you can think as well about user experience.

It means that you are designing the structure that user… to help people to understand what they have to do on the site. For example, I have a friend who has to make invoices for a government in United… in, sorry, in Spain, and he said to me, “It’s frustrating because it’s a new platform.” 

So I don’t know who made it. I don’t wanna criticize about that, but he said, “It’s frustrating for me because I don’t know what I have to do and I need to make my invoice.” So when we think about design, we’re thinking about these kind of things as well. We’re thinking about user experience where you think… we are thinking about how to help the users to understand what they have to do.

And this start really with the wireframes. If you build a good structure and you understand what is the flow of that structure, you’re really far away in your project. 

What is the process for creating wireframes?

James: Speaking of something tangible, let me share my screen here, and we can actually look at some wireframes and you can walk us through the actual process of wireframe creation.

Valeria: Okay. After I talk with the developers, as I said before, I normally put… or a good way of starting is to put all the things, all the elements, which are essential in your structure. So you need a header, you need a search, you need images, you need calls to action, you need icons, maybe an avatar for a profile.

I mean, all the things that you need and are essential for the site, you need to write them because normally you forget about the things. Doesn’t mean that if you forget you cannot add it later. But it’s a good way to understand which elements you will need in these wireframes. So once you have the elements, you start sketching, you can make paper wireframes, which are these ones that we are sharing right now.

And the good thing with paper wireframes is that you can easily draw and draw and draw and make many, many different sketches of the same screen. If you do it really fast, then you… even if you think you’re doing more or less the same thing, it will come new approaches and new things to think about these screens.

A good way of working after you start sketching is to select the best parts of each screen. Normally you will have 5, 6, 7, as many sketches as you want of the same screen, and normally you can select the best parts of each screen and build a new one with all these parts. In this case, I was selecting exactly the ones I like, but because I… when I was iterating in each sketch, I already knew more or less what I wanted, but it’s just an example. 

James: Yeah. This is a really good example of starting out with something that is relatively simple and not very time consuming, that allows you to iterate over it and make adjustments on the fly very, very quickly.

We are talking about somebody’s budget or the project, and so we just can’t, you know, like burn time, you know, going into a… directly into a design. So, at this point, would you actually show something like this to a client, or is this just for internal purposes, or is it really just for you? 

Valeria: Not the wire… not the paper wireframes, because normally I try many, many sketches, so I choose the two or three of them as much, and I transform them to digital wireframes and then I share them. Actually even before we arrive to the client, I like to share them with the development team. I like to go to developers with nice ideas and different approaches, and they say, “Okay Vale, this is great.” And normally I think that they can do everything. You know, I think they’re kind of magicians that they do everything. So, they do actually! But it’s about budget.

So they say to me, “Vale, we have a budget, we have a deadline, so we cannot do whatever we want in this project. So it’s not possible to go in this way. We better go in this way.” So normally it’s good to talk with them because imagine you can… you show an amazing flow, of wireframes to a client and then the client says, “Oh, I love it.”

And I say, “Oh, yeah, but it’s not on budget.” 

James: I mean, even. Let’s say you didn’t start off with wireframes, you know, and you went right into designs and you didn’t run those designs past the development team. And we went, you know, directly to the client and they were like, “That’s fantastic. Let’s go ahead and go with it.”

And the development team comes to develop the… it comes time for the development team to develop the application or the website, and they’re like, “That’s gonna take twice as much time than we originally estimated.” 

Valeria: And that’s the point. Exactly what you are saying right now about the importance of making wireframes, because you have them there. They’re really fast to do. They really fast to show and share. I mean, I share them with the developers, I share them with the clients and they can see it. And they can, they can really have a sense of what they want. And actually whenever they see the wireframes, they start understanding what are the important things and maybe things that they weren’t thinking or things that they didn’t know they need.

James: On my screen right now, I’m showing the wireframes that are on paper next to the wireframes that are digital, and I like this example because it shows the process from going from paper over to digital. You know, I’m seeing how the symbols on the paper version of the wire frame translate over into actual elements on the digital version.

And so in this case, you can get a really good sense of how this mobile application is gonna start to develop even these digital wireframes down below. It gives me a really good sense of the actual design. 

Valeria: Yeah. In this case. Yeah, I agree. But in this case, I understand what you… why you are showing these, and it’s a good, it’s a good example of how we move forward. But it, in this case, I think it’s missing a step in middle, which is a more simple digital wireframe because in this case, I love them, and I think they’re really simple, as you say, seriously speaking. But if you show icons and numbers and not “lorem ipsum” text to the clients, they start not putting the focus on what is important, and maybe they’re thinking, “Oh, this icon, I don’t like it.” Or “Do you think we have to go, I don’t know, from one to 10 numbers instead of one to 100?” And they start thinking about, it’s not that they’re not important, those things, they are, but at the very beginning, what we are trying to achieve is to have a great structure, a great flow, a great user experience.

After that, we can add as many things as we need, and of course, we can give the client, after this, a mock up, which is great, and has all the brand from the company, but they can say, “Oh, I don’t like the icon.” And in that moment it’s okay because, we are talking about icons at that point. 

James: Yeah. So at this point right now, on the wireframing stage, we really want them to focus on structure and flow. Not design. So yeah, there is… there is kind of this danger of throwing an icon or an element or even like, you know, I’m sure there may be times when a client’s gonna say, why is there a picture of a moon and a mountain?

Valeria: It’s true, it’s true. But you know, from our side as well, it’s difficult because, I mean, as designers, we are always tempted to put an icon or to… you know, because it’s more or less the same for us to put a circle with a cross than an icon. So you’re always tempted to do it, and you should hold your hands.

And as well with the text, when you put a menu and you start putting “Home”, I don’t know, “Women’s Clothes” or “Men’s Clothes”, they’re really focusing on those words. And what you wanna show is how the menu is gonna work. Do you want it working like this? Do you want a hamburger menu? How we gonna work with this menu?

You know? So, I will suggest that designers just don’t be tempted to put more than is necessary in a wireframe. Remember that it is a really simple… as much… as simple as we can do it, it’s better. 

What are some tips for creating useful wireframes?

James: What kind of tips can you give for creating useful wireframes? 

Valeria: Well, we were talking a little bit more before about it, but I will say that focus on the flow rather than on design or icons or whatever shape is not necessary.

Remember that they’re really… I would say like placeholders to understand the flow on the user experience. You can plan and rework and rework and rework. Because it’s easy and fast, and even if you think you have the idea already in your mind, when you start trying different sketches, you will understand that there are many ideas that they were back in your head without knowing that, and they come out whenever you’re sketching. 

Ah, as well, I will say that, don’t forget that you have to share this work normally with other people, which means that don’t hesitate adding errors and content and explaining what are these for, because sometimes we think that the other one is understanding what we are doing, and sometimes they don’t. So I mean, don’t take it for granted as the other one is understanding what you wanna say with that. So use arrows, use text. You explain what you’re doing there, what you wanna achieve. 

How can wireframes help with accessibility?

James: Let’s talk a little bit about accessibility and how they fit into wireframe design. 

Valeria: I think that accessibility is everywhere.

It’s when we open a door, it’s when we open a window, it is everywhere. And when we are thinking about a structure, it’s the best moment to understand that we are designing and making this app, as well, developing and creating, engineering, everything on this app or site is for every kind of people. So we cannot take it for granted that the people who is gonna see or interact with our project will have good sight or good hearing, or, I mean, you can have many impairments which are temporary or permanent. If we think about all the kind of people who has difficulties to interact with our site or app, we are actually thinking about everybody now because everybody will benefit from this… with these actions we’re gonna take.

For example, I don’t know, if you are driving at night and it’s raining, you’re gonna lose a lot of visibility, a lot. So if you already create this app or a site for somebody who has impairment… a sight impairment, it’s a granted, you know, it’s a win for everybody. So, thinking about accessibility is making a good project for everyone, I would say.

What else should people know about wireframe creation?

James: Is there anything else that we should know about creating wireframes? 

Valeria: The only thing I would like to add is that if you’re hesitating, just try them. If you never try them, just try them before starting a project. I mean, we sometimes think that we already know everything. All of us, you know, in some areas of our life, we think, “No, I already know it’s not gonna work for me. It’s not necessary,” for many, many things. I don’t have a good example for myself right now about things that I think, “Oh, I know about it,” and I tried and I realized, hey, it’s great. It makes me save time. It makes me, I don’t know, make a better result.

So I would say just try them if you’ve never tried them, I mean, you are not gonna lose anything. As much, you can save a lot. 

James: Valeria is our Lead Designer at 729 Solutions. Vale, thanks as always for an enlightening conversation. 

Valeria: Yeah, thank you James. It’s always nice to talk to you.