Wire Framing the Google Chrome Website Part 2

Lesson Details:

This course is brought to you by Appy Pie as part of our Academy series so now we need to create a new screen so let me just try to duplicate it so I'm gonna cure come here and click duplicate I'm gonna get rid of most of these let's have a look before we delete anything no there's a pretty much what we have right now so that's just right here the browser is locked so we're not gonna unlock it now what do we have we have another title so you're gonna come here we're gonna take title click it I'll big title you put the big title over here and paste it browse faster and we got an image so again we're gonna go here hit image bring it here again I am going to expand it and place it at the center then we got a small title so I mean cope with the subtitle over here let me just drag it and I'm gonna be search instantly let me just zoom out a bit because I'm feeling a little bit constrainted with the screen real estate so let me just take these two a little bit up again I hold shift and take it up I take up the small subtitle and I'm gonna hit option and I'm gonna create a duplicate of it and I come back to Chrome and see type less over here I'm gonna copy I'm gonna paste it so now you can see that there's a paragraph type of text over here how do we get that so here we go there we have it balsamic has everything for us we're going to copy the same not paste it here I let it be I'm just not happy with the deck size so I'm just gonna come in here I increase it to 16 now let's have a look now still feels a little bit when something's missing let me just try to reduce the size I'm gonna copy the same thing uh we're gonna bring it up okay I'll copy the same thing over here and let's copy this start using autofill and we have completed screen - now we are gonna duplicate the same anyway I'm gonna come here pick up where you left off pretty much the same thing we're gonna copy this come here place it again in the center use the guidelines for a reference oh I have a stray arrow mark which we don't need do we have it here yes we do you're gonna delete this okay again we have an image over here but there's a difference below the image we have a paragraph of text and no subtitles so we're gonna delete these bring the image down drag it up a bit and copy this and let's paste it and again we have the same type so we're gonna create a duplicate make chrome yours we have made chrome yours we paste it again drag it up to the center copy this position it a little bit better and finally the last duplicate we're gonna delete this so how do we have it so we have an image so when I delete this we're gonna delete this we're gonna take this resize it so that it pretty much aligns to what we see on the screen and we have it title sorry I drag title get chrome fallback I pasted it get chrome from back one browser there's a subtitle the size is a little bit too big so let's reduce it to you 16 to small 18 we have a button again the call to action you don't need to insert a new one let's go here copy this bring it back down paste it download Chrome again we have the same line of text for mac os9 10.9 or later copy it bring it down paste it I'm using command C and command V for it and you can use control C or control V if you're on Windows and we have got the same thing over here the same same same button that's it let's see and we're not paste it here so we forgot one important element and that element is the footer region over here which has got some important text and also various important links so we are gonna do the same - so let's go here that's had a line and we are gonna have something called the horizontal separator yes there we go so we're gonna bring this here we're gonna position it here and drag it all the way over here let's go back to Chrome and see that we have small subtitles over here but important links so let's come over here again let's take a text and let's explore so there is something called a link bar which you can add over here but I do not recommend it right now so let's just go to the some text type products oops brought dots I want to hold alt or option and bring it here it's I think it's businesses so it's just over and let me just drag it back over here education double-click it education very very important tab and partners latest news so I'm just let me just see how well that's based out so that spaced out pretty evenly let me just go here let me start right using shift I move it to the corner I move this to the corner a little education don't this oops I click on businesses they look pretty evenly spaced out and now we are going to add a list copy this and after we did not want the border so we're gonna remove that border so we got a list all of these are links I'm not happy with the size so I am going to increase it to about 15 let's make it 16 yep looks good and I'm gonna drag this up over here to the businesses using again option I'm going to duplicate it bring these lists or a double click or paste it here and I'm going to use these three again drag then I'll paste it I'm gonna paste it again and latest news oops I did not want to go to the Google Plus page of Chrome do people even use Google Plus I don't know yeah let's go to Chrome log now we'll check it out later let's come over here hit option paste it again yup we got the footer but we can make out there's another line over here so to be have enough screen real estate let's see so again I'm gonna click on the horizontal rule I'm gonna hit option and I'm gonna drag a new one right below let me just give some spacing over that and we have a bunch of text an icon and add us on G+ and a drop down list so we're gonna use the same stuff so if you're gonna take some text and now we're just gonna copy this entire line of text and paste it we have an icon so let's just go here and hit Google+ yep we have a G+ icon you're gonna drag it up here we notice it as waybig for us so we're gonna come here go to the slider and reuse it - I think XS nope that's too small let's fav it let's have that s drag it down here let's see it's we have another text with another icon so I'm just gonna copy this add this on again we're gonna insert some text where is my best buddy some text yep I won't reject it I'll paste it and again we need a Google+ yeah we have here we have it it's a filled up icon so we have Google+ official I'm gonna drag it up over here again drag the slider up to XS and what does that mean missing yep we have to drop down so how do we insert the drop down it's pretty easy we come over here we go to drop down so in balsamic it's called a combo box so I'm just gonna drag the combo box click on it we get the combo box over here it's a bit long and what are we gonna name it as let's just type English United States excellent I am loving it so we have completed the markups just a quick trivia if you notice there's something called chromium over here and Chrome OS but chromium so if you ever wondered what the difference between chromium and chrome is that chromium is an open source platform of the Chrome web browser chrome web browser has a lot of Google specific applications whereas chromium is open source if you are a developer you'll be able to take chromium and mod it and do whatever you want with it that's a bit of trivia for you so yep we are finished with this beautiful wireframe of the Google Chrome web site.