1
00:00:00,390 --> 00:00:01,630
Hey and welcome back.

2
00:00:02,100 --> 00:00:07,350
So we're going to talk about how to use illustrations for your product now, illustrations are super

3
00:00:07,350 --> 00:00:08,580
fun when they look good.

4
00:00:09,240 --> 00:00:14,250
There are tons of resources out there for imagery that could really help your designs have that extra

5
00:00:14,250 --> 00:00:15,060
bit of polish.

6
00:00:15,600 --> 00:00:20,310
I listed some in the beginning and we can go through how we can use those plugins for our product.

7
00:00:20,940 --> 00:00:23,490
Now, the first plug in I mentioned was called blush.

8
00:00:24,060 --> 00:00:30,660
So what we're going to do is we're just going to grab the plug ins over here and we're going to go up

9
00:00:30,660 --> 00:00:31,290
to blush.

10
00:00:32,740 --> 00:00:33,270
And there we go.

11
00:00:33,310 --> 00:00:33,970
This is blush.

12
00:00:35,270 --> 00:00:41,750
Now blushes a really great plug in, it's entirely free to an extent you do need to sign up if you want

13
00:00:41,750 --> 00:00:47,270
larger pages, if you want CGS, you need to pay.

14
00:00:47,780 --> 00:00:54,360
But it's a good way to get a sense of what you may want before you actually purchase it.

15
00:00:54,860 --> 00:00:56,690
It also may give you some inspiration.

16
00:00:56,690 --> 00:00:59,500
And if you're feeling brave, you can go and make your own illustrations.

17
00:01:00,290 --> 00:01:05,750
So what I want to do here is let's kind of put together a quick onboarding screen.

18
00:01:07,490 --> 00:01:09,590
So I'm going to do is I'm going to select my frame tools.

19
00:01:09,590 --> 00:01:16,550
So I'm going to press if I'm going to actually select something like the iPhone 11 here and I'm going

20
00:01:16,550 --> 00:01:21,980
to press command are to rename it and we can rename it to Onboarding.

21
00:01:26,400 --> 00:01:27,930
Let's just create a quick on board screen.

22
00:01:28,080 --> 00:01:30,390
Let's start with something for like a search.

23
00:01:31,050 --> 00:01:31,900
So let's do this quickly.

24
00:01:31,920 --> 00:01:35,700
Let's not worry about any grids or any sizing or anything too much.

25
00:01:35,710 --> 00:01:39,260
These are just some concepts that were coming up with for our client habitual.

26
00:01:39,720 --> 00:01:44,430
So let's just quickly type tool with T..

27
00:01:45,480 --> 00:01:46,260
And here we go.

28
00:01:47,100 --> 00:01:48,720
That's a little too big.

29
00:01:49,120 --> 00:01:51,070
We can do is we can scale down.

30
00:01:53,010 --> 00:01:53,320
OK.

31
00:01:54,320 --> 00:01:59,820
Search for anything that you want.

32
00:02:00,260 --> 00:02:05,440
That could be our little headline, usually these onboard screens have like a catchy headline.

33
00:02:05,450 --> 00:02:11,600
They'll have an illustration, then they'll have like some buttons at the bottom, some text explaining

34
00:02:12,530 --> 00:02:17,270
board engines are really great for getting users excited about the app before they even get to use it.

35
00:02:18,440 --> 00:02:21,530
That's our little onboarding headline.

36
00:02:23,780 --> 00:02:25,970
We can use the phrase like open sans or.

37
00:02:29,900 --> 00:02:35,540
Let's call for Bold, let's bring that down just up not 40 forty's good, we're going to stick with

38
00:02:35,540 --> 00:02:38,270
40 in one hundred and fifteen percent.

39
00:02:40,270 --> 00:02:48,970
And for the opacity, let's just do something like 70, maybe 99 is good, and what we're going to do

40
00:02:48,970 --> 00:02:53,060
here is we're in a duplicate that and we're going to bring that size a little down.

41
00:02:54,370 --> 00:02:57,180
I want you to kind of play around as I'm doing this.

42
00:02:57,550 --> 00:03:01,780
You can play around with whatever plugin you'd like and just come up with some screens.

43
00:03:02,880 --> 00:03:04,710
You don't have to use exactly what I'm using.

44
00:03:05,980 --> 00:03:10,290
So another plug in that I like to use, I mentioned it before, content real.

45
00:03:10,640 --> 00:03:14,650
It's a great way to kind of just fill things up with content.

46
00:03:15,100 --> 00:03:19,780
We got lorem ipsum and we're just going to put that in right there.

