1 00:00:00,000 --> 00:00:04,663 [MUSIC] 2 00:00:04,663 --> 00:00:09,419 One of the best ways to communicate with others in a mockup like this is to use 3 00:00:09,419 --> 00:00:14,050 multiple artboards to showcase different screens in the app. 4 00:00:14,050 --> 00:00:18,279 Then you can connect them together and create an interactive prototype. 5 00:00:20,070 --> 00:00:27,340 Imagine that a user of this app taps the Book button for the first trip. 6 00:00:27,340 --> 00:00:31,290 What should happen next, and what screen should they see? 7 00:00:31,290 --> 00:00:34,170 For each new screen in the app we should create 8 00:00:34,170 --> 00:00:39,380 a separate artboard that we can link to using the prototyping tools. 9 00:00:39,380 --> 00:00:43,290 That will come later, but first, we need another artboard. 10 00:00:43,290 --> 00:00:48,320 From the left side toolbar, select the Artboard tool, 11 00:00:49,340 --> 00:00:53,610 or alternatively, hit the A button on your keyboard. 12 00:00:53,610 --> 00:01:01,530 Then in the Property Inspector, select the item that says iPhone 6/7/8, 13 00:01:01,530 --> 00:01:07,720 and this will create another artboard of the same size. 14 00:01:07,720 --> 00:01:13,510 Now we have two artboards, and we should name them so we don't get confused. 15 00:01:13,510 --> 00:01:15,960 This might seem trivial with just two artboards. 16 00:01:15,960 --> 00:01:21,410 But in a more complex design, it's helpful to know which is which. 17 00:01:21,410 --> 00:01:25,060 So I'm going to switch back to the selection tool. 18 00:01:25,060 --> 00:01:28,408 And in the artboards list on the left side, 19 00:01:28,408 --> 00:01:33,330 double-click the first artboard with the number 1. 20 00:01:33,330 --> 00:01:37,920 And rename it to something like, Index View, 21 00:01:39,400 --> 00:01:43,982 since it's a list or an index of all the trips. 22 00:01:43,982 --> 00:01:49,640 Then double-click the text of the new one and rename it to Trip View. 23 00:01:51,150 --> 00:01:57,720 Now, we need to copy the header from the previous artboard over to the new one. 24 00:01:57,720 --> 00:02:03,290 With the selection tool selected, drag a box around the toolbar, 25 00:02:03,290 --> 00:02:09,500 being careful not to select the first image and copy it to your clipboard. 26 00:02:09,500 --> 00:02:13,844 On Windows, you can hit Ctrl+C, and on Mac, hit Cmd+C. 27 00:02:15,050 --> 00:02:19,470 Then click the title of the new artboard, and 28 00:02:19,470 --> 00:02:23,800 on Windows, hit Ctrl+V, and on Mac, hit Cmd+ V, 29 00:02:24,810 --> 00:02:29,890 to paste it in the same place as the previous artboard. 30 00:02:29,890 --> 00:02:36,140 And of course, as Adobe XD points out, there are other ways to reuse objects, 31 00:02:36,140 --> 00:02:40,970 but for this simple example, we're just going to copy and 32 00:02:40,970 --> 00:02:45,210 paste just because we have two artboards. 33 00:02:45,210 --> 00:02:50,166 And instead of the title of the app, we should turn this into a back button so 34 00:02:50,166 --> 00:02:53,730 that users can go back to the previous page. 35 00:02:53,730 --> 00:02:58,230 Hit the T key on your keyboard to select the text tool, and 36 00:02:58,230 --> 00:03:02,920 then click on the title in the second artboard and 37 00:03:02,920 --> 00:03:08,540 change it to the word, Back, and hit Escape to accept the changes. 38 00:03:08,540 --> 00:03:12,350 And then in the Property Inspector, change it from Bold and 39 00:03:12,350 --> 00:03:15,450 Italic, to just plain Bold. 40 00:03:16,720 --> 00:03:22,790 Finally, tap the V key again to go back to the selection tool. 41 00:03:22,790 --> 00:03:27,740 And then hold down Shift and hit the right arrow key 3 times, 1, 2, 42 00:03:27,740 --> 00:03:33,680 3, to move it to the right by 30 pixels. 43 00:03:33,680 --> 00:03:36,640 And in the space that we've created here, 44 00:03:36,640 --> 00:03:41,140 we're going to draw a triangle that looks like a Back button. 45 00:03:41,140 --> 00:03:44,780 But there's no shape tool that can create a triangle. 46 00:03:44,780 --> 00:03:49,050 So in cases like this where we need to draw a custom shape, 47 00:03:49,050 --> 00:03:51,470 we can use the pen tool. 48 00:03:51,470 --> 00:03:56,210 Select the pen tool from the left side tool bar, or 49 00:03:56,210 --> 00:03:58,530 hit the P key on your keyboard. 50 00:03:59,920 --> 00:04:04,240 Then align your cursor so it's right around the top 51 00:04:04,240 --> 00:04:08,020 of the Back button, and then click. 52 00:04:09,280 --> 00:04:16,630 Then using the smart guides, draw a line straight downward, and click again. 53 00:04:18,090 --> 00:04:25,240 And then hold down the Shift key and make a diagonal line toward the upper left. 54 00:04:27,920 --> 00:04:32,860 And use the smart guides to make sure it's aligned with the top of the arrow. 55 00:04:34,320 --> 00:04:39,860 Then finally, close the shape by clicking on the first point again. 56 00:04:39,860 --> 00:04:44,030 Holding down Shift when drawing a diagonal like that will make sure that we're 57 00:04:44,030 --> 00:04:46,740 at a perfect 45 degree angle. 58 00:04:46,740 --> 00:04:53,089 Now, I'm going to zoom in just a bit so we can see this a bit better. 59 00:04:53,089 --> 00:04:56,169 And in the Property Inspector, 60 00:04:56,169 --> 00:05:01,309 we're going to remove the border and then add a Fill. 61 00:05:01,309 --> 00:05:06,223 Using the eye dropper tool, change it to the same yellow color that we've been 62 00:05:06,223 --> 00:05:11,800 using, which is probably most easily done by going for one of these buttons. 63 00:05:11,800 --> 00:05:17,550 Next, select the selection tool again and click away from the arrow and 64 00:05:17,550 --> 00:05:23,320 any of the blank area on the canvas to deselect the pen points. 65 00:05:23,320 --> 00:05:27,270 As you may have noticed, this is a perfect right triangle, but 66 00:05:27,270 --> 00:05:30,830 it's not pointing the direction that we want. 67 00:05:30,830 --> 00:05:36,870 To fix this, select the triangle again, and this time, you should see 68 00:05:36,870 --> 00:05:42,600 a bounding box with controls that will allow you resize and rotate the shape. 69 00:05:42,600 --> 00:05:47,910 So I'm going to move this over so that it's in the blank space that we created. 70 00:05:49,530 --> 00:05:54,560 And if you hover your mouse cursor over one of the corners, 71 00:05:54,560 --> 00:05:57,460 you should see a curved looking arrow. 72 00:05:58,650 --> 00:06:02,790 Then hold down Shift and click and 73 00:06:02,790 --> 00:06:09,390 drag to rotate the shape in sharp increments. 74 00:06:09,390 --> 00:06:13,293 And when it's pointing to the left, release. 75 00:06:15,750 --> 00:06:19,998 And I'm just going to reposition this a little bit more, and 76 00:06:19,998 --> 00:06:24,900 make sure it's middle aligned with the Back text there. 77 00:06:24,900 --> 00:06:26,700 And I think that looks pretty good. 78 00:06:28,070 --> 00:06:32,190 You can also resize this if it's too large or too small. 79 00:06:32,190 --> 00:06:35,840 In fact, I'm going to make it just a little bit smaller here. 80 00:06:35,840 --> 00:06:38,420 I'm holding down Option+Shift on Mac, 81 00:06:38,420 --> 00:06:44,430 you can hold down Alt+Shift on Windows to maintain the proportions. 82 00:06:45,870 --> 00:06:48,321 And I think that looks good. 83 00:06:48,321 --> 00:06:54,077 Now I'm going to zoom back out here, and as a last step, 84 00:06:54,077 --> 00:07:00,340 hold down Shift and select the Back button and the Back text. 85 00:07:02,120 --> 00:07:03,497 Then group them together. 86 00:07:03,497 --> 00:07:09,980 To do this on Windows, hit Ctrl+G, and on Mac, hit Cmd+G. 87 00:07:09,980 --> 00:07:15,230 Rename the group in the layer panel to Back Button. 88 00:07:17,560 --> 00:07:19,700 When you're done, save your work. 89 00:07:21,160 --> 00:07:26,400 Now that we have another artboard, we're ready to finish creating this new screen. 90 00:07:26,400 --> 00:07:30,730 Then we can link the art boards together to create an interactive prototype.