1
00:00:00,600 --> 00:00:02,943
So far, we've just added a button.

2
00:00:02,943 --> 00:00:07,066
We're going to add a lot more and while
it might be tempting to think about what

3
00:00:07,066 --> 00:00:09,540
the site might look like
on a desktop browser,

4
00:00:09,540 --> 00:00:12,406
we're going to start with
the mobile version first.

5
00:00:12,406 --> 00:00:20,330
A desktop or a laptop screen has a lot
more space than a handheld smart phone.

6
00:00:20,330 --> 00:00:25,910
When you create a desktop website and
work your way back to a mobile design,

7
00:00:25,910 --> 00:00:29,670
there's a temptation to fill
in all the available space.

8
00:00:29,670 --> 00:00:34,010
Then it's hard to condense all of
those elements onto the screen

9
00:00:34,010 --> 00:00:35,820
of a mobile device.

10
00:00:35,820 --> 00:00:39,950
Thinking mobile first is a lot
easier because you can start

11
00:00:39,950 --> 00:00:44,520
with the simplest version that includes
the most important details and

12
00:00:44,520 --> 00:00:49,220
then expand on those ideas to
create the desktop design.

13
00:00:49,220 --> 00:00:49,850
Let's keep going.

14
00:00:51,570 --> 00:00:55,590
Beyond the call to action, the next
two important things are capturing

15
00:00:55,590 --> 00:01:00,510
the attention of the customer and
educating them about the product.

16
00:01:00,510 --> 00:01:04,120
We can't educate unless we
have their attention first.

17
00:01:04,120 --> 00:01:08,670
So let's grab them with nice,
large product photos.

18
00:01:08,670 --> 00:01:13,830
Because we're on a mobile screen where
horizontal space is usually limited and

19
00:01:13,830 --> 00:01:17,820
we want both the photos and
the call to action to be large,

20
00:01:17,820 --> 00:01:20,870
we probably shouldn't
put them side-by-side.

21
00:01:20,870 --> 00:01:25,130
So let's add the product
photos just above the button.

22
00:01:26,460 --> 00:01:31,570
So up here from my tools, I'll go to Media

23
00:01:32,840 --> 00:01:36,460
and drag out an image component here.

24
00:01:37,960 --> 00:01:43,080
And this will just be a blank image,
we can resize this however we'd like.

25
00:01:44,406 --> 00:01:47,100
I'm gonna move this preorder
button a little bit.

26
00:01:49,160 --> 00:01:51,530
And I think that looks pretty good.

27
00:01:53,230 --> 00:01:58,250
Now let's zoom out a bit
to view more of the canvas.

28
00:01:58,250 --> 00:02:03,650
To zoom in and out on Windows, hit
the CTRL key and the plus or minus keys.

29
00:02:03,650 --> 00:02:09,600
On a Mac, it's CMD and
the plus or minus keys.

30
00:02:09,600 --> 00:02:13,860
So I'll just zoom out
a little bit here and

31
00:02:13,860 --> 00:02:17,530
I'll move these two things to
get us some more space to work.

32
00:02:18,880 --> 00:02:20,710
This is looking good but right now,

33
00:02:20,710 --> 00:02:25,540
it's not immediately clear what this is,
or what we're pre-ordering.

34
00:02:25,540 --> 00:02:29,970
This is where we can lean on some
of the copy to do the explaining.

35
00:02:31,140 --> 00:02:34,720
So in the document we received
from the marketing and

36
00:02:34,720 --> 00:02:39,862
product teams, say we have a tagline, so

37
00:02:39,862 --> 00:02:44,587
we'll drag out some text here and it says,

38
00:02:44,587 --> 00:02:51,292
keep your lawn healthy period and
funky exclamation point.

39
00:02:51,292 --> 00:02:55,489
Right now this is too small, so

40
00:02:55,489 --> 00:03:02,440
I'll scroll down and
increase the font size here.

41
00:03:02,440 --> 00:03:04,280
Let's maybe do 24.

42
00:03:04,280 --> 00:03:08,307
I think that looks good.

43
00:03:09,365 --> 00:03:12,105
And let's make sure this is centered so

44
00:03:12,105 --> 00:03:16,215
that no matter how we resize this,
the text will always be in the middle.

45
00:03:16,215 --> 00:03:18,195
And then we can drag this around and

46
00:03:18,195 --> 00:03:23,745
use the smart guides in Balsamiq mock ups
to help us center it with other elements.

47
00:03:25,180 --> 00:03:27,660
This might also be a good place to mention

48
00:03:27,660 --> 00:03:31,230
when this product is going to
be available, so let's add that.

49
00:03:31,230 --> 00:03:35,384
I'll drag out some more text here and

50
00:03:35,384 --> 00:03:39,280
we'll say, Coming this Summer.

51
00:03:39,280 --> 00:03:43,910
And again, this is a little too small,
so let’s make that bigger

52
00:03:45,800 --> 00:03:51,150
and we'll put that just to
the left of the button here.

53
00:03:51,150 --> 00:03:55,810
And let’s just zoom in a little bit,
so this is easier to see.

54
00:03:57,140 --> 00:03:57,640
There we go.

