1
00:00:00,405 --> 00:00:06,540
Generally speaking, it's a good idea to
think in terms of iterations or passes.

2
00:00:06,540 --> 00:00:10,400
An iteration is one version
of your project, and

3
00:00:10,400 --> 00:00:15,670
there will likely be several versions
between the start and the final product.

4
00:00:15,670 --> 00:00:20,330
When creating a design, your first
idea is almost never your best idea.

5
00:00:20,330 --> 00:00:22,710
There are always things
that can be improved or

6
00:00:22,710 --> 00:00:26,260
changed, to better suit
the goals of the project.

7
00:00:26,260 --> 00:00:31,400
For example, the arrangement of page
elements we created on a mobile device,

8
00:00:31,400 --> 00:00:37,120
probably isn't the best way to communicate
with the audience, on a desktop computer.

9
00:00:37,120 --> 00:00:41,380
Or perhaps after stakeholders see
the first version of the site,

10
00:00:41,380 --> 00:00:43,480
they might ask for changes.

11
00:00:43,480 --> 00:00:47,840
After the product launches,
you might get feedback from customers,

12
00:00:47,840 --> 00:00:50,740
or information that comes
from analytics data.

13
00:00:52,430 --> 00:00:57,040
In almost every case, your first try
isn't going to be your best work.

14
00:00:57,040 --> 00:01:01,060
So you should embrace all
the feedback you can, and

15
00:01:01,060 --> 00:01:03,650
use it to make the project better.

16
00:01:03,650 --> 00:01:07,650
We've done a first pass on
the mobile version of the site.

17
00:01:07,650 --> 00:01:10,230
But there might be some
ways we can make it better.

18
00:01:11,860 --> 00:01:15,240
We've created this free floating design,
but

19
00:01:15,240 --> 00:01:19,050
we should wrap it in
a mobile phone container.

20
00:01:19,050 --> 00:01:21,600
Let's drop in an iPhone container.

21
00:01:21,600 --> 00:01:29,370
So I'll go to containers, and you can
drag in either iPhone or smartphone.

22
00:01:29,370 --> 00:01:34,540
I'll just pick iPhone here, and
let's drag that onto the canvass.

23
00:01:34,540 --> 00:01:39,390
And these containers will
be scaled appropriately.

24
00:01:39,390 --> 00:01:44,556
And if we zoom out even further,
we can see that this

25
00:01:44,556 --> 00:01:49,618
website doesn't quite
fit into this container.

26
00:01:49,618 --> 00:01:53,240
And you'll also notice that it's
going behind the container.

27
00:01:53,240 --> 00:01:57,094
So to fix that we can just
click on the container, and

28
00:01:57,094 --> 00:02:01,919
then right-click or secondary click,
and choose send to back.

29
00:02:03,652 --> 00:02:07,860
And then the other thing we should do,
is actually lock this layer.

30
00:02:07,860 --> 00:02:16,400
So let's move this over to the upper left,
right click on it, and choose lock iPhone.

31
00:02:16,400 --> 00:02:20,210
And that will lock the layer in place
until we right-click on it again, and

32
00:02:20,210 --> 00:02:21,410
choose unlock.

33
00:02:21,410 --> 00:02:24,760
And that way we won't
select it accidentally.

34
00:02:24,760 --> 00:02:29,478
So now let's try to put this
website inside of this iPhone.

35
00:02:29,478 --> 00:02:31,110
And you can see it doesn't quite fit.

36
00:02:31,110 --> 00:02:33,610
So we need to make some adjustments, so

37
00:02:33,610 --> 00:02:38,860
that this site is proportional
to this particular device.

38
00:02:40,300 --> 00:02:47,301
So let's zoom back in, and
let's start working on these adjustments.

39
00:02:48,804 --> 00:02:53,944
So first, I'm going to make

40
00:02:53,944 --> 00:02:59,307
this image a bit more narrow.

41
00:02:59,307 --> 00:03:02,800
I'll move Coming this Summer in a bit.