47
00:03:20,980 --> 00:03:22,780
So 16, not bold.

48
00:03:22,780 --> 00:03:24,010
We'll just do regular.

49
00:03:24,490 --> 00:03:26,500
We'll open that up just a bit.

50
00:03:28,610 --> 00:03:36,580
We can actually just kind of set it to a defined line height, so I'll send it to twenty four pixels

51
00:03:37,840 --> 00:03:42,550
or go a little more space and we'll bring that opacity down so it's a little bit more readable.

52
00:03:43,750 --> 00:03:44,650
OK, cool.

53
00:03:44,860 --> 00:03:45,610
This is great.

54
00:03:46,630 --> 00:03:48,190
Quickly create a button here.

55
00:03:59,560 --> 00:04:00,450
Great.

56
00:04:00,700 --> 00:04:10,330
So we lost there and there it is, so we have a button, let's just quickly choose a color here.

57
00:04:14,100 --> 00:04:21,480
I know their brand is a little bit like a yellow, I don't have that yellow right now, but that's totally

58
00:04:21,480 --> 00:04:21,990
fine.

59
00:04:24,020 --> 00:04:27,440
We can kind of work with what we have, so we have.

60
00:04:29,070 --> 00:04:38,070
Continue and then what we can do is we can have a little bit of text that just says back big distinction

61
00:04:38,070 --> 00:04:40,950
between our primary and secondary, but in here.

62
00:04:43,080 --> 00:04:47,000
We don't really want our users to hit that back button, but they shouldn't be trapped in our flow.

63
00:04:47,730 --> 00:04:53,100
OK, now that we have that, let's close this plug in and let's look for illustration.

64
00:04:53,110 --> 00:04:55,500
So we're going to bring up blush over time.

65
00:04:56,470 --> 00:04:59,920
And let's look for some illustrations that can kind of suit this screen.

66
00:05:01,250 --> 00:05:02,410
So what do we have here?

67
00:05:02,420 --> 00:05:03,980
So we have a bunch of different options.

68
00:05:06,420 --> 00:05:10,050
I like the see what this one has.

69
00:05:12,280 --> 00:05:12,700
Cool.

70
00:05:12,730 --> 00:05:14,760
There's a couple of different scenes that we can choose from.

71
00:05:17,610 --> 00:05:19,350
We have these ones.

72
00:05:20,880 --> 00:05:28,010
Small talk proposals, backgrounds, charts, living rooms, windows, I like that one.

73
00:05:29,730 --> 00:05:36,840
That kind of suits the brand a bit, we got windows perfect, we can even customize the plants within

74
00:05:36,840 --> 00:05:37,070
there.

75
00:05:37,650 --> 00:05:39,420
That's a little redundant, but.

76
00:05:40,490 --> 00:05:45,800
We can do something like that perfect that's already placed right into our file, which is so convenient.

77
00:05:47,410 --> 00:05:50,910
You can also get a person in here as well.

78
00:05:51,640 --> 00:05:56,590
Let's let's kind of reverse, which is a Kamandi, we're going to also get a person.

79
00:05:56,620 --> 00:05:57,070
There we go.

80
00:05:57,260 --> 00:05:59,970
It's going to put this dude right here.

81
00:06:02,300 --> 00:06:05,570
And now we can actually just customize this person.

82
00:06:06,220 --> 00:06:11,630
This person could be standing in the jeans, pants or shorts.

83
00:06:14,450 --> 00:06:19,700
They'd be really happy, this guy, you can't really see his happy face because he's a mustache.

84
00:06:19,910 --> 00:06:20,930
Well, that's much better.

85
00:06:22,750 --> 00:06:23,850
Say hi.

86
00:06:24,160 --> 00:06:29,650
Arms up like he's so happy he can search for anything that he wants, maybe some dance a little bit

87
00:06:29,650 --> 00:06:30,460
more on Brand.

88
00:06:32,550 --> 00:06:37,460
It looks pretty cool, or you could be even be running or jumping, which is pretty awesome.

89
00:06:40,150 --> 00:06:45,820
So there you go, like we can quickly make an onboarding screen just with something like this.

90
00:06:46,120 --> 00:06:52,420
I know they're Pang's and you may not get exactly what you want, but this should inspire you to start

91
00:06:52,420 --> 00:06:56,890
searching for something and then you can buy those illustrations or you can even start building them

92
00:06:56,890 --> 00:06:58,520
as you see fit.

93
00:06:58,930 --> 00:07:04,810
These aren't too hard to build once you kind of have an understanding of what you're going for, especially

