Apple's Human Interface Guidelines documentation

is not a strict set of dos and don'ts.

But then the Human Interface Guidelines aren't strictly a design system.

Your goal in using the guidelines isn't to create an app that reflects Apple's

branding, but rather to understand the expectations of iOS users,

and come up with an app that reflects your client's brand, while remaining functional

and accessible, legible and usable, across a variety of iOS devices.

The three Human Interface Guidelines design

themes are clarity, deference, and depth.

These design themes provide more flexibility

than those of a traditional design system.

For example, when the Shopify Polaris design system provides

typography guidelines, these instructions are meant to be followed word for word.

Use one specific type scale for large screens and another for small screens.

Apply headings and subheadings consistently.

Use a system font stack. But

understanding the first Human Interface Guidelines design theme, clarity,

requires a bit of creative thinking.

What does Apple mean by "text is legible at every size"?

While Apple's UI design do's and don'ts advise against text

smaller than 11 points, that guideline refers to small onscreen elements,

such as the iOS Status bar or Tab bar.

Mobile body copy needs to be at least 16 points to be legible.

I've included a few resources on mobile type size in the teacher's notes.

Apple recommends using system fonts wherever possible.

iOS devices include a sans serif typeface called San Francisco

and a serif typeface called New York.

And while these typefaces might not be ideal for an app logo or

reflecting product branding, New York and San Francisco require

no loading time (since they're built into the device) and are designed for

optimum legibility on iOS screens, useful qualities for

body copy and for labeling interface elements.

Finally, Apple emphasizes in its accessibility documentation

the importance of dynamic type.

That is, typography that remains legible when users customize device

settings to make body copy large or bolder.

When it comes to iconography,

Apple provides a set of system icons known as SF Symbols.

These icons are quickly recognized by iOS users, and

therefore highly useful provided you don't redefine their existing meaning.

If the user taps a trash icon and something happens other than

an item being moved to the trash or deleted that leads to confusion.

When designing custom icons, Apple recommends striving for the simplicity of

SF Symbols and working with solid icons with a consistent stroke weight.

When creating interface elements for

an iOS app, remember the principle of Flat 2.0.

Use just enough of a combination of highlight, gradient,

and shadow to indicate interactivity.

Apple recommends a limited color palette that coordinates with your app logo and

reflects your brand.

Apply color meaningfully, don't use the same color for

interactive elements and non-interactive elements.

And if a certain red color is meant to warn the user of a critical issue,

don't use that same red color in non-critical situations.

Deference means content is king.

Design elements that fail to either highlight content or

indicate interactivity should be discarded.

Apple's choice for iPhone App of the Year in 2019

is an AI powered shutter app for the iPhone camera called Spectre.

Spectre is designed to be used with one hand.

The viewfinder dominates the phone screen,

while interface elements apart from the dial to adjust exposure time

and the shutter release button demand little visual attention.

Image stabilization and scene detection happens automatically.

So users can take striking photographs

of scenes full of movement without adjusting app controls.

Images and body copy should, whenever possible, occupy the entire screen.

Although text and interactive elements should remain within safe zones

as defined in the Human Interface Guidelines.

This means providing margin between content and the device frame, and keeping

interactive elements away from areas where users typically swipe to access iOS menus.

Animations shouldn't happen arbitrarily, but

should respond directly to user actions and interactions.

Apple's design themes include a subsection called

Design Principles, with headings like Consistency and User Controls.

You might remember those from the first public

Human Interface Guidelines document in 1987.

As well as Direct Manipulation and Feedback.

Animations triggered exclusively by the user–

ones that clarify the results of user actions–reinforce these

principles: user control, direct manipulation, feedback.

I'm using the Pinterest mobile app to search for typographic inspiration.

Images slide into place upon loading, expand to fill the screen when I tap them,

and shrink away from my finger when I click the back arrow.

There is no gratuitous motion.

Every movement reflects a choice I've made in navigating the app's interface.

Blurred background content layers, such as the content behind iOS

Activity Views and Action Sheets, hint at visual depth

while keeping user attention focused on foreground content.

Animations in iOS additionally suggest visual depth,

with content appearing to advance toward or recede away from

the user on the z-axis.

That concludes our introductory look at Apple's Human Interface Guidelines for

iOS.

In the next stage, we'll build a wireframe of a demo iPhone app in Adobe XD,

one that uses components detailed in the Human Interface Guidelines

as well as a number of iOS design resources.