42
00:03:02,800 --> 00:03:06,380
We can make this Pre-Order
button a little bit smaller.

43
00:03:07,860 --> 00:03:14,829
And we'll decrease the font size a bit,
maybe to 16.

44
00:03:17,902 --> 00:03:20,710
And I think that looks pretty good.

45
00:03:21,950 --> 00:03:26,520
Up here, we need to reduce
the size of this tagline.

46
00:03:26,520 --> 00:03:29,860
So let's maybe try 18 point font.

47
00:03:30,930 --> 00:03:32,480
That works!

48
00:03:32,480 --> 00:03:36,956
And we'll bring in this logo and
the hamburger menu.

49
00:03:39,496 --> 00:03:40,940
And that's looking good.

50
00:03:40,940 --> 00:03:43,990
Now, we just need to
adjust some of this copy.

51
00:03:46,470 --> 00:03:50,856
And it's okay if this ends
up scrolling further down

52
00:03:50,856 --> 00:03:54,251
the page once the final copy is in place.

53
00:03:54,251 --> 00:03:58,400
It's not a big deal, we just want
to align everything right now.

54
00:03:58,400 --> 00:04:03,632
And then we'll put the social
buttons back in place,

55
00:04:03,632 --> 00:04:06,428
and center them on the page.

56
00:04:10,158 --> 00:04:11,570
Okay, great.

57
00:04:11,570 --> 00:04:15,334
Now, we can zoom out and
take a look what this looks like.

58
00:04:15,334 --> 00:04:17,600
I'm generally pretty happy with this.

59
00:04:17,600 --> 00:04:21,747
I'm gonna move these elements down,
just a little more.

60
00:04:24,407 --> 00:04:33,100
To give each one of these things some
room to breathe, and give it some space.

61
00:04:33,100 --> 00:04:34,370
And I think that looks pretty good.

62
00:04:35,730 --> 00:04:40,590
This feels a bit cleaner than
the free-floating page we had previously.

63
00:04:40,590 --> 00:04:44,130
Elements are properly scaled to
fit the context of the phone,

64
00:04:44,130 --> 00:04:48,840
and they're aligned with one another,
along an imaginary grid.

65
00:04:48,840 --> 00:04:51,970
However, it's still a smart
idea to design without

66
00:04:51,970 --> 00:04:54,670
putting a box around
your work at the start.

67
00:04:54,670 --> 00:04:57,980
Keeping the space open will
allow you to think freely, and

68
00:04:57,980 --> 00:05:01,670
come up with the best way of
presenting the information,

69
00:05:01,670 --> 00:05:06,560
rather than trying to cram
it into an arbitrary area.

70
00:05:06,560 --> 00:05:10,590
Now, let's keep this design on the side,
and

71
00:05:10,590 --> 00:05:13,699
we're going to select
all of these elements.

72
00:05:15,020 --> 00:05:19,600
And we'll copy them by
hitting Ctrl+C on Windows, or

73
00:05:19,600 --> 00:05:24,600
Command C on Mac, and
then click in any blank area.

74
00:05:24,600 --> 00:05:32,830
And we'll paste them by hitting Ctrl+V
on Windows, or Command V on Mac.

75
00:05:32,830 --> 00:05:35,080
And that will duplicate the items, and

76
00:05:35,080 --> 00:05:37,960
we can just drag these
over to the right here.

77
00:05:39,070 --> 00:05:42,520
This is what's going to
become our desktop layout.

78
00:05:42,520 --> 00:05:46,140
So first,
let's make this headline a lot bigger so

79
00:05:46,140 --> 00:05:49,290
that it stretches across a wider area.

80
00:05:49,290 --> 00:05:55,630
I'm gonna zoom out just a bit,
To give us some room to work.

81
00:05:55,630 --> 00:06:01,132
So we'll bring this font size back up,
maybe say, something like 40,

82
00:06:01,132 --> 00:06:05,951
or we can probably go even higher here,
to something like 60.

83
00:06:05,951 --> 00:06:08,213
I think that looks good.