94
00:07:04,810 --> 00:07:10,810
like the backgrounds play around with something like this to kind of set a scene, think about what

95
00:07:10,810 --> 00:07:15,220
you want to convey to our users before they even get into the product, get them excited.

96
00:07:17,220 --> 00:07:20,430
Now, the next plug in I love using is something called illustrations.

97
00:07:21,360 --> 00:07:22,230
Let's bring that plug in.

98
00:07:25,360 --> 00:07:25,930
Here it is.

99
00:07:26,110 --> 00:07:33,250
It's kind of cool, right, got all these different looking dudes, guy in a bikini is fairly limited,

100
00:07:33,250 --> 00:07:36,880
but at least you get the actual SPG layers with something like this.

101
00:07:36,880 --> 00:07:39,250
And, you know, these aren't all that bad.

102
00:07:39,520 --> 00:07:43,470
If you're going to here, you can open up a bunch of different options here.

103
00:07:43,480 --> 00:07:46,260
So we have like Doodles by Pablo Stanley.

104
00:07:46,270 --> 00:07:47,610
So he's put this plug in together.

105
00:07:48,250 --> 00:07:53,410
So these are the doodles collection peeps, which are kind of cool.

106
00:07:55,460 --> 00:08:01,460
You also have humans, which you can select different parts and then.

107
00:08:02,670 --> 00:08:04,890
Work with those parts any which way you see fit.

108
00:08:05,610 --> 00:08:06,750
I described the headier.

109
00:08:08,780 --> 00:08:14,510
You can give this person like green hair or yellow hair, and then you can actually start creating scenes

110
00:08:14,510 --> 00:08:19,550
based off of your brand colors, you know, they're faceless and it's kind of limited.

111
00:08:19,550 --> 00:08:24,680
But it's pretty interesting what you can do with something like this, with just your imagination.

112
00:08:25,340 --> 00:08:31,840
Now, the next plugin and the last option they have for a Sigma resource is called humans.

113
00:08:32,360 --> 00:08:37,060
I just showed you humans, but this is a plug in just dedicated to it.

114
00:08:38,240 --> 00:08:39,020
So here we go.

115
00:08:39,020 --> 00:08:39,710
Humans for Sigma.

116
00:08:40,950 --> 00:08:46,920
They already have set scenes, which makes it a lot easier instead of just picking individual human

117
00:08:46,920 --> 00:08:47,370
parts.

118
00:08:48,440 --> 00:08:52,750
You can still do that here, but I find that this is much more easier to use because it isn't as like

119
00:08:52,760 --> 00:08:53,360
zoomed in.

120
00:08:54,700 --> 00:09:02,410
And you have different things that you can use as well, like lamps, different objects, which is pretty

121
00:09:02,410 --> 00:09:02,770
cool.

122
00:09:03,490 --> 00:09:05,950
So what we're going to do is we're going to create another onboarding screen.

123
00:09:05,950 --> 00:09:07,420
So I'm going to press F.

124
00:09:08,520 --> 00:09:11,250
And select another frame over there.

125
00:09:11,400 --> 00:09:18,960
I'm going to select the iPhone screen command are for renaming the screening that you onboarding again.

126
00:09:19,950 --> 00:09:21,090
And so we're going to do is.

127
00:09:22,150 --> 00:09:22,960
We're just going to.

128
00:09:23,840 --> 00:09:26,870
Grab everything over here, command, see?

129
00:09:27,920 --> 00:09:34,250
And what that's going to do is we're going to click on this, it's going to paste everything right in

130
00:09:34,250 --> 00:09:34,490
there.

131
00:09:34,850 --> 00:09:36,590
That's kind of interesting.

132
00:09:36,830 --> 00:09:39,340
Let's actually create this frame one more time.

133
00:09:40,640 --> 00:09:42,170
We can actually just drag that over.

134
00:09:44,900 --> 00:09:54,620
OK, now let's rename it to, like, get results super quickly or super quick.

135
00:09:58,370 --> 00:10:04,910
And this will be maybe like the end of our flow here, so we'll discover new products, one to make

136
00:10:04,920 --> 00:10:07,080
sure, but things have great you copy.

137
00:10:07,250 --> 00:10:08,510
We want to get people excited.

138
00:10:08,780 --> 00:10:10,100
Like I said about the product.

139
00:10:10,340 --> 00:10:16,880
So instead of saying something like submit or something like next, you know, try to have some fun

140
00:10:16,880 --> 00:10:20,480
with the way you write that copy, let's give it some extra thought.

