[MUSIC]

There's still more to cover in the material documentation, but,

we have enough to get started on a prototype.

Like I said before, I'm going to use Adobe XD in these videos.

But you can use other prototyping tools if you'd like.

If you're using Sketch, I recommend you use Google's official material plugin.

It has a lot of tools of its own that can speed up the creation

of a design that uses the material system.

You can find a link in the notes associated with this video.

I am going to use AdobeXSD, so that my examples are a little more tool agnostic

because different companies may ask you to use different tools for your design work,.

So it's important to know how to do these same things without the aid of a plugin.

If you are following along in Adobe XD, I recommend you download Adobe's XD UI

kit for material design, that's linked in the notes associated with this video.

You can find the UI kit on Adobe's site.

But I've also added some icons from the material design set

that we'll need that are not included in the standard kit.

So, you should get it from the notes associated with this video.

Once you've opened the UI kit, it will look something like this.

You can follow along without using this particular UI kit but

it does make prototyping go faster.

For the most part, I'll just use this to copy and paste elements into place.

Let's take a quick look at this UI kit.

It includes colors, fonts and

UI widgets that can help guide the creation of an app.

These top row of art boards includes instructions but,

will rely on the official documentation instead.

In the second row of art boards,

the third art board in the middle includes specific examples of elevation.

Demonstrating how the shadow should change for various height levels.

And if we zoom back out, the remaining art boards grouped

together at the bottom are all examples of components.

We'll copy and paste some of these later on,

but we don't need them right this second.

One more thing before we start, I'm going to go back to my original mock up.

Just as a reminder of what features we want to include.

It's not totally necessary but, if you want to download this Adobe XD file for

yourself, you can find a link in the notes associated with this video.

There's a large area for photos, which should be the main focus and

then there's some navigation along the top for uploading,

search, settings and signing out.

And then on the left side we have some filters for the photos.

These would essentially offer the same view but just narrow down the photos we're

looking at currently by date, location, by people and so forth.

In the same doc, I'm going to zoom out just a bit.

And then using the art board tool,

I'm going to create an art board, for Android mobile.

And we'll create more art boards later,

but, that should be enough to get us started.

When you're done, save your work.

Now we're ready to keep going.