1
00:00:00.05 --> 00:00:02.05
- [Presenter] Now when
you're designing a website

2
00:00:02.05 --> 00:00:05.03
you want to make sure the
content fits it appropriately

3
00:00:05.03 --> 00:00:08.03
for the platform that it's on.

4
00:00:08.03 --> 00:00:11.02
So if you're talkin' desktop,
sort of a desktop browser,

5
00:00:11.02 --> 00:00:12.04
I can take a look at this content

6
00:00:12.04 --> 00:00:14.02
I could say this looks pretty good.

7
00:00:14.02 --> 00:00:18.09
I can maybe resize these
social media icons just a touch

8
00:00:18.09 --> 00:00:22.00
like that, moving them up like that,

9
00:00:22.00 --> 00:00:23.07
and even over on this side

10
00:00:23.07 --> 00:00:25.08
I can make them a touch larger as well.

11
00:00:25.08 --> 00:00:27.03
Now when it comes to mobile,

12
00:00:27.03 --> 00:00:29.09
maybe I want the same
content, maybe I don't,

13
00:00:29.09 --> 00:00:32.03
but I need to start
making those decisions.

14
00:00:32.03 --> 00:00:36.01
So what I can do is I can
bring all that content over

15
00:00:36.01 --> 00:00:38.08
and then figure out
what's going to fit, okay?

16
00:00:38.08 --> 00:00:40.02
And the easiest way to do that

17
00:00:40.02 --> 00:00:41.06
is by selecting the home screen

18
00:00:41.06 --> 00:00:44.00
and I want to point out that over here

19
00:00:44.00 --> 00:00:47.01
in the layers panels, this
little button right here,

20
00:00:47.01 --> 00:00:49.01
make sure that it's not the assets panel,

21
00:00:49.01 --> 00:00:50.04
but the layers panel,

22
00:00:50.04 --> 00:00:52.09
notice how I don't see any
of my layers for my homepage.

23
00:00:52.09 --> 00:00:54.05
Well they're actually inside of there,

24
00:00:54.05 --> 00:00:55.08
inside of the homepage,

25
00:00:55.08 --> 00:00:58.07
if you double-click on the icon itself

26
00:00:58.07 --> 00:01:00.03
you can go inside of the homepage.

27
00:01:00.03 --> 00:01:02.01
So here are all your graphics.

28
00:01:02.01 --> 00:01:04.09
These are all the graphics that
I need to bring over, okay?

29
00:01:04.09 --> 00:01:07.05
So I can click and drag
and select those all

30
00:01:07.05 --> 00:01:09.00
but I'm actually missing one

31
00:01:09.00 --> 00:01:10.04
'cause there's this rectangle right here

32
00:01:10.04 --> 00:01:12.04
it's locked down, so let's unlock it.

33
00:01:12.04 --> 00:01:15.04
Now I can make sure
everything is selected, right?

34
00:01:15.04 --> 00:01:19.03
Everything is selected and I
can bring that content over.

35
00:01:19.03 --> 00:01:20.04
Easiest way to do that

36
00:01:20.04 --> 00:01:22.06
is hold down the Shift key and the Alt key

37
00:01:22.06 --> 00:01:23.09
and it's going to duplicate it.

38
00:01:23.09 --> 00:01:25.08
I could drag it right up here

39
00:01:25.08 --> 00:01:29.07
the Shift key will constrain
it and there we have it.

40
00:01:29.07 --> 00:01:30.05
As I release,

41
00:01:30.05 --> 00:01:33.04
it puts it inside of the iPhone
Six, Seven, and Eight Plus

42
00:01:33.04 --> 00:01:34.07
art board just like that

43
00:01:34.07 --> 00:01:37.01
and I can resize this content.

44
00:01:37.01 --> 00:01:38.07
And just by holding down the Shift key

45
00:01:38.07 --> 00:01:40.00
we'll still constrain it

46
00:01:40.00 --> 00:01:42.05
and I can start to position
everything accordingly.

47
00:01:42.05 --> 00:01:44.04
So this is going to take some time

48
00:01:44.04 --> 00:01:46.08
as I start to adjust this right here

49
00:01:46.08 --> 00:01:51.04
I'm noticing this bar definitely
could be a different size

