This course will be retired on September 13, 2021. We recommend "Introduction to Design Systems" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Using a UI kit, let's start creating a design using the Google Material Design system.
Resources and Documentation
Project Downloads
- Material Design UI Kit for Adobe XD - This compressed zip file contains a UI kit for Google Material Design created in Adobe XD. It also includes the initial wireframe created in Adobe XD as well as sample photos that are used in the project.
[MUSIC]
0:00
There's still more to cover in
the material documentation, but,
0:04
we have enough to get
started on a prototype.
0:08
Like I said before,
I'm going to use Adobe XD in these videos.
0:10
But you can use other
prototyping tools if you'd like.
0:14
If you're using Sketch, I recommend you
use Google's official material plugin.
0:18
It has a lot of tools of its own
that can speed up the creation
0:23
of a design that uses the material system.
0:27
You can find a link in the notes
associated with this video.
0:30
I am going to use AdobeXSD, so that my
examples are a little more tool agnostic
0:33
because different companies may ask you to
use different tools for your design work,.
0:39
So it's important to know how to do these
same things without the aid of a plugin.
0:45
If you are following along in Adobe XD,
I recommend you download Adobe's XD UI
0:50
kit for material design, that's linked
in the notes associated with this video.
0:57
You can find the UI kit on Adobe's site.
1:02
But I've also added some icons
from the material design set
1:04
that we'll need that are not
included in the standard kit.
1:08
So, you should get it from the notes
associated with this video.
1:12
Once you've opened the UI kit,
it will look something like this.
1:16
You can follow along without
using this particular UI kit but
1:21
it does make prototyping go faster.
1:24
For the most part, I'll just use this
to copy and paste elements into place.
1:27
Let's take a quick look at this UI kit.
1:32
It includes colors, fonts and
1:35
UI widgets that can help
guide the creation of an app.
1:37
These top row of art boards
includes instructions but,
1:41
will rely on the official
documentation instead.
1:44
In the second row of art boards,
1:49
the third art board in the middle
includes specific examples of elevation.
1:51
Demonstrating how the shadow should
change for various height levels.
1:55
And if we zoom back out,
the remaining art boards grouped
2:03
together at the bottom are all
examples of components.
2:08
We'll copy and
paste some of these later on,
2:14
but we don't need them right this second.
2:16
One more thing before we start, I'm
going to go back to my original mock up.
2:19
Just as a reminder of what
features we want to include.
2:26
It's not totally necessary but, if you
want to download this Adobe XD file for
2:30
yourself, you can find a link in
the notes associated with this video.
2:35
There's a large area for photos,
which should be the main focus and
2:40
then there's some navigation
along the top for uploading,
2:45
search, settings and signing out.
2:49
And then on the left side we have
some filters for the photos.
2:51
These would essentially offer the same
view but just narrow down the photos we're
2:57
looking at currently by date,
location, by people and so forth.
3:01
In the same doc,
I'm going to zoom out just a bit.
3:07
And then using the art board tool,
3:12
I'm going to create an art board,
for Android mobile.
3:15
And we'll create more art boards later,
3:21
but, that should be
enough to get us started.
3:24
When you're done, save your work.
3:28
Now we're ready to keep going.
3:30
You need to sign up for Treehouse in order to download course files.
Sign up