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 create a mockup in Adobe XD using Apple's UI kit.
Resources Mentioned:
- Human Interface Guidelines
- UI kits for Adobe XD and other design software
- San Francisco font - Apple
- SF Symbols (macOS 10.14.4 or later) or Font Awesome
- News article used in mockup - from NASA
Resources for non-Adobe XD users:
Further Reading:
- SF Symbols: The benefits and how to use them - by Antoine van der Lee
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
I'll demonstrate making a high-fidelity mockup in Adobe XD.
0:00
But if you already have a favorite
design tool, feel free to use it.
0:01
Tools such as Figma, or
0:07
Sketch have a lot of the same
resources I'll use in this demo.
0:08
I'll start with these wireframes I made
for news article layout on an iPhone app.
0:12
Since I'm creating an iOS app, I'll refer
to Apple's human interface guidelines.
0:18
I'll use Apple's UI kit for Adobe XD.
0:23
A UI kit provides patterns for
native UI elements such as components,
0:26
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