84
00:06:08,213 --> 00:06:10,020
Move these items out of the way here.

85
00:06:12,533 --> 00:06:17,145
Now let's make the area for
our images bigger to match.

86
00:06:17,145 --> 00:06:21,065
So I don't think they need to stretch all
the way across the horizontal width of

87
00:06:21,065 --> 00:06:27,585
the page, like on a phone layout but,
we'll make them still pretty large here.

88
00:06:27,585 --> 00:06:30,055
And maybe take up a bit
chunk of the left side.

89
00:06:31,750 --> 00:06:38,650
Next, let's put this pre-order
button to the right side here.

90
00:06:38,650 --> 00:06:43,030
We want the images to capture their
attention, but we don't want to shove

91
00:06:43,030 --> 00:06:47,090
the button all the way out of the way,
because that's the call-to-action.

92
00:06:47,090 --> 00:06:50,805
So we want that up high on the page,
kinda front and center.

93
00:06:53,870 --> 00:06:56,491
So let's make this button a little larger.

94
00:06:59,699 --> 00:07:01,230
I think that's good.

95
00:07:01,230 --> 00:07:08,415
And we'll make the font sizes larger here,
maybe say, 20 or even 24 on that.

96
00:07:09,845 --> 00:07:14,366
And let's do something similar for

97
00:07:14,366 --> 00:07:21,757
the coming this summer,
say 20, maybe even like 28.

98
00:07:21,757 --> 00:07:24,915
That's pretty good, and
we'll center that along the button.

99
00:07:24,915 --> 00:07:27,670
So let's zoom in a little bit,
get a better look at this.

100
00:07:29,090 --> 00:07:31,597
This looks like it's
coming together nicely.

101
00:07:31,597 --> 00:07:32,490
Move this up a bit.

102
00:07:34,280 --> 00:07:39,760
We still want to include the marketing
copy down here to educate the customer,

103
00:07:39,760 --> 00:07:43,580
but stretching it all the way
across the full width of the page,

104
00:07:43,580 --> 00:07:45,730
will make long lines difficult to read.

105
00:07:45,730 --> 00:07:51,100
So let's just stretch it across
the width of the product images.

106
00:07:51,100 --> 00:07:55,953
So we'll say that's kinda the space for
this copy.

107
00:07:55,953 --> 00:08:01,023
And of course, in our final design,
we would adjust things like font sizes,

108
00:08:01,023 --> 00:08:05,240
and so forth, to make it fill
the space a little bit more neatly.

109
00:08:06,250 --> 00:08:09,960
And this does leave the right
side a little bit bare.

110
00:08:09,960 --> 00:08:12,670
But this type of thing can
be changed later when you

111
00:08:12,670 --> 00:08:14,990
further iterate on the design.

112
00:08:14,990 --> 00:08:19,880
And this could be resolved with higher
fidelity design details, like a square box

113
00:08:19,880 --> 00:08:25,080
around the preorder area,
to separate the page into two columns.

114
00:08:25,080 --> 00:08:28,800
Or the page could be tweaked with
different fonts, sizes, line heights, and

115
00:08:28,800 --> 00:08:29,680
so forth.

116
00:08:29,680 --> 00:08:34,225
This wireframe is just meant to get
all the elements into one place.

117
00:08:34,225 --> 00:08:37,795
Now, let's stretch out
the logo a little bit.

118
00:08:39,515 --> 00:08:42,540
Because on the desktop
version of the site,

119
00:08:42,540 --> 00:08:47,785
we'll probably have the full
logo lockup with the image and

120
00:08:47,785 --> 00:08:51,460
then the company name,
rather than just a small icon.

121
00:08:53,530 --> 00:08:56,505
And we can do the same
with the navigation.

122
00:08:56,505 --> 00:09:00,230
So let's delete this small menu here.

123
00:09:01,440 --> 00:09:07,180
And I'm gonna go to text, and
I'll grab this menu bar here.

124
00:09:07,180 --> 00:09:11,260
And typically, this is meant for
an actual desktop application,