141
00:10:20,490 --> 00:10:20,840
So.

142
00:10:22,820 --> 00:10:27,830
Something like discovering new products, it gives more meaning to this actual action.

143
00:10:28,700 --> 00:10:32,300
OK, so let's use humans for Fatemah over here.

144
00:10:32,300 --> 00:10:35,680
So I'm going to see what I have here.

145
00:10:37,030 --> 00:10:38,500
I'm going to pick this lady.

146
00:10:39,810 --> 00:10:46,320
Great, and then a right to can see, click and see, let's not worry about the frame, at least right

147
00:10:46,320 --> 00:10:48,750
now we're going to paste her right into our.

148
00:10:50,240 --> 00:10:58,820
Frame it over here, we can edit some of the colors so you can see I want to match our brand colors

149
00:10:59,660 --> 00:11:03,410
so like we can do something like this really quickly.

150
00:11:14,340 --> 00:11:18,020
Doesn't need to be perfect, especially if we're just kind of building our concept, but it's a good

151
00:11:18,020 --> 00:11:21,020
way to kind of get an understanding of it.

152
00:11:21,050 --> 00:11:23,870
Hey, does this illustration actually when I need.

153
00:11:26,960 --> 00:11:34,070
For this, we can do like a nice heel or something I like I like to feel it can work.

154
00:11:37,790 --> 00:11:45,680
He like that this copy, that hex code, because I think there's a darker red that we can use it on.

155
00:11:46,710 --> 00:11:47,230
Perfect.

156
00:11:47,540 --> 00:11:49,630
Let's bring that down and there we go.

157
00:11:49,640 --> 00:11:52,820
We kind of have like a little competition here and we can even build off of this.

158
00:11:52,820 --> 00:11:56,270
Let's bring in some background pieces to make this a little more interesting and maybe make it actually

159
00:11:56,270 --> 00:11:58,610
convey, like some sort of quickness.

160
00:11:58,640 --> 00:12:02,120
So what do we have here?

161
00:12:02,750 --> 00:12:07,820
Let's find some background images like we can have something like this.

162
00:12:10,140 --> 00:12:15,480
So you can bring this into the frame just to add a little bit more visual interest, so send it to the

163
00:12:15,480 --> 00:12:15,930
back.

164
00:12:16,530 --> 00:12:17,130
Perfect.

165
00:12:17,160 --> 00:12:20,570
We have a clock, so definitely a clock could work.

166
00:12:27,410 --> 00:12:31,790
And there you go, I mean, it doesn't take much to actually just start creating a scene.

167
00:12:33,490 --> 00:12:34,630
Let's paste that right in.

168
00:12:39,230 --> 00:12:41,150
I mean, this may get a little too busy.

169
00:12:42,850 --> 00:12:51,550
But we have something really nice and it doesn't necessarily match our brand colors just yet, but I

170
00:12:51,550 --> 00:12:55,450
mean, we're well on our way to kind of going through that visual exploration.

171
00:12:56,810 --> 00:13:00,680
And understanding what's going to work and what isn't going to work, I really like this style here

172
00:13:00,680 --> 00:13:02,310
and the style actually it's fun, too.

173
00:13:02,330 --> 00:13:03,920
It really depends on the tone of your brand.

174
00:13:03,920 --> 00:13:06,030
Like this seems much more fun, much more joyful.

175
00:13:06,350 --> 00:13:07,820
There seems a little bit more serious.

176
00:13:08,450 --> 00:13:09,770
It really depends what you're going for.

177
00:13:10,370 --> 00:13:12,050
Uses as inspiration.

178
00:13:12,440 --> 00:13:17,510
Just get creative and you can make some really exciting and interesting scenes.

179
00:13:17,940 --> 00:13:21,230
And just like that, we have a couple of onboarding screens that we can work with.

180
00:13:22,380 --> 00:13:28,840
So take some time by yourself, go through this process, figure out what illustrations could work for

181
00:13:28,840 --> 00:13:34,320
an onboard screen, think about what our client would want, what the goal of our product is.

182
00:13:34,650 --> 00:13:36,570
Users can get results really quickly.

183
00:13:36,580 --> 00:13:38,610
You just can get personalized results.

184
00:13:39,550 --> 00:13:44,830
Personalised products, personalized recommendations, so you can play on that and try to find some

185
00:13:44,830 --> 00:13:50,980
illustrations that could really suit that and really get our users excited for the next step within

186
00:13:50,980 --> 00:13:54,550
that tutorial or even just getting excited to actually use our application.