1
00:00:00,230 --> 00:00:03,980
When you're ready to present the design
with others, you have a few options.

2
00:00:05,000 --> 00:00:07,590
One option is to present
from your computer.

3
00:00:07,590 --> 00:00:12,440
This is helpful when sharing your screen
in a presentation or a video call.

4
00:00:12,440 --> 00:00:14,870
Click the desktop Preview
button to enter this mode.

5
00:00:17,055 --> 00:00:17,909
From this view,

6
00:00:17,909 --> 00:00:21,453
you can also record a video of
yourself clicking through the design.

7
00:00:23,589 --> 00:00:25,413
You could share this video with your team.

8
00:00:27,882 --> 00:00:31,430
Another option is to use Device Preview.

9
00:00:31,430 --> 00:00:35,010
With this feature,
you can send the design to an Android or

10
00:00:35,010 --> 00:00:38,780
iOS device to preview it in real-time.

11
00:00:38,780 --> 00:00:42,220
This is handy if you want to test
out the form factor of your design.

12
00:00:43,250 --> 00:00:44,244
In other words,

13
00:00:44,244 --> 00:00:48,444
if you want to test out the ease of
tapping the buttons with your thumb.

14
00:00:48,444 --> 00:00:52,983
Are they too small or
too far out of reach?

15
00:00:52,983 --> 00:00:56,707
You may also find this mode
helpful to use in user testing,

16
00:00:56,707 --> 00:00:58,920
as it makes the app seem more real.

17
00:00:59,950 --> 00:01:03,820
A third option is to share the design
with others so they can view and

18
00:01:03,820 --> 00:01:05,660
collaborate on the design.

19
00:01:05,660 --> 00:01:06,487
Click the Share tab.

20
00:01:09,192 --> 00:01:12,870
You'll see a few options for
the view setting.

21
00:01:12,870 --> 00:01:17,670
Note that if you're on the free starter
plan, you may see limited options.

22
00:01:17,670 --> 00:01:20,810
Click the Info button if you'd
like to read about these settings.

23
00:01:22,170 --> 00:01:26,500
Generally design review has
the functionality for most use cases.

24
00:01:26,500 --> 00:01:31,040
If you're sharing it for user testing, the
user testing option is great because it

25
00:01:31,040 --> 00:01:37,760
hides hotspot, hints, doesn't include
commenting, and hides navigation controls.

26
00:01:37,760 --> 00:01:41,924
This narrowed functionality allows your
design to be fully experienced and

27
00:01:41,924 --> 00:01:42,842
put to the test.

28
00:01:46,909 --> 00:01:51,699
So once you click the Create Link button,
copy the link that's generated.

29
00:01:56,706 --> 00:01:59,899
Share this link with folks and
they'll be able to see your mockups.

30
00:02:04,187 --> 00:02:07,040
Finally, let's look at
the Development view setting.

31
00:02:08,830 --> 00:02:12,920
This is helpful when sharing with
developers, as it reveals additional

32
00:02:12,920 --> 00:02:16,190
information about your design so
it can be implemented with code.

33
00:02:17,380 --> 00:02:19,640
Choose the device from the drop down.

34
00:02:19,640 --> 00:02:21,030
In this case, it's iOS.

35
00:02:22,390 --> 00:02:24,576
Be sure to check Downloadable Assets.

36
00:02:33,296 --> 00:02:35,526
All right, so when you open the link,

37
00:02:35,526 --> 00:02:38,540
click the Code icon to open
the Development panel.

38
00:02:39,570 --> 00:02:44,040
Here we see screen details, assets,
colors, and character styles.

39
00:02:45,100 --> 00:02:48,483
Select an object on this screen to
view specific information for it.

40
00:02:50,864 --> 00:02:54,535
To see spacing information,
click to select an object,

41
00:02:54,535 --> 00:02:59,510
then hover over nearby objects to
view distances with red lines.

42
00:02:59,510 --> 00:03:01,318
These details make it possible for

43
00:03:01,318 --> 00:03:04,572
developers to successfully
recreate your designs and code.

44
00:03:08,397 --> 00:03:12,088
If you're using another design tool,
check out the teacher's notes for

45
00:03:12,088 --> 00:03:14,300
tools to smooth out the developer handoff.

46
00:03:16,470 --> 00:03:21,000
Now you know about the purpose of mockups and how to make them yourself.

47
00:03:21,000 --> 00:03:26,090
As a review, mockups help you visually
communicate your ideas with others.

48
00:03:26,090 --> 00:03:29,040
You can use them internally
with teammates or

49
00:03:29,040 --> 00:03:33,710
externally with potential users while
you're conducting user research.

50
00:03:33,710 --> 00:03:35,840
Keep practicing making mockups and

51
00:03:35,840 --> 00:03:38,520
I know it'll be a big improvement
to your design process.