Hey and welcome back.
So we're going to talk about how to use illustrations for your product now, illustrations are super
fun when they look good.
There are tons of resources out there for imagery that could really help your designs have that extra
bit of polish.
I listed some in the beginning and we can go through how we can use those plugins for our product.
Now, the first plug in I mentioned was called blush.
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
to blush.
And there we go.
This is blush.
Now blushes a really great plug in, it's entirely free to an extent you do need to sign up if you want
larger pages, if you want CGS, you need to pay.
But it's a good way to get a sense of what you may want before you actually purchase it.
It also may give you some inspiration.
And if you're feeling brave, you can go and make your own illustrations.
So what I want to do here is let's kind of put together a quick onboarding screen.
So I'm going to do is I'm going to select my frame tools.
So I'm going to press if I'm going to actually select something like the iPhone 11 here and I'm going
to press command are to rename it and we can rename it to Onboarding.
Let's just create a quick on board screen.
Let's start with something for like a search.
So let's do this quickly.
Let's not worry about any grids or any sizing or anything too much.
These are just some concepts that were coming up with for our client habitual.
So let's just quickly type tool with T..
And here we go.
That's a little too big.
We can do is we can scale down.
OK.
Search for anything that you want.
That could be our little headline, usually these onboard screens have like a catchy headline.
They'll have an illustration, then they'll have like some buttons at the bottom, some text explaining
board engines are really great for getting users excited about the app before they even get to use it.
That's our little onboarding headline.
We can use the phrase like open sans or.
Let's call for Bold, let's bring that down just up not 40 forty's good, we're going to stick with
40 in one hundred and fifteen percent.
And for the opacity, let's just do something like 70, maybe 99 is good, and what we're going to do
here is we're in a duplicate that and we're going to bring that size a little down.
I want you to kind of play around as I'm doing this.
You can play around with whatever plugin you'd like and just come up with some screens.
You don't have to use exactly what I'm using.
So another plug in that I like to use, I mentioned it before, content real.
It's a great way to kind of just fill things up with content.
We got lorem ipsum and we're just going to put that in right there.
So 16, not bold.
We'll just do regular.
We'll open that up just a bit.
We can actually just kind of set it to a defined line height, so I'll send it to twenty four pixels
or go a little more space and we'll bring that opacity down so it's a little bit more readable.
OK, cool.
This is great.
Quickly create a button here.
Great.
So we lost there and there it is, so we have a button, let's just quickly choose a color here.
I know their brand is a little bit like a yellow, I don't have that yellow right now, but that's totally
fine.
We can kind of work with what we have, so we have.
Continue and then what we can do is we can have a little bit of text that just says back big distinction
between our primary and secondary, but in here.
We don't really want our users to hit that back button, but they shouldn't be trapped in our flow.
OK, now that we have that, let's close this plug in and let's look for illustration.
So we're going to bring up blush over time.
And let's look for some illustrations that can kind of suit this screen.
So what do we have here?
So we have a bunch of different options.
I like the see what this one has.
Cool.
There's a couple of different scenes that we can choose from.
We have these ones.
Small talk proposals, backgrounds, charts, living rooms, windows, I like that one.
That kind of suits the brand a bit, we got windows perfect, we can even customize the plants within
there.
That's a little redundant, but.
We can do something like that perfect that's already placed right into our file, which is so convenient.
You can also get a person in here as well.
Let's let's kind of reverse, which is a Kamandi, we're going to also get a person.
There we go.
It's going to put this dude right here.
And now we can actually just customize this person.
This person could be standing in the jeans, pants or shorts.
They'd be really happy, this guy, you can't really see his happy face because he's a mustache.
Well, that's much better.
Say hi.
Arms up like he's so happy he can search for anything that he wants, maybe some dance a little bit
more on Brand.
It looks pretty cool, or you could be even be running or jumping, which is pretty awesome.
So there you go, like we can quickly make an onboarding screen just with something like this.
I know they're Pang's and you may not get exactly what you want, but this should inspire you to start
searching for something and then you can buy those illustrations or you can even start building them
as you see fit.
These aren't too hard to build once you kind of have an understanding of what you're going for, especially
like the backgrounds play around with something like this to kind of set a scene, think about what
you want to convey to our users before they even get into the product, get them excited.
Now, the next plug in I love using is something called illustrations.
Let's bring that plug in.
Here it is.
It's kind of cool, right, got all these different looking dudes, guy in a bikini is fairly limited,
but at least you get the actual SPG layers with something like this.
And, you know, these aren't all that bad.
If you're going to here, you can open up a bunch of different options here.
So we have like Doodles by Pablo Stanley.
So he's put this plug in together.
So these are the doodles collection peeps, which are kind of cool.
You also have humans, which you can select different parts and then.
Work with those parts any which way you see fit.
I described the headier.
You can give this person like green hair or yellow hair, and then you can actually start creating scenes
based off of your brand colors, you know, they're faceless and it's kind of limited.
But it's pretty interesting what you can do with something like this, with just your imagination.
Now, the next plugin and the last option they have for a Sigma resource is called humans.
I just showed you humans, but this is a plug in just dedicated to it.
So here we go.
Humans for Sigma.
They already have set scenes, which makes it a lot easier instead of just picking individual human
parts.
You can still do that here, but I find that this is much more easier to use because it isn't as like
zoomed in.
And you have different things that you can use as well, like lamps, different objects, which is pretty
cool.
So what we're going to do is we're going to create another onboarding screen.
So I'm going to press F.
And select another frame over there.
I'm going to select the iPhone screen command are for renaming the screening that you onboarding again.
And so we're going to do is.
We're just going to.
Grab everything over here, command, see?
And what that's going to do is we're going to click on this, it's going to paste everything right in
there.
That's kind of interesting.
Let's actually create this frame one more time.
We can actually just drag that over.
OK, now let's rename it to, like, get results super quickly or super quick.
And this will be maybe like the end of our flow here, so we'll discover new products, one to make
sure, but things have great you copy.
We want to get people excited.
Like I said about the product.
So instead of saying something like submit or something like next, you know, try to have some fun
with the way you write that copy, let's give it some extra thought.
So.
Something like discovering new products, it gives more meaning to this actual action.
OK, so let's use humans for Fatemah over here.
So I'm going to see what I have here.
I'm going to pick this lady.
Great, and then a right to can see, click and see, let's not worry about the frame, at least right
now we're going to paste her right into our.
Frame it over here, we can edit some of the colors so you can see I want to match our brand colors
so like we can do something like this really quickly.
Doesn't need to be perfect, especially if we're just kind of building our concept, but it's a good
way to kind of get an understanding of it.
Hey, does this illustration actually when I need.
For this, we can do like a nice heel or something I like I like to feel it can work.
He like that this copy, that hex code, because I think there's a darker red that we can use it on.
Perfect.
Let's bring that down and there we go.
We kind of have like a little competition here and we can even build off of this.
Let's bring in some background pieces to make this a little more interesting and maybe make it actually
convey, like some sort of quickness.
So what do we have here?
Let's find some background images like we can have something like this.
So you can bring this into the frame just to add a little bit more visual interest, so send it to the
back.
Perfect.
We have a clock, so definitely a clock could work.
And there you go, I mean, it doesn't take much to actually just start creating a scene.
Let's paste that right in.
I mean, this may get a little too busy.
But we have something really nice and it doesn't necessarily match our brand colors just yet, but I
mean, we're well on our way to kind of going through that visual exploration.
And understanding what's going to work and what isn't going to work, I really like this style here
and the style actually it's fun, too.
It really depends on the tone of your brand.
Like this seems much more fun, much more joyful.
There seems a little bit more serious.
It really depends what you're going for.
Uses as inspiration.
Just get creative and you can make some really exciting and interesting scenes.
And just like that, we have a couple of onboarding screens that we can work with.
So take some time by yourself, go through this process, figure out what illustrations could work for
an onboard screen, think about what our client would want, what the goal of our product is.
Users can get results really quickly.
You just can get personalized results.
Personalised products, personalized recommendations, so you can play on that and try to find some
illustrations that could really suit that and really get our users excited for the next step within
that tutorial or even just getting excited to actually use our application.