![\"A](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/05\/aditya-joshi-UgSmjCMjW_I-unsplash.jpg\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
What Are Apple\u2019s Human Interface Guidelines?<\/strong><\/h2>\n\n\n\nThe Apple Human Interface Guidelines have existed since 1977, detailing design principles for Apple II. For those not in the now, that\u2019s a personal computer Apple made back in the 1970s. <\/p>\n\n\n\n
Over the years, Apple has honed these guidelines to keep up with the latest technological advances. Today, it exists as a set of guidelines that covers the entire Apple ecosystem. The guidelines are available online for all designers to see and use.<\/p>\n\n\n\n
Whether you\u2019re designing for Apple products or not, the guidelines might be useful. After all, they\u2019re all about human-centric design.<\/a> But they\u2019re best for iOS, macOS, watchOS, tvOS, and visionOS designs.<\/p>\n\n\n\nApple\u2019s Design Documentation<\/strong><\/h2>\n\n\n\nSimply put, design documentation refers to a set of details about the designs and decisions of a particular product. It\u2019s essentially a style guide<\/a>. It might include information about icons, color, typography<\/a>, interactions<\/a>, and more. Depending on the project\u2019s complexity, there might even be information about research and wireframes<\/a>.<\/p>\n\n\n\nThese documents maintain consistency across a project. They also ensure scalability, allowing your design team to handle new features, new devices, and more with ease. They can even save time when you\u2019re designing quickly.<\/p>\n\n\n\n
Apple has a lot of products under its belt. How does it ensure a seamless experience for its users across devices and apps? The answer is the HIGs, which give designers a full toolkit for designing for Apple.<\/p>\n\n\n\n
The full set of guidelines is on the HIG website<\/a>, which is publicly available. The documentation here covers absolutely everything you need to know. The downside of that, though, is that there are lengthy amounts of text. Apple divides the guide into six main categories, each with detailed information.<\/p>\n\n\n\nWe\u2019ll cover each category in more detail later. For now, it\u2019s important to understand how the HIGs differ from Material Design.<\/p>\n\n\n\n
<\/p>\n\n\n
\n![\"A](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/05\/david-grandmougin-cfV8CtFQyjs-unsplash.jpg\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
Human Interface Guidelines vs. Material Design<\/strong><\/h2>\n\n\n\nGoogle also has its own set of guidelines called Material Design. Both sets of rules have similarities, especially because they both aim to improve the user experience. After all, in UX\/UI<\/a>, it all comes back to what the user thinks.<\/p>\n\n\n\nHowever, there are also lots of differences since Apple and Google are competitors. The main difference between Human Interface Guidelines vs. Material Design<\/a> is the operating systems. The HIGs are for iOS, and Material Design is for Android\/Google.<\/p>\n\n\n\nThere are other differences, too. Apple uses a primary flat design, whereas Google opts for UI that mimics materials and leaps off the screen. <\/p>\n\n\n\n
Both guidelines have had a major influence on the designs of other companies, but perhaps Google\u2019s more so. That said, Apple\u2019s emphasis on clean aesthetics is certainly compelling. For many designers, the use of white space and modern visuals is preferable over Google\u2019s depth and animations.<\/p>\n\n\n\n
As a designer, it\u2019s up to you which guidelines you follow. It\u2019s worth familiarizing yourself with both design documents in case you design for different operating systems in your career.<\/p>\n\n\n\n
<\/p>\n\n\n
\n![\"A](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/05\/vinicius-amnx-amano-Nh3I2dycLmw-unsplash.jpg\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
The Guidelines<\/strong><\/h2>\n\n\n\nSo, with all that out of the way, it\u2019s time to explore the iOS Human Interface Guidelines. As we mentioned, the site breaks them down into six categories, each with subcategories. You can view these in the menu bar on the left-hand side of the website. Here\u2019s what you need to know about each category.<\/p>\n\n\n\n
Platforms<\/strong><\/h3>\n\n\n\nThe first category explains how to create high-quality apps for all Apple platforms:<\/p>\n\n\n\n
\n- iOS<\/li>\n\n\n\n
- iPadOS<\/li>\n\n\n\n
- macOS<\/li>\n\n\n\n
- watchOS<\/li>\n\n\n\n
- tvOS<\/li>\n\n\n\n
- visionOS<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
On each platform, the user should be able to focus on tasks and primary content. In other words, you need to focus on visual hierarchy<\/a>. <\/p>\n\n\n\nThe Notes app on iPhone is a fantastic example. The interface is clean, with a layout that\u2019s easy to use and prioritizes the features the user needs most. There\u2019s also plenty of white space so you can focus on what\u2019s important: the text you add as a user. <\/p>\n\n\n\n
It\u2019s always important to choose which information you display and where\/how. Think about what the user wants, what they need, and how you can show it to them.<\/p>\n\n\n\n
Foundations<\/strong><\/h3>\n\n\n\nThe next category is Foundations, which provides a list of crucial design elements. This includes colors, fonts<\/a>, layout, imagery, and accessibility<\/a>. We\u2019ll discuss icons and typography in more detail later.<\/p>\n\n\n\nAs for colors, Apple recommends avoiding using the same color to indicate different things. Avoiding this similarity makes your interface more intuitive and accessible. So, you might put primary actions like \u2018Save\u2019 and \u2018Continue\u2019 in blue. However, you shouldn\u2019t put destructive actions like \u2018Delete\u2019 in the same color; instead, it appears in red.<\/p>\n\n\n\n
Furthermore, you shouldn\u2019t base color usage on personal preference. Make sure your colors have ample contrast to enhance accessibility. In fact, the HIG provides resources for checking things like this. We recommend that you take a look at the guidelines in detail.<\/p>\n\n\n\n
Patterns<\/strong><\/h3>\n\n\n\nPatterns provide design guidance for user interaction. Basically, any time the user can interact with the product, this is where you\u2019ll find the information. Think about sharing actions, searching, feedback, multitasking, and so on.<\/p>\n\n\n\n
Apple\u2019s main guidance here is to give the user clear and consistent feedback. As the user interacts with the product, they should understand what\u2019s happening at every stage.<\/p>\n\n\n\n
You can do this by informing the user about errors, visually indicating progress with loading bars, or providing notifications. Would you rather Apple tell you before<\/em> your iCloud storage is full? Or would you rather find out when a photo you just took doesn\u2019t save? If it\u2019s the former, then you understand the importance of feedback!<\/p>\n\n\n\nComponents<\/strong><\/h3>\n\n\n\nNext is the Components category. This covers how to use and customize various system components. The end goal is to ensure consistency. <\/p>\n\n\n\n
There\u2019s information about layout and organization, content, menus and actions, navigation, and more. <\/p>\n\n\n\n
Overall, the recommendations are to make things clear but not at the risk of usability. For example, use the Tab Bar for navigation and make sure it\u2019s always visible. In the modal view, you can omit the Tab Bar, as it closes and doesn’t interfere with navigation.<\/p>\n\n\n\n
Inputs<\/strong><\/h3>\n\n\n\nThe next category is Inputs. These are the different ways that users can control your application and enter data. For example, there may be keyboards, touch bars, gestures, and even eye gaze for visionOS.<\/p>\n\n\n\n
Apple\u2019s main recommendation is to offer different ways to interact with each product. This is mostly for accessibility purposes. After all, your users might rely on assistive technologies.<\/p>\n\n\n\n
Technologies<\/strong><\/h3>\n\n\n\nFinally, the Technologies category includes various Apple services that you can use within your app. This includes Game Center, Apple Pay, iCloud, Maps, and so on. <\/p>\n\n\n\n
Each technology has its own characteristics, so it\u2019s worth reading through Apple\u2019s recommendations on the HIG website. <\/p>\n\n\n\n
Apple Icons<\/strong><\/h2>\n\n\n\nGoing through some of the subcategories in more detail will help you see what makes the HIGs so special. For example, the Apple Icons section covers details on the icon design, best practices, resources, and more information. <\/p>\n\n\n\n
Apple says: \u201cAn effective icon is a graphic asset that expresses a single concept in ways people instantly understand.\u201d Each page opens with a punchy statement like this to help you understand the overall concept.<\/p>\n\n\n\n
So, with icons, Apple goes on to say that app icons use rich visual details like shading, texturing, and highlighting. These all serve to communicate an effective idea. However, there are also interface icons, which help the user interact with the app.<\/p>\n\n\n\n
Designers can choose symbols from the SF Symbols app and customize them to suit their needs. Either way, the HIGs provide ample guidance.<\/p>\n\n\n\n
<\/p>\n\n\n
\n![\"A](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/05\/alexander-andrews-zw07kVDaHPw-unsplash.jpg\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
Apple Fonts<\/strong><\/h2>\n\n\n\nMeanwhile, Apple fonts aim to ensure legible text and clarify information hierarchy. They can even help you express your brand. <\/p>\n\n\n\n
Apple outlines six best practices for using their fonts.<\/p>\n\n\n\n
1. Readability<\/strong><\/h3>\n\n\n\nAim for a minimum font size that most people can read easily. Device displays can alter the minimum font size, but there are also other factors. Consider the reader\u2019s proximity to the text, for example, and whether they\u2019re in motion. <\/p>\n\n\n\n
Dynamic Type allows people to choose the size of visible text in various Apple operating systems. This is a great way to improve accessibility and overall UX.<\/p>\n\n\n\n
2. Visual Hierarchy<\/strong><\/h3>\n\n\n\nAdjust the font weight, size, and color as needed to emphasize important information. Make sure you maintain the relative hierarchy and visual distinction when people adjust the text size.<\/p>\n\n\n\n
3. Less is More<\/strong><\/h3>\n\n\n\nMinimize the number of typefaces you use. Mixing too many together can obscure information hierarchy and hinder readability. It can also affect your branding<\/a>.<\/p>\n\n\n\n4. Test Legibility<\/strong><\/h3>\n\n\n\nNot only do you need to test readability, but you also need to test it in different contexts. Test with different font sizes. Test it outside in bright sunlight and indoors in the dark. Test it in motion and view it from a distance.<\/p>\n\n\n\n
The more you test, the better you can make your product.<\/p>\n\n\n\n
5. Avoid Light Weights<\/strong><\/h3>\n\n\n\nIf you can, avoid light font weights. This will help you maintain readability. For example, opt for Medium, Semibold, or Bold font weights. Use Regular sparingly.<\/p>\n\n\n\n
6. Prioritize<\/strong><\/h3>\n\n\n\nWhen responding to text-size changes, prioritize important content. When someone selects a larger font size, they simply want to make the text they care about easier to read. So, they don\u2019t necessarily want to increase the size of every word. <\/p>\n\n\n\n
For example, Apple Mail enlarges the subject and body of the message. However, the date and the sender remain smaller.<\/p>\n\n\n\n
Design for iOS and Beyond With Page Flows<\/strong><\/h2>\n\n\n\nApple\u2019s Human Interface Guidelines can be really helpful tools, especially when designing for iOS. Even in other contexts, some of them serve as UI best practices<\/a>.<\/p>\n\n\n\nBut if you want to create amazing interfaces that dazzle your users, you\u2019ll need inspiration. So, why not learn from proven products? Page Flows is a helpful resource for finding interaction design ideas. Get started today<\/a> to access our growing library of user flow recordings and finally stay up-to-date with current design trends.<\/p>\n","protected":false},"excerpt":{"rendered":"
Apple\u2019s Design Documentation<\/strong><\/h2>\n\n\n\nSimply put, design documentation refers to a set of details about the designs and decisions of a particular product. It\u2019s essentially a style guide<\/a>. It might include information about icons, color, typography<\/a>, interactions<\/a>, and more. Depending on the project\u2019s complexity, there might even be information about research and wireframes<\/a>.<\/p>\n\n\n\nThese documents maintain consistency across a project. They also ensure scalability, allowing your design team to handle new features, new devices, and more with ease. They can even save time when you\u2019re designing quickly.<\/p>\n\n\n\n
Apple has a lot of products under its belt. How does it ensure a seamless experience for its users across devices and apps? The answer is the HIGs, which give designers a full toolkit for designing for Apple.<\/p>\n\n\n\n
The full set of guidelines is on the HIG website<\/a>, which is publicly available. The documentation here covers absolutely everything you need to know. The downside of that, though, is that there are lengthy amounts of text. Apple divides the guide into six main categories, each with detailed information.<\/p>\n\n\n\nWe\u2019ll cover each category in more detail later. For now, it\u2019s important to understand how the HIGs differ from Material Design.<\/p>\n\n\n\n
<\/p>\n\n\n
\n<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
Human Interface Guidelines vs. Material Design<\/strong><\/h2>\n\n\n\nGoogle also has its own set of guidelines called Material Design. Both sets of rules have similarities, especially because they both aim to improve the user experience. After all, in UX\/UI<\/a>, it all comes back to what the user thinks.<\/p>\n\n\n\nHowever, there are also lots of differences since Apple and Google are competitors. The main difference between Human Interface Guidelines vs. Material Design<\/a> is the operating systems. The HIGs are for iOS, and Material Design is for Android\/Google.<\/p>\n\n\n\nThere are other differences, too. Apple uses a primary flat design, whereas Google opts for UI that mimics materials and leaps off the screen. <\/p>\n\n\n\n
Both guidelines have had a major influence on the designs of other companies, but perhaps Google\u2019s more so. That said, Apple\u2019s emphasis on clean aesthetics is certainly compelling. For many designers, the use of white space and modern visuals is preferable over Google\u2019s depth and animations.<\/p>\n\n\n\n
As a designer, it\u2019s up to you which guidelines you follow. It\u2019s worth familiarizing yourself with both design documents in case you design for different operating systems in your career.<\/p>\n\n\n\n
<\/p>\n\n\n
\n<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
The Guidelines<\/strong><\/h2>\n\n\n\nSo, with all that out of the way, it\u2019s time to explore the iOS Human Interface Guidelines. As we mentioned, the site breaks them down into six categories, each with subcategories. You can view these in the menu bar on the left-hand side of the website. Here\u2019s what you need to know about each category.<\/p>\n\n\n\n
Platforms<\/strong><\/h3>\n\n\n\nThe first category explains how to create high-quality apps for all Apple platforms:<\/p>\n\n\n\n
\n- iOS<\/li>\n\n\n\n
- iPadOS<\/li>\n\n\n\n
- macOS<\/li>\n\n\n\n
- watchOS<\/li>\n\n\n\n
- tvOS<\/li>\n\n\n\n
- visionOS<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
On each platform, the user should be able to focus on tasks and primary content. In other words, you need to focus on visual hierarchy<\/a>. <\/p>\n\n\n\nThe Notes app on iPhone is a fantastic example. The interface is clean, with a layout that\u2019s easy to use and prioritizes the features the user needs most. There\u2019s also plenty of white space so you can focus on what\u2019s important: the text you add as a user. <\/p>\n\n\n\n
It\u2019s always important to choose which information you display and where\/how. Think about what the user wants, what they need, and how you can show it to them.<\/p>\n\n\n\n
Foundations<\/strong><\/h3>\n\n\n\nThe next category is Foundations, which provides a list of crucial design elements. This includes colors, fonts<\/a>, layout, imagery, and accessibility<\/a>. We\u2019ll discuss icons and typography in more detail later.<\/p>\n\n\n\nAs for colors, Apple recommends avoiding using the same color to indicate different things. Avoiding this similarity makes your interface more intuitive and accessible. So, you might put primary actions like \u2018Save\u2019 and \u2018Continue\u2019 in blue. However, you shouldn\u2019t put destructive actions like \u2018Delete\u2019 in the same color; instead, it appears in red.<\/p>\n\n\n\n
Furthermore, you shouldn\u2019t base color usage on personal preference. Make sure your colors have ample contrast to enhance accessibility. In fact, the HIG provides resources for checking things like this. We recommend that you take a look at the guidelines in detail.<\/p>\n\n\n\n
Patterns<\/strong><\/h3>\n\n\n\nPatterns provide design guidance for user interaction. Basically, any time the user can interact with the product, this is where you\u2019ll find the information. Think about sharing actions, searching, feedback, multitasking, and so on.<\/p>\n\n\n\n
Apple\u2019s main guidance here is to give the user clear and consistent feedback. As the user interacts with the product, they should understand what\u2019s happening at every stage.<\/p>\n\n\n\n
You can do this by informing the user about errors, visually indicating progress with loading bars, or providing notifications. Would you rather Apple tell you before<\/em> your iCloud storage is full? Or would you rather find out when a photo you just took doesn\u2019t save? If it\u2019s the former, then you understand the importance of feedback!<\/p>\n\n\n\nComponents<\/strong><\/h3>\n\n\n\nNext is the Components category. This covers how to use and customize various system components. The end goal is to ensure consistency. <\/p>\n\n\n\n
There\u2019s information about layout and organization, content, menus and actions, navigation, and more. <\/p>\n\n\n\n
Overall, the recommendations are to make things clear but not at the risk of usability. For example, use the Tab Bar for navigation and make sure it\u2019s always visible. In the modal view, you can omit the Tab Bar, as it closes and doesn’t interfere with navigation.<\/p>\n\n\n\n
Inputs<\/strong><\/h3>\n\n\n\nThe next category is Inputs. These are the different ways that users can control your application and enter data. For example, there may be keyboards, touch bars, gestures, and even eye gaze for visionOS.<\/p>\n\n\n\n
Apple\u2019s main recommendation is to offer different ways to interact with each product. This is mostly for accessibility purposes. After all, your users might rely on assistive technologies.<\/p>\n\n\n\n
Technologies<\/strong><\/h3>\n\n\n\nFinally, the Technologies category includes various Apple services that you can use within your app. This includes Game Center, Apple Pay, iCloud, Maps, and so on. <\/p>\n\n\n\n
Each technology has its own characteristics, so it\u2019s worth reading through Apple\u2019s recommendations on the HIG website. <\/p>\n\n\n\n
Apple Icons<\/strong><\/h2>\n\n\n\nGoing through some of the subcategories in more detail will help you see what makes the HIGs so special. For example, the Apple Icons section covers details on the icon design, best practices, resources, and more information. <\/p>\n\n\n\n
Apple says: \u201cAn effective icon is a graphic asset that expresses a single concept in ways people instantly understand.\u201d Each page opens with a punchy statement like this to help you understand the overall concept.<\/p>\n\n\n\n
So, with icons, Apple goes on to say that app icons use rich visual details like shading, texturing, and highlighting. These all serve to communicate an effective idea. However, there are also interface icons, which help the user interact with the app.<\/p>\n\n\n\n
Designers can choose symbols from the SF Symbols app and customize them to suit their needs. Either way, the HIGs provide ample guidance.<\/p>\n\n\n\n
<\/p>\n\n\n
\n<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
Apple Fonts<\/strong><\/h2>\n\n\n\nMeanwhile, Apple fonts aim to ensure legible text and clarify information hierarchy. They can even help you express your brand. <\/p>\n\n\n\n
Apple outlines six best practices for using their fonts.<\/p>\n\n\n\n
1. Readability<\/strong><\/h3>\n\n\n\nAim for a minimum font size that most people can read easily. Device displays can alter the minimum font size, but there are also other factors. Consider the reader\u2019s proximity to the text, for example, and whether they\u2019re in motion. <\/p>\n\n\n\n
Dynamic Type allows people to choose the size of visible text in various Apple operating systems. This is a great way to improve accessibility and overall UX.<\/p>\n\n\n\n
2. Visual Hierarchy<\/strong><\/h3>\n\n\n\nAdjust the font weight, size, and color as needed to emphasize important information. Make sure you maintain the relative hierarchy and visual distinction when people adjust the text size.<\/p>\n\n\n\n
3. Less is More<\/strong><\/h3>\n\n\n\nMinimize the number of typefaces you use. Mixing too many together can obscure information hierarchy and hinder readability. It can also affect your branding<\/a>.<\/p>\n\n\n\n4. Test Legibility<\/strong><\/h3>\n\n\n\nNot only do you need to test readability, but you also need to test it in different contexts. Test with different font sizes. Test it outside in bright sunlight and indoors in the dark. Test it in motion and view it from a distance.<\/p>\n\n\n\n
The more you test, the better you can make your product.<\/p>\n\n\n\n
5. Avoid Light Weights<\/strong><\/h3>\n\n\n\nIf you can, avoid light font weights. This will help you maintain readability. For example, opt for Medium, Semibold, or Bold font weights. Use Regular sparingly.<\/p>\n\n\n\n
6. Prioritize<\/strong><\/h3>\n\n\n\nWhen responding to text-size changes, prioritize important content. When someone selects a larger font size, they simply want to make the text they care about easier to read. So, they don\u2019t necessarily want to increase the size of every word. <\/p>\n\n\n\n
For example, Apple Mail enlarges the subject and body of the message. However, the date and the sender remain smaller.<\/p>\n\n\n\n
Design for iOS and Beyond With Page Flows<\/strong><\/h2>\n\n\n\nApple\u2019s Human Interface Guidelines can be really helpful tools, especially when designing for iOS. Even in other contexts, some of them serve as UI best practices<\/a>.<\/p>\n\n\n\nBut if you want to create amazing interfaces that dazzle your users, you\u2019ll need inspiration. So, why not learn from proven products? Page Flows is a helpful resource for finding interaction design ideas. Get started today<\/a> to access our growing library of user flow recordings and finally stay up-to-date with current design trends.<\/p>\n","protected":false},"excerpt":{"rendered":"
These documents maintain consistency across a project. They also ensure scalability, allowing your design team to handle new features, new devices, and more with ease. They can even save time when you\u2019re designing quickly.<\/p>\n\n\n\n
Apple has a lot of products under its belt. How does it ensure a seamless experience for its users across devices and apps? The answer is the HIGs, which give designers a full toolkit for designing for Apple.<\/p>\n\n\n\n
The full set of guidelines is on the HIG website<\/a>, which is publicly available. The documentation here covers absolutely everything you need to know. The downside of that, though, is that there are lengthy amounts of text. Apple divides the guide into six main categories, each with detailed information.<\/p>\n\n\n\n We\u2019ll cover each category in more detail later. For now, it\u2019s important to understand how the HIGs differ from Material Design.<\/p>\n\n\n\n <\/p>\n\n\n <\/p>\n\n\n\n Google also has its own set of guidelines called Material Design. Both sets of rules have similarities, especially because they both aim to improve the user experience. After all, in UX\/UI<\/a>, it all comes back to what the user thinks.<\/p>\n\n\n\n However, there are also lots of differences since Apple and Google are competitors. The main difference between Human Interface Guidelines vs. Material Design<\/a> is the operating systems. The HIGs are for iOS, and Material Design is for Android\/Google.<\/p>\n\n\n\n There are other differences, too. Apple uses a primary flat design, whereas Google opts for UI that mimics materials and leaps off the screen. <\/p>\n\n\n\n Both guidelines have had a major influence on the designs of other companies, but perhaps Google\u2019s more so. That said, Apple\u2019s emphasis on clean aesthetics is certainly compelling. For many designers, the use of white space and modern visuals is preferable over Google\u2019s depth and animations.<\/p>\n\n\n\n As a designer, it\u2019s up to you which guidelines you follow. It\u2019s worth familiarizing yourself with both design documents in case you design for different operating systems in your career.<\/p>\n\n\n\n <\/p>\n\n\n <\/p>\n\n\n\n So, with all that out of the way, it\u2019s time to explore the iOS Human Interface Guidelines. As we mentioned, the site breaks them down into six categories, each with subcategories. You can view these in the menu bar on the left-hand side of the website. Here\u2019s what you need to know about each category.<\/p>\n\n\n\n The first category explains how to create high-quality apps for all Apple platforms:<\/p>\n\n\n\n <\/p>\n\n\n\n On each platform, the user should be able to focus on tasks and primary content. In other words, you need to focus on visual hierarchy<\/a>. <\/p>\n\n\n\n The Notes app on iPhone is a fantastic example. The interface is clean, with a layout that\u2019s easy to use and prioritizes the features the user needs most. There\u2019s also plenty of white space so you can focus on what\u2019s important: the text you add as a user. <\/p>\n\n\n\n It\u2019s always important to choose which information you display and where\/how. Think about what the user wants, what they need, and how you can show it to them.<\/p>\n\n\n\n The next category is Foundations, which provides a list of crucial design elements. This includes colors, fonts<\/a>, layout, imagery, and accessibility<\/a>. We\u2019ll discuss icons and typography in more detail later.<\/p>\n\n\n\n As for colors, Apple recommends avoiding using the same color to indicate different things. Avoiding this similarity makes your interface more intuitive and accessible. So, you might put primary actions like \u2018Save\u2019 and \u2018Continue\u2019 in blue. However, you shouldn\u2019t put destructive actions like \u2018Delete\u2019 in the same color; instead, it appears in red.<\/p>\n\n\n\n Furthermore, you shouldn\u2019t base color usage on personal preference. Make sure your colors have ample contrast to enhance accessibility. In fact, the HIG provides resources for checking things like this. We recommend that you take a look at the guidelines in detail.<\/p>\n\n\n\n Patterns provide design guidance for user interaction. Basically, any time the user can interact with the product, this is where you\u2019ll find the information. Think about sharing actions, searching, feedback, multitasking, and so on.<\/p>\n\n\n\n Apple\u2019s main guidance here is to give the user clear and consistent feedback. As the user interacts with the product, they should understand what\u2019s happening at every stage.<\/p>\n\n\n\n You can do this by informing the user about errors, visually indicating progress with loading bars, or providing notifications. Would you rather Apple tell you before<\/em> your iCloud storage is full? Or would you rather find out when a photo you just took doesn\u2019t save? If it\u2019s the former, then you understand the importance of feedback!<\/p>\n\n\n\n Next is the Components category. This covers how to use and customize various system components. The end goal is to ensure consistency. <\/p>\n\n\n\n There\u2019s information about layout and organization, content, menus and actions, navigation, and more. <\/p>\n\n\n\n Overall, the recommendations are to make things clear but not at the risk of usability. For example, use the Tab Bar for navigation and make sure it\u2019s always visible. In the modal view, you can omit the Tab Bar, as it closes and doesn’t interfere with navigation.<\/p>\n\n\n\n The next category is Inputs. These are the different ways that users can control your application and enter data. For example, there may be keyboards, touch bars, gestures, and even eye gaze for visionOS.<\/p>\n\n\n\n Apple\u2019s main recommendation is to offer different ways to interact with each product. This is mostly for accessibility purposes. After all, your users might rely on assistive technologies.<\/p>\n\n\n\n Finally, the Technologies category includes various Apple services that you can use within your app. This includes Game Center, Apple Pay, iCloud, Maps, and so on. <\/p>\n\n\n\n Each technology has its own characteristics, so it\u2019s worth reading through Apple\u2019s recommendations on the HIG website. <\/p>\n\n\n\n Going through some of the subcategories in more detail will help you see what makes the HIGs so special. For example, the Apple Icons section covers details on the icon design, best practices, resources, and more information. <\/p>\n\n\n\n Apple says: \u201cAn effective icon is a graphic asset that expresses a single concept in ways people instantly understand.\u201d Each page opens with a punchy statement like this to help you understand the overall concept.<\/p>\n\n\n\n So, with icons, Apple goes on to say that app icons use rich visual details like shading, texturing, and highlighting. These all serve to communicate an effective idea. However, there are also interface icons, which help the user interact with the app.<\/p>\n\n\n\n Designers can choose symbols from the SF Symbols app and customize them to suit their needs. Either way, the HIGs provide ample guidance.<\/p>\n\n\n\n <\/p>\n\n\n <\/p>\n\n\n\n Meanwhile, Apple fonts aim to ensure legible text and clarify information hierarchy. They can even help you express your brand. <\/p>\n\n\n\n Apple outlines six best practices for using their fonts.<\/p>\n\n\n\n Aim for a minimum font size that most people can read easily. Device displays can alter the minimum font size, but there are also other factors. Consider the reader\u2019s proximity to the text, for example, and whether they\u2019re in motion. <\/p>\n\n\n\n Dynamic Type allows people to choose the size of visible text in various Apple operating systems. This is a great way to improve accessibility and overall UX.<\/p>\n\n\n\n Adjust the font weight, size, and color as needed to emphasize important information. Make sure you maintain the relative hierarchy and visual distinction when people adjust the text size.<\/p>\n\n\n\n Minimize the number of typefaces you use. Mixing too many together can obscure information hierarchy and hinder readability. It can also affect your branding<\/a>.<\/p>\n\n\n\n Not only do you need to test readability, but you also need to test it in different contexts. Test with different font sizes. Test it outside in bright sunlight and indoors in the dark. Test it in motion and view it from a distance.<\/p>\n\n\n\n The more you test, the better you can make your product.<\/p>\n\n\n\n If you can, avoid light font weights. This will help you maintain readability. For example, opt for Medium, Semibold, or Bold font weights. Use Regular sparingly.<\/p>\n\n\n\n When responding to text-size changes, prioritize important content. When someone selects a larger font size, they simply want to make the text they care about easier to read. So, they don\u2019t necessarily want to increase the size of every word. <\/p>\n\n\n\n For example, Apple Mail enlarges the subject and body of the message. However, the date and the sender remain smaller.<\/p>\n\n\n\n Apple\u2019s Human Interface Guidelines can be really helpful tools, especially when designing for iOS. Even in other contexts, some of them serve as UI best practices<\/a>.<\/p>\n\n\n\n But if you want to create amazing interfaces that dazzle your users, you\u2019ll need inspiration. So, why not learn from proven products? Page Flows is a helpful resource for finding interaction design ideas. Get started today<\/a> to access our growing library of user flow recordings and finally stay up-to-date with current design trends.<\/p>\n","protected":false},"excerpt":{"rendered":"<\/figure>\n<\/div>\n\n\nHuman Interface Guidelines vs. Material Design<\/strong><\/h2>\n\n\n\n
<\/figure>\n<\/div>\n\n\nThe Guidelines<\/strong><\/h2>\n\n\n\n
Platforms<\/strong><\/h3>\n\n\n\n
\n
Foundations<\/strong><\/h3>\n\n\n\n
Patterns<\/strong><\/h3>\n\n\n\n
Components<\/strong><\/h3>\n\n\n\n
Inputs<\/strong><\/h3>\n\n\n\n
Technologies<\/strong><\/h3>\n\n\n\n
Apple Icons<\/strong><\/h2>\n\n\n\n
<\/figure>\n<\/div>\n\n\nApple Fonts<\/strong><\/h2>\n\n\n\n
1. Readability<\/strong><\/h3>\n\n\n\n
2. Visual Hierarchy<\/strong><\/h3>\n\n\n\n
3. Less is More<\/strong><\/h3>\n\n\n\n
4. Test Legibility<\/strong><\/h3>\n\n\n\n
5. Avoid Light Weights<\/strong><\/h3>\n\n\n\n
6. Prioritize<\/strong><\/h3>\n\n\n\n
Design for iOS and Beyond With Page Flows<\/strong><\/h2>\n\n\n\n