Wire Framing the Google Chrome Website Part 1

Lesson Details:

This course is brought to you by Appy Pie as part of our Academy series.
So what are we going to be wireframing we will be wireframing the Google Chrome web site exciting ain't it 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 a clear call to actions it has got clear differentiators what exactly sets chrome apart from the host of web browsers out there and since I'm running a 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 Paul sonic wait for it to load this was our the previous project let's just go here let's create a new project again let me just put a browser window over here containers browser let me drag and drop over here Chrome google.com 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 let us just zoom 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 we gonna do is we're gonna cream go here right let this be chrome let me just drag it up right exactly right then we got the four menu bars so what am I gonna do I'm gonna take some text some text I'm gonna type download position it right here I'm gonna click alt or option on this and want to drag so that I get a duplicate of it I'm gonna drive one more again an 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 and this is gonna be chromecast 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 arrow 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 slide over here which you can control the size of it so I'm gonna place it as small and also if you're having 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 gonna the new to position it right next to downloads fantastic I'm going to hold alt again and this time I'm gonna drag another copy I'm gonna drag another copy and I'm gonna drag another one so there we go we have it all properly setup I just want I'm 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 up here while you're trying to move a particular asset they are called guidelines that dynamic guidelines which are trying to align the asset to a reference frame it automatically adapts to it so we can make out that the guideline is clearly aligned to the menu bar wireframe so we've got the top menu bar already let's go back to Chrome and see we got some text here this is a header text so I'm gonna put let's see a big title yup we need a big title so what's this title get a fast free web browser I'm just gonna copy this and I'm gonna 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 drag 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 no too small that's easy to 20 and increase the size of the title to 60 excellent let's just raise it to 28 nice and we've got a button saying download Chrome so we go here and we type button I gotta drag this element or clicking it will just make it appear on the artboard or that I screen over here and we bring it down here we'll take download Chrome let me just drag it using shift if you use shift to drag an asset it kind of scales it evenly instead of you know if you don't use shift you kind of lose the spread so you're gonna come here I'll 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 type to let's go search in the text bar yep some text we're gonna bring it down here copy paste it and again go back to Chrome we have another line of text which is a link so let's just copy this and we're gonna this time we're gonna drag thumb-text' again we're gonna tie it in and this is a link we'll get to that later and then we have an image so let's take an image so okay I'm gonna type image there we go we got it there's a huge nice big screen we're gonna 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 bring the image and make it brick you can make out since I increase the webpage everything seems a little bit aligned to the left so I'm just going to command a or control 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 the screen of the Google Chrome web site.