1
00:00:00,000 --> 00:00:05,029
[MUSIC]

2
00:00:05,029 --> 00:00:06,082
In this stage,

3
00:00:06,082 --> 00:00:11,200
I'll guide you through the completion
of a wireframe created in Adobe XD.

4
00:00:12,540 --> 00:00:16,940
This app for runners and
joggers features a few examples of common

5
00:00:16,940 --> 00:00:21,590
components outlined in the Human
Interface Guidelines documentation.

6
00:00:22,660 --> 00:00:28,160
These components include
the iOS Status Bar, a Tab Bar,

7
00:00:29,740 --> 00:00:37,215
a Navigation Bar,
a Context Menu, and an Action Sheet.

8
00:00:37,215 --> 00:00:42,461
We'll explore the documentation
covering these components and discuss

9
00:00:42,461 --> 00:00:48,675
the rules governing each component's
design, interactivity, and implementation.

10
00:00:48,675 --> 00:00:54,340
We'll make use of a downloadable
iOS UI kit for XD

11
00:00:54,340 --> 00:00:56,370
to simplify our workflow and

12
00:00:56,370 --> 00:00:59,805
enable us to better follow
the Human Interface Guidelines.

13
00:00:59,805 --> 00:01:03,753
We'll design with Apple system fonts and

14
00:01:03,753 --> 00:01:10,660
use system icons found in
Apple's SF Symbols library. Ready?

15
00:01:10,660 --> 00:01:13,330
Download the project files and
let's get started.