In today’s video, I’m gonna show you how to wireframe your website in 3 different ways. Doesn’t matter if you’re a freelancer, agency owner, designer, or if you’re a business owner just looking to revamp your website. I’m gonna show you 3 ways that you can wireframe it out so you can get something out the door quickly and efficiently.
For those of you who don’t know what a wireframe is, think of it as the blueprint or skeletal structure for your website. So think of it as what your website is going to look like without all the bells and whistles. All the imagery, visual content, as well as copy, will be missing–and this is essentially the framework for your website.
Most of you probably already know that, so I won’t do a deep dive into this, but just to give you an idea, think of it as the blueprint for your website. Just like your house has a blueprint for the floor plan, this is the same thing with your website. So that way, you can get all the thoughts and ideas from your competitive analysis or your brand discovery onto paper, and you can use this structure to build out your website as you go along the process.
The first way I want to show you is via Figma. Now, we all know that Figma is a prototyping tool that you can use to build out your wireframes. And so here’s an example for a museum website that we worked on.
Our wireframe’s a little bit different. We’ll probably say it’s more so mid fidelity, because we do include the overall look and feel of the website, as well as like, the typeface. In usual cases, you’ll just have the skeletal structure of the website: it’ll be the sections, how images and content are laid out, and so forth.
So this is an example of a low fidelity wireframe that we’ve created through Figma. Now, I won’t go into detail in regards to Figma as a platform, but man, it is an amazing tool that you can use to get the job done. For those not familiar with Figma, let me show you an example.
Figma allows you to design your websites and they’re made for the web, so the structure and all of the apps that you need are great for developers. Many developers using Webflow, Wordpress, or whichever CMS platform will find it easy to move the contents from Figma to an actual prototype.
Just to give you an example, here’s one of our wireframes that we’ve created here, as well. MoAd is a museum in San Francisco, we did their website, and this is the low fidelity wireframe that we created to showcase what that looks like. Now, you can use templates for this as well, there’s a ton of resources–and I’ll go into that in a few minutes–that you can provide to give you massive amounts of assets to use and leverage.
So if you don’t wanna start from scratch like us, this is pretty much templated within our agency, you can start with one of these platforms. One of those is this, called Untitled UI, this is an amazing Figma UI kit and design system. You can leverage this to build out your low fidelity wireframe for your website quickly and efficiently, hundreds of assets that you can use to do this–I mean, it’s pretty awesome, and they also have ready-to-use templates.
I won’t go into detail on how to use Figma, you can check out tons of Youtube videos out there. But this is probably the first and most efficient way to wireframe out your website.
Now, a lot of you might be intro to this, you might not necessarily be a designer, so you can use these other tips I’m about to provide you to get that done. But just to give you an example, Untitled UI, as well as UI8.net is another really great resource, you can actually click browse and you can go to UI kits, or you can go to wireframe kits.
Both of those will be apps that you can use, and here they have tons of things that you can use: from design systems to app wireframe UX kits, you’ve got additional wireframe libraries–there’s tons of resources here that are very, very low-priced as you can see, $24 and you can get access to this full wireframing library to create sections, modals, everything you need.
So if you’re more intro to this and you’re like, “Hey, you know, I don’t wanna build this from scratch like John’s agency. I’m gonna go go ahead and lean on this third-party platform,” Download it, and usually they come in Figma, Sketch, whatever platform you’re using, they’ll most likely have something that you can use–and again, just go to UIA.net, I’ll make sure that this is all in the notes as well below, so check that out.
Another really dope tool I’ve found was this company. They’ve made a wireframe kit that’s physical, so I can do this in real person–you can check them out in uxkits.com–but check this out you all. This is if I want to sit down and actually wireframe something out in real time using these cards.
The cards have different categories, you have general content, images, play, individuals, testimonials, random stuff, graphs, that type of thing. I’m gonna go ahead and build out a quick wireframe, just to show you how this works.
So, really quickly, you can see how I’ve wireframed out a quick and dirty page–I’ve got the header here, with images, a headline, then we have a testimonial section with copy here, we have a testimonial cycle here with the left and right arrows, then we have a tool tip and some bullet points here.
So I can quickly get these ideas out.
Last thing I want to show you all is probably one of my favorite ways to wireframe something out quickly. I’ve got my iPad here, I’ve got my Apple pencil, let me show you what I’ve got.
So the app is called Procreate, and this app just lets you create prototypes–again, it’s more of an artist app, I’m not the best at it, but I’m gonna show you how to use it efficiently. One example, here’s a wireframe that I sketched up for an NFT product. As you can see, it’s just a really great way to do this quickly and efficiently–especially if I have ideas in my head or we’ve done a competitive analysis, and I just have specific details I want to get out of my mind onto paper.
Let me show you all one example, I’m gonna go ahead and put together one. So I’m gonna hit Plus, for my settings I’m gonna go ahead and do my 4K setup. So I’ve got my wireframe here, I’m just gonna turn it a bit and I’m gonna go ahead and show you all what we got.
I’m going to go ahead and show you all what we’ve got, so here we go.
As you all can see, I’ve got my wireframe here all built out, I’ll add more specific details later on. But I just wanted to show you all how quickly I could sketch that out. Now I can also export this if I go to Gallery, I’ll go back and then I’m gonna hit Select, I’m gonna select my art, I’m gonna hit share and then I can share it in different formats–including jpeg, png, anything I need.
I’m gonna hit jpeg, and I’m gonna go ahead and export this out, I’m gonna airdrop this to my laptop, and I’m ready to go. That’s it!
Thank you all for checking out the content! As always, please Like, Comment, Subscribe. Drop a comment below, let me know how you like the content, let me know how you wireframe your websites, and I will catch you all next week.
