WireFraming Google Chrome Website - 1

Beginners Guide to Wireframes: A Mini-Course Wire framing The Google Chrome Website
14 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€64.96
List Price:  €92.81
You save:  €27.84
£55.77
List Price:  £79.68
You save:  £23.90
CA$95.68
List Price:  CA$136.70
You save:  CA$41.01
A$106.02
List Price:  A$151.47
You save:  A$45.44
S$94.41
List Price:  S$134.88
You save:  S$40.47
HK$546.80
List Price:  HK$781.18
You save:  HK$234.37
CHF 63.34
List Price:  CHF 90.49
You save:  CHF 27.15
NOK kr761.11
List Price:  NOK kr1,087.35
You save:  NOK kr326.23
DKK kr485.02
List Price:  DKK kr692.92
You save:  DKK kr207.89
NZ$116.42
List Price:  NZ$166.33
You save:  NZ$49.90
د.إ257.06
List Price:  د.إ367.25
You save:  د.إ110.18
৳7,660.01
List Price:  ৳10,943.35
You save:  ৳3,283.33
₹5,835.78
List Price:  ₹8,337.18
You save:  ₹2,501.40
RM331.75
List Price:  RM473.95
You save:  RM142.20
₦86,437.65
List Price:  ₦123,487.65
You save:  ₦37,050
₨19,416.31
List Price:  ₨27,738.77
You save:  ₨8,322.46
฿2,572.74
List Price:  ฿3,675.50
You save:  ฿1,102.76
₺2,264.43
List Price:  ₺3,235.04
You save:  ₺970.61
B$356.70
List Price:  B$509.60
You save:  B$152.89
R1,295.44
List Price:  R1,850.72
You save:  R555.27
Лв127.05
List Price:  Лв181.51
You save:  Лв54.46
₩94,909.58
List Price:  ₩135,590.93
You save:  ₩40,681.35
₪259.50
List Price:  ₪370.74
You save:  ₪111.23
₱3,993.87
List Price:  ₱5,705.78
You save:  ₱1,711.90
¥10,712.31
List Price:  ¥15,303.96
You save:  ¥4,591.65
MX$1,187.89
List Price:  MX$1,697.07
You save:  MX$509.17
QR254.57
List Price:  QR363.69
You save:  QR109.12
P950.82
List Price:  P1,358.38
You save:  P407.55
KSh9,247.76
List Price:  KSh13,211.65
You save:  KSh3,963.89
E£3,352.12
List Price:  E£4,788.95
You save:  E£1,436.83
ብር4,006.43
List Price:  ብር5,723.72
You save:  ብር1,717.28
Kz58,511.64
List Price:  Kz83,591.64
You save:  Kz25,080
CLP$65,950.47
List Price:  CLP$94,219
You save:  CLP$28,268.52
CN¥506.53
List Price:  CN¥723.64
You save:  CN¥217.11
RD$4,055.76
List Price:  RD$5,794.19
You save:  RD$1,738.43
DA9,420.16
List Price:  DA13,457.95
You save:  DA4,037.79
FJ$157.70
List Price:  FJ$225.30
You save:  FJ$67.59
Q542.52
List Price:  Q775.06
You save:  Q232.54
GY$14,601.52
List Price:  GY$20,860.22
You save:  GY$6,258.69
ISK kr9,764.23
List Price:  ISK kr13,949.49
You save:  ISK kr4,185.26
DH703.98
List Price:  DH1,005.73
You save:  DH301.75
L1,236.34
List Price:  L1,766.28
You save:  L529.93
ден3,998.59
List Price:  ден5,712.52
You save:  ден1,713.92
MOP$561.77
List Price:  MOP$802.57
You save:  MOP$240.79
N$1,291.99
List Price:  N$1,845.78
You save:  N$553.78
C$2,569.36
List Price:  C$3,670.67
You save:  C$1,101.31
रु9,319.09
List Price:  रु13,313.56
You save:  रु3,994.46
S/260.54
List Price:  S/372.22
You save:  S/111.67
K269.79
List Price:  K385.44
You save:  K115.64
SAR262.50
List Price:  SAR375.02
You save:  SAR112.51
ZK1,882.68
List Price:  ZK2,689.66
You save:  ZK806.98
L323.40
List Price:  L462.03
You save:  L138.62
Kč1,628.77
List Price:  Kč2,326.92
You save:  Kč698.14
Ft25,305.79
List Price:  Ft36,152.68
You save:  Ft10,846.88
SEK kr755.02
List Price:  SEK kr1,078.64
You save:  SEK kr323.62
ARS$61,468.17
List Price:  ARS$87,815.44
You save:  ARS$26,347.26
Bs483.33
List Price:  Bs690.51
You save:  Bs207.17
COP$271,845.87
List Price:  COP$388,367.89
You save:  COP$116,522.02
₡35,672.25
List Price:  ₡50,962.55
You save:  ₡15,290.29
L1,724.16
List Price:  L2,463.20
You save:  L739.03
₲522,510.75
List Price:  ₲746,475.93
You save:  ₲223,965.17
$U2,674.97
List Price:  $U3,821.56
You save:  $U1,146.58
zł281.37
List Price:  zł401.98
You save:  zł120.60
Already have an account? Log In

