The First Screen5:35 with Anwar Montasir
The app now has three categories to navigate between. In this video, we’ll begin creating screens of content.
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