iOS Design Themes

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