1
00:00:00.05 --> 00:00:02.04
- [Instructor] Now, when you
are designing for mobile,

2
00:00:02.04 --> 00:00:03.08
you need to keep in mind
that there's going to be

3
00:00:03.08 --> 00:00:06.08
a status bar here, and essentially,

4
00:00:06.08 --> 00:00:07.09
how would you get that status bar and

5
00:00:07.09 --> 00:00:11.02
how would you get ahold of those UI kits,

6
00:00:11.02 --> 00:00:13.09
'cause we want to be able
to use all of those elements

7
00:00:13.09 --> 00:00:18.03
that are provided by iOS and
Google Material, in this case.

8
00:00:18.03 --> 00:00:21.09
Check it out, File,
Get UI Kits, Apple iOS,

9
00:00:21.09 --> 00:00:23.03
and that's what I'm going to select.

10
00:00:23.03 --> 00:00:25.00
It's going to take me to that site,

11
00:00:25.00 --> 00:00:28.08
Photoshop Sketch, and XD
being the smallest one,

12
00:00:28.08 --> 00:00:32.08
we will just accept,
please read this agreement

13
00:00:32.08 --> 00:00:35.00
thoroughly before accepting.

14
00:00:35.00 --> 00:00:36.05
I'm just going to click OK right now

15
00:00:36.05 --> 00:00:37.03
'cause I've already read it,

16
00:00:37.03 --> 00:00:42.01
and we'll dive into
this Adobe XD ZIP file.

17
00:00:42.01 --> 00:00:45.01
Install the fonts, and
then you can take a look

18
00:00:45.01 --> 00:00:47.00
at the different UI elements.

19
00:00:47.00 --> 00:00:48.08
So we're basically diving into the

20
00:00:48.08 --> 00:00:50.07
design templates and guides.

21
00:00:50.07 --> 00:00:52.02
Double-clicking on that file,

22
00:00:52.02 --> 00:00:56.03
we can see all of these
elements that we can use.

23
00:00:56.03 --> 00:00:57.02
Look at all these!

24
00:00:57.02 --> 00:00:58.09
It's just wonderful.

25
00:00:58.09 --> 00:01:01.08
Anything you'd want, the
keyboard, any sort of popup,

26
00:01:01.08 --> 00:01:03.09
so if they click the Twitter button

27
00:01:03.09 --> 00:01:06.06
while I want this to pop
up, you get the idea.

28
00:01:06.06 --> 00:01:10.02
But you can see UI elements right up here,

29
00:01:10.02 --> 00:01:12.05
I need this status bar, all right.

30
00:01:12.05 --> 00:01:13.06
So this is what I'm going to use,

31
00:01:13.06 --> 00:01:15.03
and I'll just grab this one right here.

32
00:01:15.03 --> 00:01:18.05
And copying it, closing that file,

33
00:01:18.05 --> 00:01:20.09
going over here, making room for it,

34
00:01:20.09 --> 00:01:26.02
moving that content down,
and these elements down,

35
00:01:26.02 --> 00:01:28.06
just holding down the Shift key,

36
00:01:28.06 --> 00:01:33.05
and let's take a look at
this even closer, if we can.

37
00:01:33.05 --> 00:01:36.07
Something like that,
repositioning everything

38
00:01:36.07 --> 00:01:40.04
to make sure it fits,
pasting this in, here it is.

39
00:01:40.04 --> 00:01:43.08
We can drop that right up there, okay?

40
00:01:43.08 --> 00:01:46.05
So this is, for the six,
seven, and eight plus,

41
00:01:46.05 --> 00:01:50.00
but essentially, this is the status bar

42
00:01:50.00 --> 00:01:52.04
that would go right here, and
if you click inside of it,

43
00:01:52.04 --> 00:01:54.04
notice how you can select
all those individual elements

44
00:01:54.04 --> 00:01:58.01
as well, so everything is
actually made in Adobe XD

45
00:01:58.01 --> 00:01:59.09
and editable in case you wanted to change

46
00:01:59.09 --> 00:02:02.03
the time or whatever.

47
00:02:02.03 --> 00:02:04.02
So this is for iOS.

