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

Well done!

You have completed Getting Started With Human Interface Guidelines!

Sign up for Treehouse Back to Library

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