50
00:01:51.04 --> 00:01:55.03
but this is what I need to do
now from a design standpoint

51
00:01:55.03 --> 00:01:57.07
start to bring everything over

52
00:01:57.07 --> 00:02:02.00
and get something that works
for, say, a mobile browser

53
00:02:02.00 --> 00:02:04.04
as I'm doing right now, okay.

54
00:02:04.04 --> 00:02:08.02
So the great thing is as I
select these social media icons

55
00:02:08.02 --> 00:02:10.05
I could put them right up here

56
00:02:10.05 --> 00:02:13.09
and we will have this magnifying
glass up here as well.

57
00:02:13.09 --> 00:02:16.08
The great thing is is that as
I'm designing for the iPhone

58
00:02:16.08 --> 00:02:17.09
I'm going to be able to move that over

59
00:02:17.09 --> 00:02:20.05
to the Android device
as well pretty easily

60
00:02:20.05 --> 00:02:22.04
so selecting that, selecting root,

61
00:02:22.04 --> 00:02:24.03
selecting this text right here.

62
00:02:24.03 --> 00:02:27.04
Notice how I've resized it, it's all...

63
00:02:27.04 --> 00:02:29.09
Well, let's take a look.

64
00:02:29.09 --> 00:02:31.02
It's all pretty small

65
00:02:31.02 --> 00:02:34.03
but what I can do is I can
select each one of these

66
00:02:34.03 --> 00:02:38.06
and resize it accordingly like that.

67
00:02:38.06 --> 00:02:41.06
This text is definitely really rough.

68
00:02:41.06 --> 00:02:45.03
Going from point text to area
text, clicking right there,

69
00:02:45.03 --> 00:02:47.07
now it puts it in a box essentially.

70
00:02:47.07 --> 00:02:51.08
Now I can resize it to something like that

71
00:02:51.08 --> 00:02:55.06
and maybe move this content down

72
00:02:55.06 --> 00:02:57.06
but I'm just formatting everything

73
00:02:57.06 --> 00:03:01.03
the way I think it should look for mobile.

74
00:03:01.03 --> 00:03:03.08
I'd say that looks pretty good.

75
00:03:03.08 --> 00:03:06.06
The logo stands out, I can read the text,

76
00:03:06.06 --> 00:03:08.08
these buttons are really important

77
00:03:08.08 --> 00:03:12.01
and then from there I can
duplicate this for Android.

78
00:03:12.01 --> 00:03:16.03
So, with them all selected,
just click and drag them over,

79
00:03:16.03 --> 00:03:18.08
as I drag them over it's
going to recognize it

80
00:03:18.08 --> 00:03:20.09
as being part of Android mobile

81
00:03:20.09 --> 00:03:24.09
and it puts it in place, and
then I can resize accordingly.

82
00:03:24.09 --> 00:03:26.04
So that's what you typically need to do

83
00:03:26.04 --> 00:03:29.00
when you're going from different devices.

84
00:03:29.00 --> 00:03:30.09
They're going to be
different sizes definitely

85
00:03:30.09 --> 00:03:34.00
and you make to sure your
content fits accordingly.

86
00:03:34.00 --> 00:03:35.03
Let's keep in mind

87
00:03:35.03 --> 00:03:39.05
that I am actually using
some assets over here

88
00:03:39.05 --> 00:03:41.02
I can always change those assets

89
00:03:41.02 --> 00:03:43.09
across these different art
boards, but ultimately,

90
00:03:43.09 --> 00:03:47.00
I want to get something
that works for each device

91
00:03:47.00 --> 00:03:50.09
that's going to be a
little different like that.

92
00:03:50.09 --> 00:03:54.06
Last thing is just moving
these social media icons over

93
00:03:54.06 --> 00:03:56.09
and making sure that they're large enough

94
00:03:56.09 --> 00:04:00.01
to be able to be clicked on.

95
00:04:00.01 --> 00:04:02.08
So you can see creating
for different platforms

96
00:04:02.08 --> 00:04:06.06
means, of course, resizing
content to make sure it fits

97
00:04:06.06 --> 00:04:08.02
within that space

98
00:04:08.02 --> 00:04:10.01
as well as making sure
they're large enough

99
00:04:10.01 --> 00:04:13.06
to, say, be clicked on,
in the case of mobile.