1
00:00:00,940 --> 00:00:04,526
To get my run stats page started,
I'll copy and

2
00:00:04,526 --> 00:00:08,301
paste the Navigation Bar
pattern from the UI kit.

3
00:00:12,859 --> 00:00:16,799
My Navigation Bar includes
the title of the current page,

4
00:00:19,519 --> 00:00:25,865
a link to navigate backwards from
the current month to a calendar view,

5
00:00:25,865 --> 00:00:32,656
and a share icon should the user wish
to share their currently viewed stats.

6
00:00:35,689 --> 00:00:40,164
You might have noticed the left
arrow icon extends just a bit

7
00:00:40,164 --> 00:00:43,910
outside of the designated safe area.

8
00:00:43,910 --> 00:00:48,320
But since this was copied from the UI kit,
I'll assume that's the correct position.

9
00:00:49,410 --> 00:00:52,361
I'm also going to label the share icon.

10
00:01:03,489 --> 00:01:07,764
Although I'm using the standard
iOS icon for the share action,

11
00:01:07,764 --> 00:01:12,760
I'm not confident it will be
recognized without a text label.

12
00:01:12,760 --> 00:01:16,980
Unlike the trash can for delete,
or the magnifying glass for

13
00:01:16,980 --> 00:01:22,790
search, there isn't a universal
cross-platform icon for sharing.

14
00:01:22,790 --> 00:01:27,270
I'm including the text label to make
sure users understand this icon.

15
00:01:28,880 --> 00:01:32,378
From there,
I'll create the rest of the content for

16
00:01:32,378 --> 00:01:36,442
the run stats screen beginning
with stats for today's run.

17
00:01:44,862 --> 00:01:49,889
I'll present four pieces of run data and
spread them out horizontally.

18
00:02:16,139 --> 00:02:20,688
I'm using thin lines to
separate my pieces of data.

19
00:02:33,123 --> 00:02:36,597
As I work on the diagram
of this week's runs,

20
00:02:39,289 --> 00:02:43,440
notice I've provided a file
called run-app-components.

21
00:02:44,570 --> 00:02:48,790
Feel free to create your own diagrams
using the pen tool if you like,

22
00:02:50,270 --> 00:02:53,480
but I'm going to copy from
the provided document and

23
00:02:53,480 --> 00:02:55,845
paste into my running app wireframe.

24
00:02:57,900 --> 00:03:00,443
As I complete a list of recent runs,

25
00:03:04,525 --> 00:03:08,719
I'll copy and paste again from
the run-app-components document.

26
00:03:12,362 --> 00:03:17,941
I could extend the art board,
if I wanted to create a prototype

27
00:03:17,941 --> 00:03:22,780
with vertical scrolling to
reveal more of this list.

28
00:03:22,780 --> 00:03:26,750
However, I'm just going
to use a rectangular mask

29
00:03:26,750 --> 00:03:29,439
to reveal part of the list for now.

30
00:03:42,817 --> 00:03:49,320
Once that's complete, I'll duplicate my
artboard and call my new artboard Share.

31
00:03:50,890 --> 00:03:55,680
I'll make use of an iOS
pattern called a Context Menu

32
00:03:55,680 --> 00:03:59,200
to demonstrate my social sharing options.

33
00:04:00,790 --> 00:04:03,827
I'll copy the Context
Menu from the UI Kit,

34
00:04:06,289 --> 00:04:12,973
paste into my new art board and reposition
the menu so it's close to my Share icon.

35
00:04:18,114 --> 00:04:24,360
I'll change the text labels to read
Twitter, Instagram, and Facebook,

36
00:04:24,360 --> 00:04:28,600
since these are three places
I might like to share my run progress.

37
00:04:30,760 --> 00:04:35,103
Social media icons aren't
included in SF symbols,

38
00:04:35,103 --> 00:04:38,963
so I'll switch to the Font
Awesome Brands font

39
00:04:46,600 --> 00:04:50,164
and use it to create
recognizable icons for

40
00:04:50,164 --> 00:04:56,479
Twitter, Instagram,

41
00:05:08,975 --> 00:05:10,287
and Facebook.

42
00:05:22,961 --> 00:05:27,668
That concludes two views
of my run stats screen.

43
00:05:27,668 --> 00:05:31,478
In the next video,
we'll conclude this demo wireframe

44
00:05:31,478 --> 00:05:35,378
by creating a screen where
runners can record a new run.