48
00:02:04.02 --> 00:02:08.06
We can go beyond that,
because what I want to do is

49
00:02:08.06 --> 00:02:14.04
actually grab the Google
Material UI kit as well,

50
00:02:14.04 --> 00:02:16.00
right over here, for Android.

51
00:02:16.00 --> 00:02:19.00
Let's just make room for
it, just like I was doing

52
00:02:19.00 --> 00:02:21.03
a second ago, it's going
to be the same process.

53
00:02:21.03 --> 00:02:24.03
Slightly different, actually
a little bit simpler,

54
00:02:24.03 --> 00:02:26.02
to be honest with you,
'cause when you go to File,

55
00:02:26.02 --> 00:02:28.02
Get UI Kits for Google Material,

56
00:02:28.02 --> 00:02:30.03
it's going to take you out to that site,

57
00:02:30.03 --> 00:02:33.02
you'll see it right here, very very small,

58
00:02:33.02 --> 00:02:35.06
'cause really you just need this one file.

59
00:02:35.06 --> 00:02:37.04
Everything's made in XD.

60
00:02:37.04 --> 00:02:40.01
Opening that up, we can see it right here.

61
00:02:40.01 --> 00:02:42.03
In fact, I encourage you
to just use the artboards

62
00:02:42.03 --> 00:02:44.05
off to the sides, you
can kind of get an idea

63
00:02:44.05 --> 00:02:48.02
for the bottom toolbar,
the light theme, right?

64
00:02:48.02 --> 00:02:51.08
You can see the light theme,
which is actually what I want.

65
00:02:51.08 --> 00:02:55.04
I want to be able to grab
this status bar right here,

66
00:02:55.04 --> 00:02:58.04
copying it, closing that
file, pasting it in,

67
00:02:58.04 --> 00:03:02.03
and moving it over right here.

68
00:03:02.03 --> 00:03:06.07
You get the idea, kind of like that.

69
00:03:06.07 --> 00:03:08.04
All right, so that's what I want to do.

70
00:03:08.04 --> 00:03:11.04
Use those UI kits, get familiar with them,

71
00:03:11.04 --> 00:03:14.00
they really are really good,
but I'm going to point out

72
00:03:14.00 --> 00:03:15.06
one other resource for you.

73
00:03:15.06 --> 00:03:18.05
Check this out, Get UI Kits, Wireframes.

74
00:03:18.05 --> 00:03:23.00
So this is a wireframe
UI kit called Wires,

75
00:03:23.00 --> 00:03:27.01
okay, so feel free to just
search for it on Behance.

76
00:03:27.01 --> 00:03:31.09
Wires, Adobe XD, you
could download this kit.

77
00:03:31.09 --> 00:03:34.00
It's actually really cool because there's

78
00:03:34.00 --> 00:03:36.05
a number of elements in here,

79
00:03:36.05 --> 00:03:37.05
so we can take a look at mobile,

80
00:03:37.05 --> 00:03:39.09
we can take a look at web,
if we double-click on web,

81
00:03:39.09 --> 00:03:42.05
you can see all of these
elements that you can use.

82
00:03:42.05 --> 00:03:45.01
So why recreate things
when you could potentially

83
00:03:45.01 --> 00:03:47.06
use something that's already created?

84
00:03:47.06 --> 00:03:50.00
Again, this is just a
wireframe, but again,

85
00:03:50.00 --> 00:03:52.07
nice elements that you
don't have to recreate

86
00:03:52.07 --> 00:03:55.00
or even think about much.

87
00:03:55.00 --> 00:03:57.01
So use those resources.

88
00:03:57.01 --> 00:03:59.03
They're all right under Get UI Kits,

89
00:03:59.03 --> 00:04:02.03
and there's also Windows as well.

90
00:04:02.03 --> 00:04:03.08
So take advantage of those,

91
00:04:03.08 --> 00:04:06.09
get it squared away for
your specific platform

92
00:04:06.09 --> 00:04:10.02
to make sure it meets
all of those criteria

93
00:04:10.02 --> 00:04:11.03
for those platforms.