55
00:03:59,000 --> 00:04:00,860
When people are pre-ordering something,

56
00:04:00,860 --> 00:04:04,720
they want to know when they
can expect the product.

57
00:04:04,720 --> 00:04:08,030
So the visual proximity
of coming this summer,

58
00:04:08,030 --> 00:04:12,000
and the pre-order button
is actually communicating.

59
00:04:12,000 --> 00:04:16,330
If we were to reverse the positions
of these two text blocks,

60
00:04:17,490 --> 00:04:22,970
it might still work but the context
might be a bit more difficult to read.

61
00:04:22,970 --> 00:04:27,490
If people were to see coming this
summer as the first thing they read,

62
00:04:27,490 --> 00:04:29,050
it might be confusing.

63
00:04:29,050 --> 00:04:31,720
What's coming this summer exactly?

64
00:04:31,720 --> 00:04:35,179
Now let's add some of the remaining bits.

65
00:04:35,179 --> 00:04:39,860
Since this is the mobile version
of the site, let's make a spot for

66
00:04:39,860 --> 00:04:42,630
a small product logo in the upper left.

67
00:04:42,630 --> 00:04:48,292
So I will go to images here or
media rather and grab an image,

68
00:04:48,292 --> 00:04:53,277
and let's just make that nice and
small like that and

69
00:04:53,277 --> 00:04:58,850
keep it up here on the left,
that will be our product logo.

70
00:05:00,050 --> 00:05:05,570
And because this is part of a larger
website, we want add some navigation.

71
00:05:06,610 --> 00:05:10,990
So let's add a menu button
in the upper right here,

72
00:05:10,990 --> 00:05:13,890
I'll drag out the icon component here.

73
00:05:18,530 --> 00:05:22,640
And then we can search for
an icon that we want.

74
00:05:22,640 --> 00:05:27,360
So I'll type in something like menu,
and there is our little three line

75
00:05:28,720 --> 00:05:31,721
hamburger menu and
we can change the size of it here and

76
00:05:31,721 --> 00:05:36,470
Balsamiq Mockups will change it to medium,
I think that's pretty good.

77
00:05:36,470 --> 00:05:39,750
Let's make the logo a little
smaller to match up with that.

78
00:05:41,320 --> 00:05:46,270
That works and
I'll align this with the right side.

79
00:05:46,270 --> 00:05:50,540
And we know that our site visitors
are heavy social media users.

80
00:05:50,540 --> 00:05:54,680
So we can get away with iconography
like this because they've

81
00:05:54,680 --> 00:05:56,730
probably seen it in other websites.

82
00:05:57,840 --> 00:06:00,950
Next if the site visitor still wants
to know more about the product,

83
00:06:00,950 --> 00:06:04,830
they'll likely scroll down the page and

84
00:06:04,830 --> 00:06:07,930
let's add some of the remaining
marketing copy there.

85
00:06:07,930 --> 00:06:13,960
So I'll just select text and
let's grab a block of text.

86
00:06:15,770 --> 00:06:19,660
And in Balsamiq mockups we don't
have to type in anything exactly,

87
00:06:19,660 --> 00:06:25,780
we can just have this
nice text block here, and

88
00:06:25,780 --> 00:06:29,380
that will be our
additional marketing copy.

89
00:06:29,380 --> 00:06:34,180
And if you want, you can put in the real
copy there and in fact, that is

90
00:06:34,180 --> 00:06:39,270
a little bit better so that you know the
exact spacing, but this is fine for now.

91
00:06:39,270 --> 00:06:43,520
So let's zoom out just a bit so

92
00:06:43,520 --> 00:06:48,230
that we can see the whole
length of the site there.

93
00:06:48,230 --> 00:06:52,590
And finally at the bottom of the page,
let's add iconography for

94
00:06:52,590 --> 00:06:55,290
the company's social media profiles since,

95
00:06:55,290 --> 00:06:58,420
again, this will be something
that speaks to our audience.

96
00:06:58,420 --> 00:07:01,660
So I'll move this text
up just a little bit and

97
00:07:01,660 --> 00:07:06,030
let's go back to our icons here, and

98
00:07:06,030 --> 00:07:11,750
we could just drag in the icon component,
or we can search for icons here.

99
00:07:11,750 --> 00:07:14,360
So I'm gonna look for Facebook.

100
00:07:14,360 --> 00:07:21,600
So we'll go to the f's here and
I'm just gonna grab this Facebook square.

101
00:07:21,600 --> 00:07:22,100
That's good.

102
00:07:23,180 --> 00:07:26,170
And then let's scroll over to Twitter.

103
00:07:26,170 --> 00:07:30,250
And of course, we could add more social
media profiles if we wanted to, but

104
00:07:30,250 --> 00:07:31,220
we'll just do these two.

105
00:07:32,970 --> 00:07:37,570
There is the Twitter square,
so we'll drag that in,

106
00:07:39,110 --> 00:07:44,850
and let's just put these side by
side at the bottom of the site and

107
00:07:44,850 --> 00:07:49,490
then we'll select both of them to
kind of get them centered together.

108
00:07:51,510 --> 00:07:54,393
This is a good start and
now we're ready to move on.