1
00:00:00,000 --> 00:00:04,983
Adobe XD is a product from,
as the name implies, Adobe, and

2
00:00:04,983 --> 00:00:09,796
it's included in most of
the Adobe Creative Cloud plans.

3
00:00:09,796 --> 00:00:13,927
We're not going to walk through the
process of installing Creative Cloud or

4
00:00:13,927 --> 00:00:18,590
Adobe XD, but if you need some help, check
out the notes associated with this video.

5
00:00:18,590 --> 00:00:23,796
When you first open Adobe XD, you'll
be greeted with the new project screen.

6
00:00:23,796 --> 00:00:30,459
You can create a new project by choosing
from these common screen resolutions,

7
00:00:30,459 --> 00:00:34,345
or you can create a project
with a custom size.

8
00:00:34,345 --> 00:00:39,196
You can also start by using
user interface kits from Apple,

9
00:00:39,196 --> 00:00:41,925
Google, Microsoft, and more.

10
00:00:41,925 --> 00:00:48,119
For this project, we're going to create
a prototype that targets the iPhone 6,

11
00:00:48,119 --> 00:00:52,893
7, and 8 screen sizes, so
choose that option from the left.

12
00:00:52,893 --> 00:00:59,420
This will create a new project, and before
we go any further, let's save our work.

13
00:00:59,420 --> 00:01:03,865
To do this on Windows, you'll need to use

14
00:01:03,865 --> 00:01:08,310
a menu icon in the upper left, but on Mac,

15
00:01:08,310 --> 00:01:13,397
you can go up to the File menu and
choose Save As.

16
00:01:16,365 --> 00:01:21,205
And then, you can choose a place
on your computer if you'd like.

17
00:01:21,205 --> 00:01:25,838
And then,
I'm going to name the file trippin since

18
00:01:25,838 --> 00:01:30,794
that's going to be the name
of our trip planning app for

19
00:01:30,794 --> 00:01:35,129
frequent travelers, and
then I'll hit Save.

20
00:01:35,129 --> 00:01:39,018
We're going to be saving
our work frequently, so

21
00:01:39,018 --> 00:01:42,636
you may want to take note
of the shortcut keys.

22
00:01:42,636 --> 00:01:49,272
On Windows, it's Ctrl+S,
and on Mac, it's Cmd+S.

23
00:01:49,272 --> 00:01:53,120
Now, let's take a tour of
the rest of the interface.

24
00:01:53,120 --> 00:01:58,761
From the menu in the upper left on
Windows, or from the File menu on Mac,

25
00:01:58,761 --> 00:02:02,727
you can create new files,
or open existing ones.

26
00:02:02,727 --> 00:02:05,072
You can save your files, and

27
00:02:05,072 --> 00:02:09,874
you can even get some UI kits
that I mentioned previously.

28
00:02:09,874 --> 00:02:14,602
And you can also export your work and
share it with others.

29
00:02:14,602 --> 00:02:19,257
We'll explore some of the sharing
options later in this course.

30
00:02:19,257 --> 00:02:22,387
For now, let's close this menu.

31
00:02:22,387 --> 00:02:28,806
The large empty area in the middle
of the screen is our canvas,

32
00:02:28,806 --> 00:02:33,261
and the labelled white box is an artboard.

33
00:02:33,261 --> 00:02:37,350
You can think of artboards as
single screens in your app.

34
00:02:37,350 --> 00:02:43,867
The app we'll create will have two screens
that the user can navigate between.

35
00:02:43,867 --> 00:02:49,580
So by the end, we'll have two
of these artboards side by side.

36
00:02:49,580 --> 00:02:56,627
Along the top of the screen, there's
the menu that we've already explored,

37
00:02:56,627 --> 00:03:01,662
and then there's tabs for
Design, and for Prototype.

38
00:03:01,662 --> 00:03:06,927
Design, as the name implies,
is where we'll do our design work.

39
00:03:06,927 --> 00:03:09,218
The Prototype tab, we'll use later,

40
00:03:09,218 --> 00:03:12,490
to hook up our designs into
an interactive experience.

41
00:03:12,490 --> 00:03:16,614
In the middle is the name of our project,
and

42
00:03:16,614 --> 00:03:20,860
on the right side, there's the zoom level.

43
00:03:20,860 --> 00:03:25,693
A mobile preview which you can use
in combination with the XD mobile

