- [Instructor] Now, when you are designing for mobile,
you need to keep in mind that there's going to be
a status bar here, and essentially,
how would you get that status bar and
how would you get ahold of those UI kits,
'cause we want to be able to use all of those elements
that are provided by iOS and Google Material, in this case.
Check it out, File, Get UI Kits, Apple iOS,
and that's what I'm going to select.
It's going to take me to that site,
Photoshop Sketch, and XD being the smallest one,
we will just accept, please read this agreement
thoroughly before accepting.
I'm just going to click OK right now
'cause I've already read it,
and we'll dive into this Adobe XD ZIP file.
Install the fonts, and then you can take a look
at the different UI elements.
So we're basically diving into the
design templates and guides.
Double-clicking on that file,
we can see all of these elements that we can use.
Look at all these!
It's just wonderful.
Anything you'd want, the keyboard, any sort of popup,
so if they click the Twitter button
while I want this to pop up, you get the idea.
But you can see UI elements right up here,
I need this status bar, all right.
So this is what I'm going to use,
and I'll just grab this one right here.
And copying it, closing that file,
going over here, making room for it,
moving that content down, and these elements down,
just holding down the Shift key,
and let's take a look at this even closer, if we can.
Something like that, repositioning everything
to make sure it fits, pasting this in, here it is.
We can drop that right up there, okay?
So this is, for the six, seven, and eight plus,
but essentially, this is the status bar
that would go right here, and if you click inside of it,
notice how you can select all those individual elements
as well, so everything is actually made in Adobe XD
and editable in case you wanted to change
the time or whatever.
So this is for iOS.
We can go beyond that, because what I want to do is
actually grab the Google Material UI kit as well,
right over here, for Android.
Let's just make room for it, just like I was doing
a second ago, it's going to be the same process.
Slightly different, actually a little bit simpler,
to be honest with you, 'cause when you go to File,
Get UI Kits for Google Material,
it's going to take you out to that site,
you'll see it right here, very very small,
'cause really you just need this one file.
Everything's made in XD.
Opening that up, we can see it right here.
In fact, I encourage you to just use the artboards
off to the sides, you can kind of get an idea
for the bottom toolbar, the light theme, right?
You can see the light theme, which is actually what I want.
I want to be able to grab this status bar right here,
copying it, closing that file, pasting it in,
and moving it over right here.
You get the idea, kind of like that.
All right, so that's what I want to do.
Use those UI kits, get familiar with them,
they really are really good, but I'm going to point out
one other resource for you.
Check this out, Get UI Kits, Wireframes.
So this is a wireframe UI kit called Wires,
okay, so feel free to just search for it on Behance.
Wires, Adobe XD, you could download this kit.
It's actually really cool because there's
a number of elements in here,
so we can take a look at mobile,
we can take a look at web, if we double-click on web,
you can see all of these elements that you can use.
So why recreate things when you could potentially
use something that's already created?
Again, this is just a wireframe, but again,
nice elements that you don't have to recreate
or even think about much.
So use those resources.
They're all right under Get UI Kits,
and there's also Windows as well.
So take advantage of those,
get it squared away for your specific platform
to make sure it meets all of those criteria
for those platforms.