125
00:09:11,260 --> 00:09:14,160
but we can use it for this website too.

126
00:09:14,160 --> 00:09:18,550
And we can separate each
element with a comma, so

127
00:09:18,550 --> 00:09:23,812
we'll say Home, Products,
Support and the About page.

128
00:09:26,450 --> 00:09:28,320
So we'll stretch these out.

129
00:09:30,712 --> 00:09:34,994
And let's bump up that font size as well.

130
00:09:34,994 --> 00:09:37,395
Maybe something like 16.

131
00:09:40,578 --> 00:09:45,820
And we'll align that with the right side
of the page and the middle of this logo.

132
00:09:47,020 --> 00:09:54,081
And we're almost done, let's just
move these social icons around a bit,

133
00:09:54,081 --> 00:09:58,127
maybe change them to be extra large icons.

134
00:09:58,127 --> 00:10:00,690
That's good.

135
00:10:00,690 --> 00:10:03,233
And let's try to find the center there.

136
00:10:06,552 --> 00:10:07,560
I think that's pretty good.

137
00:10:08,730 --> 00:10:14,690
And finally, let's put all of these
elements inside of a browser window,

138
00:10:14,690 --> 00:10:17,700
so that we can clean
things up a bit further.

139
00:10:17,700 --> 00:10:22,309
So I'm gonna go to containers,
and instead of an iPhone,

140
00:10:22,309 --> 00:10:26,460
I'm going to drag a browser
window into place here.

141
00:10:26,460 --> 00:10:31,136
And we'll right-click on that,
say Sent to Back, and

142
00:10:31,136 --> 00:10:34,130
we'll zoom out a bit further here.

143
00:10:35,910 --> 00:10:43,100
And we can just kind of wrap all
these page elements, just like this.

144
00:10:43,100 --> 00:10:48,140
And of course a browser window can be
resized, however the user might like.

145
00:10:48,140 --> 00:10:53,935
So we'll just wrap these elements
just like this, and zoom back in.

146
00:10:56,204 --> 00:10:58,700
And I think this looks pretty good.

147
00:10:58,700 --> 00:11:02,343
I'm gonna lock this browser into place.

148
00:11:02,343 --> 00:11:06,182
Maybe move some of these
elements down here,

149
00:11:06,182 --> 00:11:10,122
to give them a little
bit more vertical space,

150
00:11:10,122 --> 00:11:14,480
give that tagline some room
to stand out on its own.

151
00:11:15,650 --> 00:11:21,650
And now that we have two different screen
sizes side by side, we can compare the two

152
00:11:21,650 --> 00:11:25,880
to make sure that we're delivering
a good experience on both.

153
00:11:27,150 --> 00:11:29,810
And the desktop size we designed,

154
00:11:29,810 --> 00:11:33,940
will likely fit smaller screens and
possibly tablets.

155
00:11:33,940 --> 00:11:38,870
If you wanted to take things further, you
could create an even larger layout, and

156
00:11:38,870 --> 00:11:44,990
have one more size up for particularly
large screens, but we'll stop there.

157
00:11:46,180 --> 00:11:49,790
We just iterated a bit on
the design we already created.

158
00:11:49,790 --> 00:11:54,790
But if you want to do more exploration,
you should take some of the same

159
00:11:54,790 --> 00:11:58,300
elements and come up with
a completely different design.

160
00:11:58,300 --> 00:12:01,850
Perhaps there are other
approaches that do a better job

161
00:12:01,850 --> 00:12:07,020
of communicating to the audience,
that you could iterate on even further.

162
00:12:07,020 --> 00:12:10,415
I hope you enjoyed this
overview of designing websites.

163
00:12:10,415 --> 00:12:14,062
Like I said at the beginning,
there's no standardized approach, and

164
00:12:14,062 --> 00:12:16,940
this is just one way of
tackling the problem.

165
00:12:16,940 --> 00:12:19,380
You should feel free to be flexible, and

166
00:12:19,380 --> 00:12:23,080
experiment with different techniques
to find the one that works for you.