Project setup6:09 with Anwar Montasir
Creating our wireframe in Adobe XD will require a few design resources, some of which can be found on a web page called Apple Design Resources.
Creating our wireframe in Adobe XD will require a few design resources, 0:00 some of which can be found on a web page called Apple Design Resources. 0:06 From this page, we can download the iOS UI kit for Adobe XD which 0:12 will provide interactive iOS components we can paste into our own design. 0:17 We'll also install the SF Symbols app. 0:26 SF Symbols provides over 1,500 iOS system icons for use in our wireframe. 0:31 Unfortunately, at the time of this video this app is available only for 0:39 Mac users running Mac OS 10.14.4 or later. 0:47 If you are a PC user or using an older version of the Mac OS we'll use 0:52 Font Awesome, a popular icon set and toolkit, as an alternate source of icons. 0:57 Social networking icons aren't found in SF Symbols. 1:05 So no matter what platform you're on, go ahead and download Font Awesome. 1:10 Finally, make sure to install the system fonts for Apple platforms. 1:17 I'll only be using SF Pro in my demo wireframe. 1:23 But if you plan on making your own designs for 1:28 iOS devices, you might consider installing the complete set. 1:30 Note that Windows users might not be able to work with this downloaded .dmg file. 1:36 I've included alternate installation instructions in the teacher's notes. 1:43 I'm creating a new Adobe XD document using the dimensions of the iPhone X, XS, 1:49 and 11 Pro, as this artboard size will match the assets provided in the UI kit. 1:56 Older iPhones have a shorter viewport, but the width of the screen is the same. 2:03 I'll rename my artboard Run Stats. 2:09 From the UI kit I'll unlock and 2:15 copy the assets from the artboard labeled 2:20 iPhone portrait Status Bar Only. 2:26 This gives me the frame of the iPhone, 2:33 as well as the Status Bar showing things like time of day, and iPhone battery life. 2:36 This light green box shows the safe zones in my viewport. Body copy and 2:42 interactive content shouldn't extend beyond this green area. 2:48 My running app contains three categories of content: Run Stats, 2:55 the ability to record a New Run, and Profile. 3:00 So I'm thinking the Tab Bar will be an appropriate navigational element. 3:05 To be sure, 3:10 I'll review the Tab Bar documentation in the Human Interface Guidelines. 3:11 Tab Bars are quickly recognizable 3:17 by iOS audiences, and easily reached by the user's thumb. 3:19 But there are a few restrictions here I need to follow. 3:25 The tab bar should contain between three and five primary categories, 3:29 and should remain visible and consistent from screen-to-screen. 3:35 I'm grabbing the Tab Bar with three icons 3:42 from this sheet of UI elements in my iOS UI kit. 3:46 The icons are gray, with a blue icon indicating my current screen. 3:52 It would be possible to customize this look at the mockup stage. 3:58 But I'd want to weigh the pros and cons first, 4:03 since this native pattern is quickly recognized by iOS users. 4:06 For the navigation links, notice when you select the default star icons, 4:11 that they actually come from a font: SF Pro Text. 4:16 If you're able to run the SF Symbols app, you'll be able to search for 4:21 your desired symbol, copy it, and paste over the star. 4:27 I'm using symbols called chart.bar.fill, 4:34 large circle.fill.circle, and 4:39 person.fill. 4:45 If you don't have access to SF Symbols, 4:52 change your typeface to the free version of Font Awesome. 4:55 I'm navigating to the Icons page of fontawesome.com 5:07 to search for close equivalents and 5:12 filtering to view free icons only. 5:16 For each symbol, I'll use a link allowing me to copy Unicode glyph. 5:21 I'll use symbols called chart-bar, dot-circle, 5:31 and user. 5:43 I'm adding a horizontal separator at the top of my Tab Bar, though that's optional. 5:52 The app now has three categories of content to navigate between. 5:59 In the next video we'll begin creating screens of content. 6:05
You need to sign up for Treehouse in order to download course files.Sign up