Transcript

So now, we need to create a new screen. So let me just try to duplicate it. So I'm going to come here and click Duplicate. I'm going to get rid of most of these. Let's have a look before we delete anything. No, this is pretty much what we have right now.

So let's just click here. The browser is locked, so we're not going to unlock it. Now what do we have? We have another title. So we're going to come here, we're going to take title. Click it, oh, big title, we put the big title over here.

And paste it, browse, Foster. And we got an image. So again, we're gonna go here, image printed here again, I'm going to expand it and place it at the center. Then we got a small title. So let me go with the subtitle over here. Let me just drag it.

And I'm going to be such instantly. Let me just zoom out a bit because I'm feeling a little bit constrained with the screen real estate. So let me just stick these two a little bit up. Again, I hold Shift, I take it up, I take up the small subtitle, and I'm going to hit option and I'm going to 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.

I got a copy the same paste it here. I'm gonna be I'm just not happy with the text size. So I'm just gonna come in here, right increase it to 16. Let's have a look. Now, still feels a little bit something's missing. Let me just try to reduce the size.

I'm gonna copy the same thing. 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're going to duplicate the same. And we're gonna come here, pick up where you left off. Pretty much the same thing. We're going to copy this Please sit again in the center user guidelines for reference. Oh, I have a straight arrow mark which we don't need. Do we have it here?

Yes, we do. We're going to 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 going to delete these.

Bring the image down. Drag it up a bit. and copy this and let's paste it. Alright, again, we have same type, so we're gonna create a duplicate. Make chrome yours. We have made chrome yours, paste it.

I can drag it up to the center. Copy this, position it a little bit better. And finally, the last duplicate. And I'm gonna delete this. So how do we have it so we have an image. So we're gonna 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 a title, so we're gonna drag title. Get Chrome for Mac. I'll paste it to Chrome from back. One browser there's a subtitle The size is a little bit too big. So let's reduce it to 16 to small 18 we have a button.

Again, the call to action, you don't need to install 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 OS 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 Ctrl C or Ctrl V if you're on Windows. And we have got the same thing over here. The same same, same button. Let's see and 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 going to do that same too. So let's go here. Let's add a line. And we are going to 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. I'm going to hold Alt or Option and bring it here. It's I think it's businesses just over and let me just drag it back over here. Education, double clicking, education very, very important partners Latest News.

Just let me just see how well they're spaced out. So that's based off pretty evenly. Let me just go here. Let me start by using shift. I move it to the corner. I move this to the corner.

Education. Oops, I click on businesses. They look pretty evenly spaced out. And now we are going to add a list copy this We did not want the border. So we remove that border. So we've got a list.

All of these are links. I'm not happy with the size. So I am going to increase it to 15. Let's make it 16. Yep, looks good. And I'm going to drag this up over here to the businesses using again, option.

I'm going to duplicate it. Bring these lists. I'm gonna double click, I'm gonna paste it here. I'm going to use these three, again, track and I'll paste it. I'm going to paste it again. And latest news, oops, I did not want to go to the Google Plus page of Chrome to people even use Google Plus, I don't know.

I got to go to Chrome log. net. We'll check it out later. Let's go here to option. Paste it again. Yep, we got the footer.

But we can make our there's another line over here. So to be having a screen real estate, let's see. So again, I'm going to click on the horizontal rule, I'm gonna hit option and I'm gonna drag a new one by below, let me just give some spacing Hello there. And we have a bunch of text, an icon and notice on G Plus and a drop down list. So we're going to use the same stuff. You're gonna take some text.

And I'm just gonna copy this entire line of text and paste it. We have an icon. So let's just go here at Google Plus. Yep, we have a G Plus icon. We're going to drag it up here. We notice it is way too big for us.

So we're going to come here, go to the slider and really use it to, I think, excess. Nope, that's too small. Let's have it. Let's have s, drag it down here. Let's see. It's we have another text with another icon.

Just going to copy this address on Again, we're gonna insert some text. Where's my best buddy some text? I already clicked it. I'll paste it. Again, we need Google Plus. Yep, we have here we have it.

It's filled up icon. So we have Google Plus official. Drag it up over here. Again, drag the slider up to x s. And what else am I 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 going to drag the combo box Click on it, we get the combo box over here took that long. And what are we gonna name it is? That's just English United States.

Excellent. I am loving it. So we have completed the mock up. 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 moderate, 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 website.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.