In today’s video, I’m talking about the biggest differences between low-fidelity or LOFI web design and HIFI or high-fidelity web design. Let’s dive in!
So the biggest difference between LOFI and HIFI is that high-fidelity wireframes provide you the framework and are the closest things to a finalized website. Low-fidelity helps you and your team visualize how content will be laid out on a website, and the visual aspects of that would look like on a desktop, mobile, or other breakpoints.
So in today’s video, I’m gonna dive into my computer, I’m gonna show you what our wireframes look like in LOFI, I’m going to show you the process we walk clients through to get to final product, and how we mitigate issues as we move through the progress of a project, with these simple solutions.
I’m also going to provide links to some of our favorite UI kits, some of our favorite tools, and some Figma files that will be helpful for you through your journey. Let’s go ahead and jump into my computer, and get started.
When it comes to a visual component, there’s probably a big difference between high-fidelity and low-fidelity.
So here’s an example of a low-fidelity website design that we worked on for a client. As you can see, image elements, a lot of the copy, a lot of the functionality, is missing. So this is bare bones, straight up, here’s the website.
The reason we work with low-fidelity–or the reason why most agencies or companies work in low-fidelity–is because it strips away all the features and the visuals of the site and gives you a straight up, “Hey, these are the components for every section of the page. This is what it could potentially look like.”
And users or the end client isn’t focused on, “Okay, I need to pay attention to how this is visually appealing,” it’s moreso, “Hey, here’s the functionally and overall breakdown of the site and what it looks like as a whole, and here are all the components there.”
Now what we’ve done in recent–probably like the last six–months is we’ve actually gotten rid of low-fidelity. So in usual cases, as an agency, you’ll go through a brand discovery, you’ll develop some type of site map, and then you’ll work on the low-fidelity design, and then high-fidelity–meaning what the site will actually look like.
To show you the main difference here, this is a low-fidelity design–this could even be considered a mid-fidelity, but that’s for another video–and then HIFI looks more like this. So it shows the actual image content, the copy, the actual layout and structure of the website, visually and how it’s going to look in a real environment and a website.
But you can also prototype this by adding features, adding iconography, and making this really interactive, so that way the end user can see how the actual website will function in real time. As you can see, all the content and components are here, and this is what the site will actually look like. So high-fidelity, and low-fidelity.
Now because we work a lot with startups, they’re looking to ideate design and develop pretty quickly. So what we’ve found is, in low-fidelity–especially with startups that are looking to move toward an MVP or a Minimum Viable Product, they want to move fast and ideate quickly.
And ultimately, with low-fidelity, we can go into high-fidelity, go into development, and then we can start testing things using Google Analytics and Microsoft Clarity–like I talk about right here–to make informed decisions on how you wanna make these changes to a website.
So we’ve really decided to kinda mix this part of the process, and I’ll tell you the main reason why.
The first thing we have to have is some type of design guide or design system. Here’s an example of a brand that we’re working on right now. As you can see, we have the typeface and typography, we’ve got the different heading sizes and kerning for these letters and fonts, we also have the color palettes, as well as the brand mark, and any buttons and links that we might need.
Now this is a very bare bones design guide or design system, we have more detailed ones and more examples that we can show. Here’s another one that’s pretty simple as well, where it shows the color palette, links, some of the iconography that we use throughout the website, and so we have to have this before we can go into high-fidelity.
So if you think about it, if we’re going to skip low-fidelity, you have to have a solid and cohesive design system, style guide, or something to work from, to be able to work on that high-fidelity that’s been approved by the clients.
Because one issue that you might get into if you do low-fidelity designs–here’s another low-fidelity wireframe as well, here’s a site map, so you all can see what that looks like, just a low-fidelity wireframe.
So the main reason is, if we don’t have that design system, we can’t go into high-fidelity because we don’t have anything specific to work from. We need those visual assets and visual cues to be able to design something beautiful that the client will love and that the end user will love.
And that’s the main thing that we tell clients. Yeah, we want to make sure that it’s aesthetically beautiful, but we want to make sure that we’re making informed decisions based on what the client really needs in regards to the end product.
So I showed you examples of a low-fidelity, showed you examples of a high-fidelity, I showed you another low-fidelity here, this is an example. This process is really just–I wouldn’t say hindered, but has prolonged the process. And because we work with startups–companies that need to move quickly–we go straight into high-fidelity.
Now this might be different for larger companies, for companies that are more established. They have to go through low-fidelity because they have to make sure that everything in every department agrees to how the site is structured, before they go into HIFI.
So they wanna make sure that they do that–and that’s okay. Everyone has their different way of doing things and accomplishing these goals. But ultimately, what’s worked really well for us is going straight into high-fidelity after that approval.
So I’m gonna walk you right through real quick.
The first thing we do is, we do the site map–I’m just gonna pull one up here so you can see an example. And the site map just has the overall, like, blueprint of the site–like display and layout. So you can see we have this cool little table here, this is the page, these are the sections which are delineated by these black lines, and anything in green is gonna be linked to the CMS.
Because we use Webflow as our website builder, a lot of the CMS content will be integrated there as well.
So you can see, they can get an idea of, “Okay this is how the sections of the site will look.”
Now once we do this, then we work on the design system. We’ve actually created a little template for our design systems as well, which you can grab in a link below, where it creates a very simple, one-page design system that you can use on your website.
So here’s the link, you can see it right here on our website, you just go to Preview, and you can check it out. This is the example, so you can get an introduction on the brand, you can take the logo and be able to grab this for any projects that you might have, typeface, font sizing. This is the blueprint for all of the design assets and components on a website.
I talk about this in another video right here, if you want to check it out.
So we have the site map, we have the design system, now we can go straight into high-fidelity based on the site map that we created and based on the design system that we’ve developed. And this helps us move really quickly through the process. We can do the site map, and then we can go straight into designing that website once we have that design system set up.
And just to give you one more tool, I did want to share Untitled UI, which is a UI kit and design system for Figma. If you’re like, “Well, where do I start, I don’t know where to start, how do I begin developing this process,” You can use Figma–which is a prototyping tool and platform to go ahead and do this.
Untitled UI is severely cheap: it’s only at $99 for the Pro version. And it’s a single license, so you can use it as many times as you need to.
But this thing is pretty amazing. They have a ton of different components that you can use–from color styles, typography styles, logos. If you build using this UI kit, you’re pretty much set and ready to go.
Thank you all for checking out the video content. As always, make sure you Like, Subscribe, drop a Comment below. Let me know how you feel and tell me your process: how are you doing your low-fidelity wireframes, how are you segwaying into high-fidelity, and how you’re creating dope websites for your clients and yourself. I’ll see you all next week.
