Finishing the Interface4:59 with Nick Pettit
We're almost done creating our visual prototype. Let's finish things up!
Let's finish up this interface. 0:00 On the last screen, 0:01 we just need an iOS navigation bar with a few standard controls. 0:03 Let's head back to this Facebook iOS 10 Figma file. 0:08 And I'll hit 1 to zoom out. 0:13 And let's zoom in on the navigation bars. 0:15 It's this area right here just under the label components. 0:19 I'll hold down Z and just kind of circle this area. 0:24 There are a lot of choices here, 0:29 but we want users to be able to go back to the gallery. 0:31 And we also want an edit button and a share button. 0:35 So let's grab this navigation bar that's just third from the top. 0:39 And we can do that just by double-clicking anywhere in the blank area 0:45 of the title bar. 0:49 And let's copy that to our clip board. 0:51 Go over to our file. 0:53 We'll close up the editing screen, open the sharing screen. 0:56 Open the app section, and inside we will paste that. 1:01 Then let's just move that up. 1:05 Make sure it's centered, and just wait until it snaps to the screen. 1:10 Now if we zoom in on that. 1:16 That looks correct, cool. 1:20 Now we need two icons on the right side here. 1:23 So let's go back to that Facebook document. 1:26 And we'll zoom back out. 1:30 And on the right side here, there are what are labeled Glyphs. 1:32 Let's zoom into that area. 1:38 Zoom in a little more. 1:40 And I only want to use blue icons to match the title bar or 1:42 Navigation Bar, I should say. 1:47 So let's start out with some of these over here. 1:51 And let's use this blue pencil icon for sharing. 1:56 So I'll double click that, copy it. 2:00 And then let's just paste it in here. 2:07 Then let's go back and zoom out a little bit. 2:12 For the sharing button, let's use this icon from Safari, this 2:17 square box with an arrow pointing upward which typically means share in most apps. 2:23 We'll copy that. 2:29 And then again in the app group, we will paste it. 2:32 Now we just need to move these into position. 2:35 So let's move this first one over to the right here, and 2:43 just kind of generally get these into the right spots. 2:47 And then let's zoom in, and actually make sure that these are correct. 2:52 So, that looks good. 2:58 I want that to be aligned to the bottom right there. 2:59 This one I'll move over by pixel. 3:05 And move it down, so its aligned at the bottom there. 3:08 That looks good. 3:12 And now we can delete these other two place holder icons. 3:14 In the layers pallet, they're just labeled icon one and two. 3:17 So let's just select that one and that one and 3:20 then hit the delete key on your keyboard. 3:23 Now if we zoom back out. 3:28 And we'll just frame this up. 3:31 You can see that we now have this finished interface with a back button, 3:34 an edit button. 3:39 If we want to go back to the editing view and 3:40 a share button if we want to share this image to other places. 3:43 A bit of honesty, I am not totally sure 3:49 if this correctly follows Apple's human interface guidelines. 3:51 In fact, it probably doesn't, but that's okay for 3:56 the purposes of this quick prototype. 3:58 It's not really something I'd be worried about at this point of the process 4:01 because it's often a quick fix to just change out an icon like this. 4:05 So now let's make sure everything is kind of well organized in the Layers palette. 4:10 The Share button should really be inside of the App group. 4:16 And in fact, let's put it inside of this navigation bar. 4:22 And we'll just close these all up. 4:26 And then hit the 1 key on your keyboard to frame everything up. 4:30 And that's it for these for these screens. 4:36 This is good enough for a first iteration. 4:39 But in a real app, we'd likely have many more screens than this. 4:43 More editing controls, a screen showing a sharing menu, 4:47 different versions and states each screen can be in and so forth. 4:51 But this should be enough to get the idea across. 4:55
You need to sign up for Treehouse in order to download course files.Sign up