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
Now that we’ve learned how Apple arrived at its current design aesthetic, we’ll examine the three guiding Design Themes I mentioned earlier–clarity, deference, and depth–and learn how these themes inform your work designing for iOS applications.
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
Apple's Human Interface Guidelines
documentation
0:00
is not a strict set of dos and don'ts.
0:04
But then the Human Interface Guidelines
aren't strictly a design system.
0:06
Your goal in using the guidelines isn't
to create an app that reflects Apple's
0:11
branding, but rather to understand
the expectations of iOS users,
0:16
and come up with an app that reflects your
client's brand, while remaining functional
0:22
and accessible, legible and
usable, across a variety of iOS devices.
0:27
The three Human Interface Guidelines design
0:34
themes are clarity, deference, and depth.
0:39
These design themes
provide more flexibility
0:45
than those of a traditional design system.
0:48
For example, when the Shopify Polaris
design system provides
0:51
typography guidelines, these instructions
are meant to be followed word for word.
0:56
Use one specific type scale for large
screens and another for small screens.
1:02
Apply headings and
subheadings consistently.
1:09
Use a system font stack. But
1:16
understanding the first Human
Interface Guidelines design theme, clarity,
1:21
requires a bit of creative thinking.
1:26
What does Apple mean by
"text is legible at every size"?
1:29
While Apple's UI design do's and
don'ts advise against text
1:34
smaller than 11 points, that guideline
refers to small onscreen elements,
1:40
such as the iOS Status bar or Tab bar.
1:46
Mobile body copy needs to be at
least 16 points to be legible.
1:53
I've included a few resources on mobile
type size in the teacher's notes.
1:58
Apple recommends using system
fonts wherever possible.
2:04
iOS devices include a sans serif
typeface called San Francisco
2:08
and a serif typeface called New York.
2:15
And while these typefaces might
not be ideal for an app logo or
2:19
reflecting product branding,
New York and San Francisco require
2:23
no loading time (since they're built
into the device) and are designed for
2:28
optimum legibility on iOS screens,
useful qualities for
2:33
body copy and for
labeling interface elements.
2:38
Finally, Apple emphasizes in
its accessibility documentation
2:43
the importance of dynamic type.
2:48
That is, typography that remains
legible when users customize device
2:51
settings to make body copy large or
bolder.
2:56
When it comes to iconography,
3:01
Apple provides a set of system
icons known as SF Symbols.
3:03
These icons are quickly
recognized by iOS users, and
3:09
therefore highly useful provided you
don't redefine their existing meaning.
3:13
If the user taps a trash icon and
something happens other than
3:19
an item being moved to the trash or
deleted that leads to confusion.
3:24
When designing custom icons, Apple
recommends striving for the simplicity of
3:31
SF Symbols and working with solid
icons with a consistent stroke weight.
3:37
When creating interface elements for
3:44
an iOS app,
remember the principle of Flat 2.0.
3:46
Use just enough of a combination
of highlight, gradient,
3:51
and shadow to indicate interactivity.
3:56
Apple recommends a limited color palette
that coordinates with your app logo and
4:01
reflects your brand.
4:06
Apply color meaningfully,
don't use the same color for
4:09
interactive elements and
non-interactive elements.
4:13
And if a certain red color is meant
to warn the user of a critical issue,
4:18
don't use that same red color
in non-critical situations.
4:23
Deference means content is king.
4:28
Design elements that fail to
either highlight content or
4:31
indicate interactivity
should be discarded.
4:35
Apple's choice for
iPhone App of the Year in 2019
4:39
is an AI powered shutter app for
the iPhone camera called Spectre.
4:43
Spectre is designed to
be used with one hand.
4:49
The viewfinder dominates the phone screen,
4:52
while interface elements apart from
the dial to adjust exposure time
4:55
and the shutter release button
demand little visual attention.
5:01
Image stabilization and
scene detection happens automatically.
5:05
So users can take striking photographs
5:10
of scenes full of movement
without adjusting app controls.
5:13
Images and body copy should, whenever
possible, occupy the entire screen.
5:19
Although text and interactive elements
should remain within safe zones
5:25
as defined in
the Human Interface Guidelines.
5:30
This means providing margin between
content and the device frame, and keeping
5:33
interactive elements away from areas where
users typically swipe to access iOS menus.
5:39
Animations shouldn't happen arbitrarily,
but
5:46
should respond directly to
user actions and interactions.
5:50
Apple's design themes
include a subsection called
5:54
Design Principles, with headings
like Consistency and User Controls.
5:59
You might remember those
from the first public
6:04
Human Interface Guidelines
document in 1987.
6:08
As well as Direct Manipulation and
Feedback.
6:11
Animations triggered
exclusively by the user–
6:16
ones that clarify the results
of user actions–reinforce these
6:20
principles: user control,
direct manipulation, feedback.
6:25
I'm using the Pinterest mobile app to
search for typographic inspiration.
6:31
Images slide into place upon loading,
expand to fill the screen when I tap them,
6:37
and shrink away from my finger
when I click the back arrow.
6:43
There is no gratuitous motion.
6:47
Every movement reflects a choice I've
made in navigating the app's interface.
6:50
Blurred background content layers,
such as the content behind iOS
6:56
Activity Views and
Action Sheets, hint at visual depth
7:01
while keeping user attention
focused on foreground content.
7:07
Animations in iOS additionally
suggest visual depth,
7:11
with content appearing to advance
toward or recede away from
7:16
the user on the z-axis.
7:22
That concludes our introductory look at
Apple's Human Interface Guidelines for
7:26
iOS.
7:31
In the next stage, we'll build a wireframe
of a demo iPhone app in Adobe XD,
7:32
one that uses components detailed
in the Human Interface Guidelines
7:39
as well as a number of
iOS design resources.
7:44
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