Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Creating Mockups!
You have completed Creating Mockups!
Preview
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