1
00:00:00.06 --> 00:00:02.06
- [Instructor] Now we get
down to another fun part

2
00:00:02.06 --> 00:00:04.02
which is prototyping.

3
00:00:04.02 --> 00:00:05.07
So, what I want to do is I want to start

4
00:00:05.07 --> 00:00:10.01
linking these different
buttons to the various screens.

5
00:00:10.01 --> 00:00:11.08
And how you do that is by going into

6
00:00:11.08 --> 00:00:14.09
the Prototype tab up here at the top.

7
00:00:14.09 --> 00:00:17.02
And you notice how some
of the tools will go away,

8
00:00:17.02 --> 00:00:19.00
but there's more that you can do.

9
00:00:19.00 --> 00:00:21.09
So, as I zoom in on this homepage here,

10
00:00:21.09 --> 00:00:24.06
holding down the space
bar to kind of pan around,

11
00:00:24.06 --> 00:00:27.06
I'm going to select this
Peaks button right here,

12
00:00:27.06 --> 00:00:31.01
and what do I get for
any element that I select

13
00:00:31.01 --> 00:00:34.04
is this little tab,
otherwise known as a trigger.

14
00:00:34.04 --> 00:00:37.04
So, what I can do is I can
point this tab or trigger

15
00:00:37.04 --> 00:00:40.03
to this Peaks page right down here.

16
00:00:40.03 --> 00:00:42.05
Pointing to it gives me this elegant line,

17
00:00:42.05 --> 00:00:43.06
and it's going to say, hey,

18
00:00:43.06 --> 00:00:44.09
you're going to target the Peaks page,

19
00:00:44.09 --> 00:00:50.04
it's going to dissolve and ease
out over 0.4 seconds, okay.

20
00:00:50.04 --> 00:00:54.00
I could even change this
if I want to, to say 0.8.

21
00:00:54.00 --> 00:00:54.09
And that's what I'll do,

22
00:00:54.09 --> 00:00:57.04
just so it's an easier transition to see.

23
00:00:57.04 --> 00:00:59.01
And then what I can do
is I can come over here

24
00:00:59.01 --> 00:01:00.04
to this logo right here.

25
00:01:00.04 --> 00:01:03.00
This logo, I want it to go
back to the home screen.

26
00:01:03.00 --> 00:01:06.00
Click, drag, yes it's going to dissolve,

27
00:01:06.00 --> 00:01:09.01
yes it's going to keep
my setting that I had

28
00:01:09.01 --> 00:01:10.04
for the last one,

29
00:01:10.04 --> 00:01:12.05
and it's going to target
the homepage, okay.

30
00:01:12.05 --> 00:01:13.07
So, we're going to see this in a second,

31
00:01:13.07 --> 00:01:16.05
I'm actually going to hook
up this Hikers link as well,

32
00:01:16.05 --> 00:01:18.04
pointing to the Hikers page.

33
00:01:18.04 --> 00:01:21.01
It'll point to it, okay, right over here.

34
00:01:21.01 --> 00:01:24.06
And in this case, I'm just
going to do a slide left.

35
00:01:24.06 --> 00:01:27.00
Okay, it's going to go slide left.

36
00:01:27.00 --> 00:01:33.00
Selecting this logo going
back, we can do a slide right.

37
00:01:33.00 --> 00:01:34.02
So, essentially what I'm showing you

38
00:01:34.02 --> 00:01:37.05
are the different slides and pushes

39
00:01:37.05 --> 00:01:40.04
that you can do just as an example.

40
00:01:40.04 --> 00:01:42.04
Because we typically
want to test this out.

41
00:01:42.04 --> 00:01:46.05
So, that's set up, slide
right, done, looks great.

42
00:01:46.05 --> 00:01:49.04
In fact, how do we know
that it looks good,

43
00:01:49.04 --> 00:01:52.04
and also notice, look, look right up here.

44
00:01:52.04 --> 00:01:53.04
There's this little tab.

45
00:01:53.04 --> 00:01:55.03
This is the homepage, right?

46
00:01:55.03 --> 00:01:57.04
If I wanted to show the alt page first,

47
00:01:57.04 --> 00:01:59.02
I can click right there.

48
00:01:59.02 --> 00:02:00.06
Nothing's hooked up over there,

49
00:02:00.06 --> 00:02:02.03
so we'll go back to this one.

50
00:02:02.03 --> 00:02:04.01
So, that gives you the ability to show

51
00:02:04.01 --> 00:02:07.01
any layout that you
want, at least initially.

52
00:02:07.01 --> 00:02:09.00
Alright, with that selected,

53
00:02:09.00 --> 00:02:11.08
our homepage and a couple buttons selected

54
00:02:11.08 --> 00:02:16.01
and set up, I can do a desktop preview.

55
00:02:16.01 --> 00:02:17.02
Here's my preview.

56
00:02:17.02 --> 00:02:18.08
Going to the Peaks page, let's click,

57
00:02:18.08 --> 00:02:20.05
should have that nice dissolve.

58
00:02:20.05 --> 00:02:23.02
Yeah, dissolves into this Peaks page.

59
00:02:23.02 --> 00:02:25.02
Let's go back.

60
00:02:25.02 --> 00:02:27.03
Nice dissolve.

61
00:02:27.03 --> 00:02:29.02
Let's go to Hikers.

62
00:02:29.02 --> 00:02:33.09
See that Hikers, we have
that sliding in from right

63
00:02:33.09 --> 00:02:36.04
to the left, and then we're
going to have it go back

64
00:02:36.04 --> 00:02:37.09
by clicking on the logo.

65
00:02:37.09 --> 00:02:39.04
So, you can see how that looks.

66
00:02:39.04 --> 00:02:43.00
Awfully fun as I select Hikers.

67
00:02:43.00 --> 00:02:44.09
This is typically what
you'll do all day long,

68
00:02:44.09 --> 00:02:47.01
just play with these
different transitions.

69
00:02:47.01 --> 00:02:49.02
But what I ultimately want to
do is I want to change this,

70
00:02:49.02 --> 00:02:50.06
and you can change any one of these.

71
00:02:50.06 --> 00:02:52.03
As I take a look right over here,

72
00:02:52.03 --> 00:02:54.09
you can always click
on this little trigger,

73
00:02:54.09 --> 00:02:57.04
and then you can change that to Dissolve,

74
00:02:57.04 --> 00:03:02.00
and then changing this
one to Dissolve as well.

75
00:03:02.00 --> 00:03:04.07
And sure enough, we could make sure

76
00:03:04.07 --> 00:03:08.07
we remain consistent for
all of our transitions.

77
00:03:08.07 --> 00:03:12.03
But really, my goal for this layout

78
00:03:12.03 --> 00:03:15.00
is to make sure everything
links up appropriately.

79
00:03:15.00 --> 00:03:17.09
So, Hikers needs to go to the Hikers page,

80
00:03:17.09 --> 00:03:19.09
making sure that's set to Dissolve.

81
00:03:19.09 --> 00:03:25.05
And Peaks goes to the
Peaks page just like that.

82
00:03:25.05 --> 00:03:28.03
So, that's how you can
easily prototype in Adobe XD.

83
00:03:28.03 --> 00:03:29.06
My next step will be to setup

84
00:03:29.06 --> 00:03:32.07
all the transitions and
interactions for the other screens.