Document Setup

[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