44
00:03:25,693 --> 00:03:28,377
app on your phone, if you so choose.

45
00:03:28,377 --> 00:03:33,452
And then there's the desktop preview
button which looks like a play button,

46
00:03:33,452 --> 00:03:38,931
which we'll use to preview designs after
hooking them up in the prototype screen.

47
00:03:38,931 --> 00:03:43,719
And finally, there's the Share
button which lets you create

48
00:03:43,719 --> 00:03:48,519
links to your prototype that you
can use to share with others.

49
00:03:48,519 --> 00:03:52,530
On the left side of
the screen is the toolbar.

50
00:03:52,530 --> 00:03:56,705
There's the selection tool,
which looks like an arrow.

51
00:03:56,705 --> 00:04:01,156
We can use that to move things
around inside of an art board.

52
00:04:01,156 --> 00:04:05,161
That's followed by the rectangle and
ellipse tool,

53
00:04:05,161 --> 00:04:09,620
which we can use to draw rectangles and
elliptical shapes.

54
00:04:09,620 --> 00:04:13,473
Same with the line tool right after it.

55
00:04:13,473 --> 00:04:20,061
Then there's the pen tool which
we can use to draw custom shapes.

56
00:04:20,061 --> 00:04:24,332
The type tool is for typing out text.

57
00:04:24,332 --> 00:04:28,222
The artboard tool is for
creating new artboards.

58
00:04:28,222 --> 00:04:31,021
And then there is the zoom tool,

59
00:04:31,021 --> 00:04:36,006
which we can us for
changing the zoom level of the canvas.

60
00:04:36,006 --> 00:04:39,563
Don't worry about memorizing
all of these right now.

61
00:04:39,563 --> 00:04:42,367
We'll use them throughout the project, so

62
00:04:42,367 --> 00:04:46,019
you'll get a chance to check
out each one in more detail.

63
00:04:46,019 --> 00:04:50,527
Down at the bottom of the toolbar,
we can view assets in our project,

64
00:04:50,527 --> 00:04:52,880
like colors and character styles.

65
00:04:52,880 --> 00:04:56,421
We wont worry about that for
this simple project.

66
00:04:56,421 --> 00:04:59,955
We can also view the layer palate.

67
00:04:59,955 --> 00:05:04,566
We'll switch to this view right now
because we're going to use layers

68
00:05:04,566 --> 00:05:05,278
later on.

69
00:05:05,278 --> 00:05:08,484
If you're familiar with
a tool like Photoshop,

70
00:05:08,484 --> 00:05:11,383
you probably already know how layers work.

71
00:05:11,383 --> 00:05:14,669
If not, don't worry,
we'll take a closer look soon.

72
00:05:14,669 --> 00:05:20,620
Layers just allow us to change the order
of how things are stacked on the canvas.

73
00:05:20,620 --> 00:05:25,417
If you want some text to appear in
front of a picture, for example,

74
00:05:25,417 --> 00:05:29,031
you would put that layer
above the picture layer.

75
00:05:29,031 --> 00:05:34,518
Finally, on the right side of the screen,
there's the property inspector.

76
00:05:34,518 --> 00:05:37,732
This allows you to
change the properties or

77
00:05:37,732 --> 00:05:41,220
the characteristics of
any selected object.

78
00:05:41,220 --> 00:05:44,846
For example,
if you select some text or a photo,

79
00:05:44,846 --> 00:05:50,154
this area would change so that you
can adjust things like the font size,

80
00:05:50,154 --> 00:05:54,318
add a border, a shadow,
change colors, and so forth.

81
00:05:54,318 --> 00:05:58,182
For example,
if you select some text or a photo,

82
00:05:58,182 --> 00:06:03,839
this area would change so that you
can adjust things like the font size,

83
00:06:03,839 --> 00:06:08,292
add a border, a shadow,
change colors, and so forth.

84
00:06:08,292 --> 00:06:12,402
If we select this artboard
by clicking on its name,

85
00:06:12,402 --> 00:06:18,522
the property inspector will allow us
to adjust things like the dimensions,

86
00:06:18,522 --> 00:06:23,321
the view port height,
the background fill, and so forth.

87
00:06:23,321 --> 00:06:26,752
We'll explore these things more later on.

88
00:06:26,752 --> 00:06:30,071
Now that we've had a brief
tour of the interface,

89
00:06:30,071 --> 00:06:33,718
let's start creating a design
using shapes and text.