Hey, you have got all the tools to get started on your wireframing. But what are wireframes wireframes are basically black and white sketches of how your future website is going to look. For example, let's head over to Google and analyze some wireframes. This is a basic wireframe you can make out it's a made of rectangles. It's made up of black and white images seems like the diagram. Basically, it's showing where important content elements such as images, headers, buttons, all will be lined up on your future website.

It also gives you a sense of spatial awareness. You don't need a fancy tool such as balsamic to start generating wireframes. Here you can see that the designer has used his notebook and a pen to start sketching out some wireframes wireframes help you build a good website. You know how, basically you will be able to understand the user flow on your website. What the user is going to see the moment he lands on your webpage? How is he going to navigate the pages of your webpage?

And what is he going to see when he visits the different pages of your webpage. And you would be able to analyze potential roadblocks in the user interface way before you actually start developing it. So head over to balsamic in your Applications folder. And open balsamiq mockups. Yes, hit OK for your opening it for the first time. Yeah, I trust balsamic we open it.

And let's just wait for it to pop up. Fantastic, so you can make out balsamic has a pretty simple interface. So you have all the various assets over here for example, rectangle radio buttons. Containers are the basic frames. There's a browser container, an iPad container, an iPhone container if you are building a mobile app a smartphone, generic smartphone container forms buttons, pretty much a lot of tools, what you would require to build an amazing website are already here. It's got some social media icons, it's got some notification icons.

It's pretty, pretty robust. And you can make out it's got the iOS style sketches also. So if you need something, you can actually give it a search here, just a plus sign. And we get various type of pluses, which we can use all across our designs. So let me just show you how to just get started with it. So we're going to go to containers, we're gonna drag a browser window.

We're gonna name this my awesome wireframe. Right. Right. So it's www my awesome wireframe. And I'm going to go up to the corner. So clicking on the asset is going to Have a shaded gray, it's going to get highlighted.

And you can just drag it around. Since we will be designing for a widescreen 16 to nine ratio 16 inch to nine is basically 16 by nine, that is a height of nine and breadth of 16. Right. So widescreen monitors follow 16 inch tonight, I'm just gonna lock this. So basically what happened is like by right clicking, I got another pop up menu where I'm able to lock a particular container. Why did I do this because if this is able to move, then you know, if we do some selections, the browser window is going to move along.

For example, let me show you. Let me draw up a button right. And let me say click me. And we unlock this browser and I do a selection. I basically moving the wrong thing. I don't want this to happen.

I want the browser to be fixed where it is. So I hit this and I locked the browser and pretty much if you want, you can One lock the button, we don't need the button right now. So let me just show you a quick demo of the same. So let me just go up to text and we are going to be adding some text. I'm going to be adding Hey, hello world. And we're gonna make a big double clicking.

So if you're handling a text asset, you'll be able to click over here and you will be able to align it. So let's make it into center. And we'll increase the size to about 80. That's a little bit too small. Okay, this sounds good. Hello, well, I let's add a subtitle how wire framing going on.

It's pretty easy to use. interface, you'll be able to click and add any kind of elements. So let's see, let's add some more buttons. Let's add a button saying Yay. And if you're running a map, click the asset, hold option key and drag it. So you're basically duplicating it.

It's possible on Windows to. I mean, I think we have created our first wireframe. So let me just go right here. Let me bring it up to the center to bring in some nice spatial awareness. And yeah, so how's your wireframing going? I hope it's a yay