Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how to share your mockups with others.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
When you're ready to present the design
with others, you have a few options.
0:00
One option is to present
from your computer.
0:05
This is helpful when sharing your screen
in a presentation or a video call.
0:07
Click the desktop Preview
button to enter this mode.
0:12
From this view,
0:17
you can also record a video of
yourself clicking through the design.
0:17
You could share this video with your team.
0:23
Another option is to use Device Preview.
0:27
With this feature,
you can send the design to an Android or
0:31
iOS device to preview it in real-time.
0:35
This is handy if you want to test
out the form factor of your design.
0:38
In other words,
0:43
if you want to test out the ease of
tapping the buttons with your thumb.
0:44
Are they too small or
too far out of reach?
0:48
You may also find this mode
helpful to use in user testing,
0:52
as it makes the app seem more real.
0:56
A third option is to share the design
with others so they can view and
0:59
collaborate on the design.
1:03
Click the Share tab.
1:05
You'll see a few options for
the view setting.
1:09
Note that if you're on the free starter
plan, you may see limited options.
1:12
Click the Info button if you'd
like to read about these settings.
1:17
Generally design review has
the functionality for most use cases.
1:22
If you're sharing it for user testing, the
user testing option is great because it
1:26
hides hotspot, hints, doesn't include
commenting, and hides navigation controls.
1:31
This narrowed functionality allows your
design to be fully experienced and
1:37
put to the test.
1:41
So once you click the Create Link button,
copy the link that's generated.
1:46
Share this link with folks and
they'll be able to see your mockups.
1:56
Finally, let's look at
the Development view setting.
2:04
This is helpful when sharing with
developers, as it reveals additional
2:08
information about your design so
it can be implemented with code.
2:12
Choose the device from the drop down.
2:17
In this case, it's iOS.
2:19
Be sure to check Downloadable Assets.
2:22
All right, so when you open the link,
2:33
click the Code icon to open
the Development panel.
2:35
Here we see screen details, assets,
colors, and character styles.
2:39
Select an object on this screen to
view specific information for it.
2:45
To see spacing information,
click to select an object,
2:50
then hover over nearby objects to
view distances with red lines.
2:54
These details make it possible for
2:59
developers to successfully
recreate your designs and code.
3:01
If you're using another design tool,
check out the teacher's notes for
3:08
tools to smooth out the developer handoff.
3:12
Now you know about the purpose of mockups and how to make them yourself.
3:16
As a review, mockups help you visually
communicate your ideas with others.
3:21
You can use them internally
with teammates or
3:26
externally with potential users while
you're conducting user research.
3:29
Keep practicing making mockups and
3:33
I know it'll be a big improvement
to your design process.
3:35
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up