Preview
Video Player
00:00
00:00
The First Screen
5:35The 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