Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Getting Started With Human Interface Guidelines

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Project setup

6: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.

SF Symbols App

Resources for non-Apple users

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up