This lesson is exclusive to members

Figma UI UX Design Essentials

What is Lo Fi Wireframe vs High Fidelity in Figma?

Daniel Walter Scott

Download Exercise Files



We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi everyone, in this video we're going to talk about the difference between Wireframes and High Fidelity, well, it's pretty easy, you can see. 

Wireframes are pretty budget, and High Fidelity mockups look really nice, and they'll call them Hi-Fi, Lo-Fi, generally though, they'll call them Wireframes, and Hi-Fi is High Fidelity. This one's going to be really quick and easy to make, and test, and do not try and skip, if you're new to UX, skipping the Wireframe section, of your kind of design process, at your peril. 

You can probably knock up a Wireframe in a few minutes, always high fidelity, you can end up kind of, like playing with a tracking, and leading for hours and hours, and you will not get a better, you know, test out of your potential kind of audience, you know, we're being assigned a task flow, we can really easily create a Wireframe, and test that task flow even on the app. I'll show you how to do that, like on a phone or on a website, super quick, super easy, and no distracting, like, "Oh, is that the right image, is that the right font?" "I'm not sure about the colors," you're talking about the task flow, like the actual mechanics of how this is built underneath, and we can test it quickly with Wireframes. 

Wireframes don't have to look like this, that's my Wireframe. Another Wireframe that I downloaded, a lot prettier, buttons got color in them, ooh, pick one color only, gray, and a color if you want, or stick to gray, you want to take away the design elements here, you spending time doing it, or at least, you know, the client going, "Oh, I don't like pink, or this blue is not the right blue," you want to take all of that out of the equation when you're designing Wireframes. 

Keep it simple, pick a boring font and a boring color. Another Wireframe, slightly nicer, yeah, somebody spent some time on lots of kind of headings and stuff, and yeah, you can, there's no reason you can't take your, you know, Wireframes further than what we do in this course, a really simple one, that's kind of removed all the text, another sketchy one, ooh, kind of sketchy. I think that's too close to Comic Sans for me, but I like the sketchy lines around the outside 

So they're all Lo-Fi Wireframes, Hi-Fi, it's in the same document, this one looks a lot prettier though, this one here, another Hi-Fi, a lot more time and effort going into this one, but for testing you only need the basics. So that's why we're doing Wireframes, and you have to do it because that's the beginning of the course, we're going to learn lots about how to use Figma, building the Wireframes, before we start building our super beautiful things, a little bit later in the course. 

All right, let's actually get started with Figma, and do something.