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

The First Screen

5:35 with Anwar Montasir

The app now has three categories to navigate between. In this video, we’ll begin creating screens of content.

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

    To get my run stats page started, I'll copy and 0:00
    paste the Navigation Bar pattern from the UI kit. 0:04
    My Navigation Bar includes the title of the current page, 0:12
    a link to navigate backwards from the current month to a calendar view, 0:19
    and a share icon should the user wish to share their currently viewed stats. 0:25
    You might have noticed the left arrow icon extends just a bit 0:35
    outside of the designated safe area. 0:40
    But since this was copied from the UI kit, I'll assume that's the correct position. 0:43
    I'm also going to label the share icon. 0:49
    Although I'm using the standard iOS icon for the share action, 1:03
    I'm not confident it will be recognized without a text label. 1:07
    Unlike the trash can for delete, or the magnifying glass for 1:12
    search, there isn't a universal cross-platform icon for sharing. 1:16
    I'm including the text label to make sure users understand this icon. 1:22
    From there, I'll create the rest of the content for 1:28
    the run stats screen beginning with stats for today's run. 1:32
    I'll present four pieces of run data and spread them out horizontally. 1:44
    I'm using thin lines to separate my pieces of data. 2:16
    As I work on the diagram of this week's runs, 2:33
    notice I've provided a file called run-app-components. 2:39
    Feel free to create your own diagrams using the pen tool if you like, 2:44
    but I'm going to copy from the provided document and 2:50
    paste into my running app wireframe. 2:53
    As I complete a list of recent runs, 2:57
    I'll copy and paste again from the run-app-components document. 3:04
    I could extend the art board, if I wanted to create a prototype 3:12
    with vertical scrolling to reveal more of this list. 3:17
    However, I'm just going to use a rectangular mask 3:22
    to reveal part of the list for now. 3:26
    Once that's complete, I'll duplicate my artboard and call my new artboard Share. 3:42
    I'll make use of an iOS pattern called a Context Menu 3:50
    to demonstrate my social sharing options. 3:55
    I'll copy the Context Menu from the UI Kit, 4:00
    paste into my new art board and reposition the menu so it's close to my Share icon. 4:06
    I'll change the text labels to read Twitter, Instagram, and Facebook, 4:18
    since these are three places I might like to share my run progress. 4:24
    Social media icons aren't included in SF symbols, 4:30
    so I'll switch to the Font Awesome Brands font 4:35
    and use it to create recognizable icons for 4:46
    Twitter, Instagram, 4:50
    and Facebook. 5:08
    That concludes two views of my run stats screen. 5:22
    In the next video, we'll conclude this demo wireframe 5:27
    by creating a screen where runners can record a new run. 5:31

    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