So what are we going to be wireframing? We will be wireframing, the Google Chrome website. Exciting. So let's get started. So let's head over to chrome.google.com. So this is a wireframe we will be doing in the beginning.

This is a beautiful website. I love it. It's clean. It's got great typography. And it's just really appealing. It's got clear call to actions, it has got clear differentiators, what exactly sets chrome apart from the host of other browsers out there.

And since I'm running on Mac, it automatically identifies the operating system I am on and automatically gives me a download link. This is a good website. So let's get started. So let's head over to balsamic Wait for it to load. This was our previous project. Let's just go here.

Let's create a new project. Again, let me just put up a browser window over here, containers. browser, let me drag and drop over here. chrome.google.com right, we're gonna set it up. We're gonna drag it, make sure it's nice white screen for us. That's a little bit too much.

It's okay, that is just soom out a bit. We got it. So let me position this in the center. and lock it. Let's have Google Chrome on the browser right now. So we got the logo over here.

We got four drop down menus over here. So what are we going to do go here, right? Let this be Chrome. Let me just drag it up. Right, exactly right. Then we got the four minute bars.

So what am I gonna do? I'm gonna take some text, some text, type, download, position it right here. I'm gonna click alt, or option on this. I'm gonna drag so that I get a duplicate of it. I'm gonna try one more, again, option, so that I get four. And now let's go back, set up Chromebooks, and Chromecast.

So this is going to be set up. Chromebooks, Chromebooks. And let me just pull this up right here. This can be chrome cast. Right? So this is pretty cool.

Now we do notice that we have an arrow mark over here. So let's try to search for arrow, I have an arrow, and we got an angle down. This is what we want. Exactly. So we can notice that there's a little bit bigger than we want. So if a particular object is really big, especially it works with icons, you have a slider here, which you can control the size of it.

So I'm gonna place it as small. And also if you're having a difficulty positioning it in tight spaces, you can just click on the object and use your arrow keys to move it and using shift will move it significantly. So I'm going to position it right next to downloads. Fantastic. I'm going to hold all together and this time, I'm going to drag another copy I'm going to drag another copy. And I'm gonna drag another one.

So there we go, we have it all properly set up. I just want them just a little bit pissed off at the spacing here. So let me just try to move it around a little bit, I get nice and even, you can notice that a few lines appear while you're trying to move a particular asset. They're called guidelines, that dynamic guidelines, which are trying to align the asset to a reference frame. It automatically adapts to it. So you can make out that the guideline is clearly aligned to the menu bar by frame.

So we've got the top menu bar ready. Let's go back to Chrome. And see we've got some text here. This is a header text. So I'm gonna put let's see a big title. Yep.

We need a big title. So what's this title? Get a fast free web browser. I'm just gonna copy this I'm going to paste it. There we go. And then we've got some subtitles over here.

So I'm just gonna copy this again. And I come back to balsamic. I'm gonna track the subtitle in the text called text bar, and I'm gonna paste it again. Super. This is a little bit too big. So we're gonna come here, reduce the size to 14, nope, too small.

Let's reduce it to 20 and increase the size of the title to 60. Excellent. That's just raise it up to 28 really nice. And we've got a button saying download Chrome. So we go here and we type button going to drag this element or clicking it will just make it appear on the artboard or that screen over here and we bring it down here. Download Chrome.

Let me just drag it using shift. If you use shift to drag an asset, it kind of scales it evenly and stuff. You know, if you don't use shift, you can lose the spread. So we're gonna come here, just say download Chrome. The guideline is automatically telling me it is in the center. Now, I think we need another line of text.

So we're gonna take this tie. Let's go search in the text bar. Yep, some text. Bring it down here. Copy Paste it. I can go back to Chrome, we have another line of text, which is actually a link.

So let's just copy this. And we're going to this time, we're going to drag some text again, we're going to type and, and this is a link, we'll get to that later. And then we have an image. So let's take an image. So again, I'm going to type image. There we go.

We thought it was a huge, nice big screen. track the size. That's a little bit too big for us, right. So let's just go back to the browser, unlock the browser. increase the size so that we get some more real estate screen real estate, lock the browser again. And now we print the image and make it break.

They can make out since I increased the webpage, everything seems a little bit aligned to the left. So I'm just gonna Command A or Ctrl A, and move everything back to the center. Yes, we got the guideline again, telling me that hey, you are pretty much at the center. Let me click outside. Let me try to move this back. And we have just completed the first screen of the Google Chrome website.