Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Making Mockups20:11 with Hope Armstrong
Learn how to create a mockup in Adobe XD using Apple's UI kit.
- Human Interface Guidelines - Apple
- UI kit for Adobe XD - Apple
- San Francisco font - Apple
- SF Symbols (macOS 10.14.4 or later) or Font Awesome (any platform)
Resources for non-Adobe XD users:
- SF Symbols: The benefits and how to use them - by Antoine van der Lee
Welcome back. 0:01 Now, let's start mocking up stuff. 0:03 I'll demonstrate making a high-fidelity mockup in Adobe XD. 0:06 But if you already have a favorite design tool, feel free to use it. 0:10 Tools such as Figma, or 0:16 Sketch have a lot of the same resources I'll use in this demo. 0:17 I'll start with these wireframes I made for news article layout on an iPhone app. 0:21 Since I'm creating an iOS app, I'll refer to Apple's human interface guidelines. 0:27 I'll use Apple's UI kit for Adobe XD. 0:32 A UI kit provides patterns for native UI elements such as components, 0:35 cards, navigation, filters, social share, and 0:40 so on, that you can reuse in your app designs. 0:45 Think of them as stickers that you can copy and paste in your mockup. 0:48 Download the UI kit and check it out for yourself. 0:53 In order to use Apple's UI kit, be sure to also install the SF Pro font 0:56 SF Pro is the native font pre-installed on Apple 1:04 devices that run on iOS, macOS and tvOS. 1:09 If you're on a Mac, also installed the SF symbols app as an icon resource. 1:13 If you're on Windows or another platform, 1:18 check out an alternative icon resource in the teachers notes. 1:20 SF symbols is an icon library created by Apple. 1:24 It contains free icons to use in your app. 1:28 Although, they can't be use for any branding or trademark purposes and 1:31 some have additional license restrictions. 1:35 The great news is the vast majority are free to use with minimal restrictions. 1:38 The components in the UI kit frequently make use of these icons. 1:44 Before I move on, I wanna offer a tip, 1:49 in case you get stuck installing these resources. 1:51 You may encounter missing icons that appear as a question mark in a square, or 1:55 missing fonts which are noted in the assets and text sections of XD. 2:00 This can happen if there's a version conflict with the fonts. 2:05 This happened to me since I had an older version of the fonts on my computer. 2:08 Try removing or uninstalling the fonts, and 2:12 reinstalling the latest versions from the Apple Developer resources website. 2:16 Another troubleshooting tip is to double check the fonts are enabled. 2:21 If you're using a Mac, check on font book under computer or 2:25 user to ensure the fonts are enabled. 2:29 If you're using a PC, check in your font manager. 2:33 The first screen I'll design is the home screen. 2:37 I'll copy and paste the tabbed app artboard from the Apple UI kit. 2:40 That gives me the overall shape of an iPhone, 2:46 the taskbar, toolbar, and home button. 2:48 So I actually find it difficult to select elements when the display 2:53 shape is shown here because it's a layer that's sitting on top of everything else. 2:58 And it's very easy to select that when you actually wanna select stuff that's 3:02 underneath it. 3:06 So for now, while I'm working on the mockup, 3:07 I just like to hide the display shape. 3:09 And then later on, when I wanna see how that will look, I can turn it back on. 3:12 So now, I'll trim the tabs down to three tabs. 3:18 And you can see here that matches how it is in the wireframe. 3:24 So we just need Home, Topics, and Personalize. 3:27 I'll use the house icon for the Home tab, the book icon for 3:47 the Topics icon, and the wand and stars icon for Personalize. 3:52 When you find the icon you like, just select it and 3:57 then on your keyboard, do a copy. 4:00 So if you're Mac, it's Cmd+C. 4:02 And then you can paste it into Adobe XD. 4:04 So just select the icon and then Cmd+V to paste. 4:08 So just select the icon and then Cmd+V to paste it if you're on Mac. 4:15 And if you're on Windows, just do your normal copy and paste commands for 4:20 keyboard. 4:24 So I'm just gonna go through and copy in all those icons. 4:26 All right, now that I'm happy with how that tab bar looks, 4:32 I wanna turn it into a component. 4:35 And as you can see here, 4:38 it's actually a linked component because I copied it from Apple's UI kit. 4:39 And so, It’s sort of linking off to that other file. 4:44 I actually just wanna turn it into a local component. 4:48 So to do that, I can go to the Assets panel, and 4:51 then scroll down where it says the Components. 4:56 And here it is, it's the Tab Bar Component. 4:59 And I just want to right-click, and then click Make Local Component. 5:03 So you'd want to use the links components if you are working on a file that 5:11 had all your design system in it. 5:16 And you just wanted to update that one file so 5:18 it could trickle across multiple Adobe XD files. 5:22 But in this case, I just wanna keep Apple's UI kit as its own file and 5:25 not use that as my own personal design system. 5:29 So in this case, I just wanted to borrow from the UI kit, throw it in here, 5:33 and it's locally a component just for this file. 5:38 Regardless, so now that it's a component, 5:45 I can use it very easily across all the artboards within this file. 5:49 So now, instead of having to reinvent the wheel every time I 5:54 want to create the tab bar, I can just edit it here in one spot. 5:59 So, now I want to add the logo to the top of the screen. 6:07 So I wanna have this colored rectangle background behind 6:35 the taskbar to accentuate the logo. 6:39 So let's grab the logo here from the brand's artboard, and then paste it in. 6:45 And that looks really great. 6:54 I also wanna make sure I'm renaming these artboards as I go along. 6:56 So we're working on the the home screen for this app. 6:59 And I wanna copy in all of this content that I have here because I'm 7:03 gonna build off of that. 7:07 So selecting that home screen, I'm just gonna paste in everything. 7:10 And you see how it's overlapping here. 7:19 We just wanna make sure we right-click and send to the back, so 7:21 that way the tab bar is on top. 7:25 And I'm gonna do Cmd+G just to turn everything into 7:28 a group, And label that content. 7:32 Great. 7:41 Now, I have some colors in mind for these labels, 7:43 so health, environment and lifestyle. 7:46 Those are the different news categories, and I wanna color code them. 7:50 So I wanna go back to the brand board here and select all these colors and 7:56 add them to my palette. 8:00 So I'm just selecting each color, and then adding them here. 8:08 By clicking this + icon, and that just saves them for later. 8:14 So I can easily refer to those same colors, when I wanna apply them. 8:17 And also, have a couple gradients here. 8:24 And so, now you can see here this color. 8:29 I could just easily select it from the palette here to make sure I'm always using 8:33 this light green. 8:38 Okay, so for health, I wanna make it that nice pink color. 8:41 Environment, I think green would look nice, 8:51 it has that kind of earthy nature look to it. 8:54 And lifestyle, let's do the purple. 8:58 And then now, I wanna replace all that placeholder text that 9:05 worked really well in the wireframe with actual content. 9:09 So I have this content off the screen here. 9:13 I'm just gonna copy it in for time's sake. 9:16 All right, this is looking great. 9:21 I'll move on to the article view now. 9:23 All right, so I've copied my artboard and I've renamed it article. 9:26 And then, I'm just gonna copy all the contents from the article view and 9:31 paste it over. 9:36 And Send to Back. 9:40 And once again, I'm just gonna group it and call it content. 9:45 And then just a note, you can also copy all the text styles from the Apple UI kit. 9:51 And if you do, 9:57 I just wanted to note something about the way that the text can be resized. 9:58 So let's say I copy this. 10:04 And then if I paste it on here, you'll see that the only option for 10:07 resizing this text is through this little dot here. 10:13 And that makes the text larger or smaller. 10:17 But if you're hoping to resize the actual blue box here and, 10:20 say, make this a more narrow text box, the way you do that is down here. 10:25 So see how this is selected? 10:33 Click this and then it turns it into area text, and 10:37 that's when you have more dots for more control. 10:42 So I could make this spanned really long, 10:46 I could make it shorter and get cut off, I could make it tall and wrap. 10:48 And so you'll notice that when you copy the text over from the UI kit, 10:54 it always starts out as point text. 10:59 So point text changes the font size, 11:01 whereas the area text changes the actual dimensions of the text box. 11:04 So hopefully that helps you out as you're trying to wrangle the text in here. 11:13 And then for this screen, I'll add the actual content as well. 11:19 So in the standard iPhone view, 11:24 the article gets clipped off pretty early on in the text. 11:26 But since I want to design for the entire article, 11:30 I can stretch the height of the artboard to show all of it at once. 11:33 I've actually already designed this view, and 11:38 I'll paste it in to show you how it looks. 11:41 Now, you'll notice there are a couple new pieces to this screen here. 11:45 So I'll show you how I added those in now. 11:48 Now let's add a couple more navigation pieces. 11:52 I'll grab a navigation bar from the UI kit. 11:55 I'll hide the Right Accessory for now, I don't think I need an action over there. 12:02 I want this to just say Back, and that'll just lead folks back to the home screen. 12:09 And this will just say the name of the app, YORLY news. 12:15 I'll just stretch that out so we can see all that text and center align it 12:24 All right, so now I need a toolbar. 12:33 So let's pop over to the UI kit again. 12:39 All right, I'll grab this toolbar. 12:43 And then same concept as before, 12:48 I just wanna replace these icons with icons that I want. 12:50 And you can see I actually already did this here for 12:54 this view that I just showed you, so I'm just gonna copy this over. 12:57 So I just have a back button, heart to like the article, 13:03 a little comment box so that way you can comment on the article, and 13:09 then a share icon so that way you can share it through email, for example. 13:13 All right, so this is basically two different ways to do this article view. 13:20 So on the left here, it's kind of a limited view of how this page looks, but 13:25 this is actually in proportion to how you would see it on an iPhone. 13:29 And then on the right here, 13:34 I have the entire page in view because I wanna actually show how I wanna do this. 13:36 Pull quote, for instance, I have a really subtle, wavy gradient back here, 13:42 this shape, it gives a little bit of interest to the page. 13:48 And then I also have this image here with a caption, Another headline, 13:53 and this little blurb here that talks about the related stories and 14:00 links off to related articles. 14:05 So for this option, you'll notice that the toolbar 14:09 actually just stays in place as it would appear on the iPhone. 14:12 And that just makes it easy if you want to demo how the scrolling looks. 14:16 So if you select the artboard, this little 14:20 dotted line shows up, and that is where the vertical scrolling happens. 14:24 So you can see here the default state would be none, but 14:30 if you set it to vertical, you can set it to stop where that toolbar ends. 14:33 Oops, that's not it. 14:43 So the normal height of this iPhone screen is 812. 14:45 So I just take that number, add it to this viewport height for 14:50 the scrolling, and then it knows to pin that toolbar at the bottom. 14:55 So you can see how this looks if I click Play, and I can scroll down the page. 15:01 So we're not gonna get into interactive prototyping in this workshop, but 15:09 I just wanted to show you that if you were curious to see how it really looks in 15:13 action. 15:17 It is pretty exciting. 15:18 All right, so next up is the article share screen. 15:20 For this, I'll copy the activity view control from the UI kit. 15:24 All right, so I just customized the title there, and otherwise it's pretty default. 15:38 All right, now I'll mock up the comment panel, 15:46 just gonna copy Article Share, 15:51 rename it Comment, delete this activity view. 15:54 Keep that semi-translucent gray rectangle that's 15:59 overlaying everything because this, again, will be another overlay. 16:05 All right, that's just my little placeholder for the X. 16:18 Actually gonna copy this from SF Symbols again. 16:21 I'm gonna copy in a little icon of a user here also from SF Symbols. 16:41 Make this a little smaller, 16:51 And tighten this line height a bit. 17:06 I wanna lighten this to a lighter gray. 17:08 And then let's zoom out a bit, I just wanna copy this a few times here. 17:13 Let's make this a little taller, and that way I can put a few more comments in. 17:24 And then I wanna paste in some realistic comments in here. 17:29 And then I noticed this one actually wraps to three lines, so 17:36 I'll make that a little bigger, move this one down. 17:40 And then I wanna add a rectangle here, 17:45 Get a light gray. 17:54 Add some border radius, I'll make it the same width as the other content in here. 18:00 And I've got some placeholder text. 18:08 Seems a little big, let's tone it down a bit. 18:14 And all right, now let's mock up the next screen, 18:18 which is what the user will see when they click on the comment box. 18:22 So I'll copy the Comments artboard and I'll rename it to Comment Active. 18:28 So I wanna keep everything except for these comments here. 18:37 And I'll make the comment box larger to give them more space to type. 18:43 And then you can see here I just did the, I don't know the technical term, but 18:48 the the vertical line character on your keyboard, just above the Enter button. 18:53 And it looks like a cursor, so it looks like I'm actively gonna type in this 19:01 box here, which is what I want, that's what effect I want here. 19:06 And then I'll just zoom in a bit and I wanna add a button that says Post. 19:11 And now I wanna copy the keyboard from the UI kit. 19:26 So you can see, my text box is actually too tall right now, so 19:41 I'm just gonna shorten this a bit. 19:46 I'm gonna group this button so it's easier to select. 19:51 Nudge that 12 pixels apart there and make sure that's aligned to the bottom. 20:00 Okay, great. 20:09
You need to sign up for Treehouse in order to download course files.Sign up