- Scan ID:
- 27fc8faa-bfa4-458d-b455-cce43c1004baFinished
- Submitted URL:
- https://developer.apple.com/design/
- Report Finished:
Links · 10 found
The outgoing links identified from the page
| Link | Text |
|---|---|
| https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/guides-76105412-ED4C-4D9D-AAA5-E039F7FE142B/WWDC24-Design.pdf | Download the design one-sheet |
| https://www.apple.com/ | Apple |
| https://opensource.apple.com | Open Source |
| https://appstoreconnect.apple.com/ | App Store Connect |
| https://feedbackassistant.apple.com/ | Feedback Assistant |
| https://mfi.apple.com/ | MFi Program |
| https://apps.apple.com/us/app/apple-developer/id640199958 | Apple Developer app |
| https://www.apple.com | Apple Inc. |
| https://www.apple.com/legal/internet-services/terms/site.html | Terms of Use |
| https://www.apple.com/legal/privacy/ | Privacy Policy |
JavaScript Variables · 39 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| Settings | object |
| LanguageLocales | object |
| AC | object |
| s_account | string |
| isTouchAvailable | function |
Console log messages · 0 found
Messages logged to the web console
HTML
The raw HTML body of the page
<!DOCTYPE html><html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta charset="utf-8">
<meta name="Author" content="Apple Inc.">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico">
<link rel="mask-icon" href="/apple-logo.svg" color="#333333">
<link rel="stylesheet" href="/assets/styles/global.dist.css?01172423298" type="text/css">
<link rel="stylesheet" href="/assets/styles/localization.css?39172414191" type="text/css">
<script src="/assets/scripts/lib/jquery/jquery-3.6.0.min.js?17182448067"></script>
<script src="/assets/scripts/settings.js?17182448067"></script>
<script src="/assets/scripts/language-locales.js?17182448067"></script>
<script src="/assets/scripts/DeveloperBreadcrumbs.js?05182434080"></script>
<script async="" src="/assets/scripts/lib/jquery/jquery.retinate.js?17182448067"></script>
<script async="" src="/assets/scripts/global.js?17182448067"></script>
<script async="" src="/assets/scripts/global-logout.js?17182448067"></script>
<link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Pro&v=2" type="text/css">
<link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Pro+Icons&v=1" type="text/css">
<link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Mono&v=2" type="text/css">
<link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Apple+Icons&v=1" type="text/css">
<title>Design - Apple Developer</title>
<meta name="omni_page" content="Design - (English)">
<meta name="Description" content="Find documentation and resources for designing great apps for Apple platforms.">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Apple Developer">
<meta property="og:type" content="website">
<meta property="og:image" content="https://developer.apple.com/news/images/og/design-og.jpg">
<meta property="og:title" content="Design - Apple Developer">
<meta property="og:description" content="Find documentation and resources for designing great apps for Apple platforms.">
<meta property="og:url" content="https://developer.apple.com/design/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://developer.apple.com/news/images/og/design-og-twitter.jpg">
<meta name="twitter:title" content="Design - Apple Developer">
<meta name="twitter:description" content="Find documentation and resources for designing great apps for Apple platforms.">
<meta name="twitter:url" content="https://developer.apple.com/design/">
<link rel="alternate" href="https://developer.apple.com/design/" hreflang="en">
<link rel="alternate" href="https://developer.apple.com/cn/design/" hreflang="zh-CN">
<link rel="alternate" href="https://developer.apple.com/jp/design/" hreflang="ja-JP">
<link rel="alternate" href="https://developer.apple.com/kr/design/" hreflang="ko-KR">
<link rel="canonical" href="https://developer.apple.com/design/">
<link rel="stylesheet" href="/design/styles/design-alt.css?Monday, 04-Nov-2024 20:58:21 GMT2" type="text/css">
</head>
<body class="nav-design dmf" data-color-scheme="light">
<script>
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (window.Settings.preferredColorScheme) {
const colorTheme = (window.Settings.preferredColorScheme === 'auto') && !prefersDark ? 'light' : (window.Settings.preferredColorScheme === 'light') ? 'light' : 'dark'
document.body.setAttribute('data-color-scheme', colorTheme);
} else {
document.body.setAttribute('data-color-scheme', prefersDark ? 'dark' : 'light');
}
</script>
<style>
/* footer */
html body[data-color-scheme='dark'] #main section.section.section-resources.bg-alt {background-color:var(--fill-tertiary);color:var(--glyph-gray);}
html body[data-color-scheme='dark'] .developer-router-links {background-color:var(--fill-tertiary);color:var(--glyph-gray);}
html body[data-color-scheme='dark'] .footer {background-color:var(--fill-tertiary);color:var(--glyph-gray-tertiary);}
/* body backgrounds */
body[data-color-scheme='dark'].dmf {background-color: #000;}
html body[data-color-scheme='dark'].dmf .bg-alt {background-color:var(--fill-tertiary);}
html body[data-color-scheme='dark'].dmf .bg-blue {background-color:var(--fill-blue-secondary);}
html body[data-color-scheme='dark'].dmf .bg-green-blue {background:linear-gradient(135deg, #65976d 0%, #588ea4 100%)}
html body[data-color-scheme='dark'].dmf .bg-yellow {background: linear-gradient(to bottom, var(--fill-tertiary) 0%, var(--fill-tertiary-alt) 100%);}
html body[data-color-scheme='dark'].dmf .bg-light {background-color:var(--fill-secondary-alt);}
html body[data-color-scheme='dark'].dmf .bg-gradient, html body[data-color-scheme='dark'].dmf .bg-grad {background:linear-gradient(to bottom, var(--dark) 0%, var(--fill-gray-secondary-alt) 100%);}
html body[data-color-scheme='dark'].dmf .bg-grad-down {background:linear-gradient(to bottom, var(--dark) 0%, var(--fill-gray-secondary-alt) 100%);}
html body[data-color-scheme='dark'].dmf .bg-grad-up {background:linear-gradient(to bottom, var(--fill-gray-secondary-alt) 0%, var(--dark) 100%);}
html body[data-color-scheme='dark'].dmf .bg-blue-gradient, html body[data-color-scheme='dark'].dmf .bg-gradient-blue {background:linear-gradient(to bottom, var(--fill-blue-gradient-light) 0%, var(--fill-blue-gradient-dark) 100%);}
html body[data-color-scheme='dark'].dmf .bg-blue-gradient-alt {background: linear-gradient(90deg, #061830 0%, #102d48 100%);}
/* globalNav */
html body[data-color-scheme='dark'] #ac-globalnav {background: var(--fill-tertiary);}
/* localNav */
html body[data-color-scheme='dark'] .localnav.localnav-scrim .localnav-background,
html body[data-color-scheme='dark'] .localnav-scrim.localnav.localnav-background {
background-color: rgba(29, 29, 31, 0.9);
}
@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {
html body[data-color-scheme='dark'] .localnav.localnav-scrim .localnav-background,
html body[data-color-scheme='dark'] .localnav-scrim.localnav.localnav-background {
background-color: rgba(29, 29, 31, 0.72);
}
}
</style>
<link rel="stylesheet" href="/assets/styles/globalnav.css?55202406207" type="text/css">
<link rel="stylesheet" href="/assets/styles/suggest-lang.css?17182448067" type="text/css">
<div id="suggest-lang" class="ribbon hide" lang="en">
<div class="ribbon-content-wrapper">
<div class="ribbon-content row">
<div class="column large-12 large-centered">
<p><a href="#" id="suggest-link" class="ribbon-link more">View in English</a></p>
<button id="suggest-closer" class="icon icon-after icon-reset" aria-label="Dismiss language suggestion" tabindex="0"></button>
</div>
</div>
</div>
</div>
<script src="/assets/scripts/suggest-lang.js?17182448067"></script>
<aside id="ac-gn-segmentbar" class="ac-gn-segmentbar" lang="en-US" dir="ltr">
</aside>
<input type="checkbox" id="ac-gn-menustate" class="ac-gn-menustate">
<nav id="ac-globalnav" class="js no-touch" role="navigation" aria-label="Global" data-hires="false" data-analytics-region="global nav" lang="en-US" dir="ltr" data-www-domain="www.apple.com" data-store-locale="us" data-store-root-path="/us" data-store-api="/[storefront]/shop/bag/status" data-search-locale="en_US" data-search-suggestions-api="/search-services/suggestions/" data-search-defaultlinks-api="/search-services/suggestions/defaultlinks/" data-search-suggestions-enabled="false">
<div class="ac-gn-content">
<ul class="ac-gn-header">
<li class="ac-gn-item ac-gn-menuicon">
<label class="ac-gn-menuicon-label" for="ac-gn-menustate" aria-hidden="true">
<span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-top">
<span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-top"></span>
</span>
<span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-bottom">
<span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-bottom"></span>
</span>
</label>
<a href="#ac-gn-menustate" role="button" class="ac-gn-menuanchor ac-gn-menuanchor-open" id="ac-gn-menuanchor-open">
<span class="ac-gn-menuanchor-label">Global Nav Open Menu</span>
</a>
<a href="#" role="button" class="ac-gn-menuanchor ac-gn-menuanchor-close" id="ac-gn-menuanchor-close">
<span class="ac-gn-menuanchor-label">Global Nav Close Menu</span>
</a>
</li>
<li class="ac-gn-item ac-gn-apple">
<a class="ac-gn-link ac-gn-link-apple-developer" href="/" data-analytics-title="appledeveloper home" id="ac-gn-firstfocus-small">
<span class="ac-gn-link-text">Apple Developer</span>
</a>
</li>
</ul>
<div class="ac-gn-search-placeholder-container" role="search">
<div class="ac-gn-search ac-gn-search-small">
<a id="ac-gn-link-search-small" class="ac-gn-link" href="/search/" data-analytics-title="search" data-analytics-click="search" data-analytics-intrapage-link="" aria-label="Search">
<div class="ac-gn-search-placeholder-bar">
<div class="ac-gn-search-placeholder-input">
<div class="ac-gn-search-placeholder-input-text" aria-hidden="true">
<div class="ac-gn-link-search ac-gn-search-placeholder-input-icon"></div>
<span class="ac-gn-search-placeholder">Search</span>
</div>
</div>
<div class="ac-gn-searchview-close ac-gn-searchview-close-small ac-gn-search-placeholder-searchview-close">
<span class="ac-gn-searchview-close-cancel" aria-hidden="true">Cancel</span>
</div>
</div>
</a>
</div>
</div>
<ul class="ac-gn-list">
<li class="ac-gn-item ac-gn-apple">
<a class="ac-gn-link ac-gn-link-apple-developer" href="/" data-analytics-title="appledeveloper home" id="ac-gn-firstfocus">
<span class="ac-gn-link-text">Apple Developer</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-news">
<a class="ac-gn-link ac-gn-link-news" href="/news/" data-analytics-title="news">
<span class="ac-gn-link-text">News</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-discover">
<a class="ac-gn-link ac-gn-link-discover" href="/discover/" data-analytics-title="discover">
<span class="ac-gn-link-text">Discover</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-design">
<a class="ac-gn-link ac-gn-link-design" href="/design/" data-analytics-title="design">
<span class="ac-gn-link-text">Design</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-develop">
<a class="ac-gn-link ac-gn-link-develop" href="/develop/" data-analytics-title="develop">
<span class="ac-gn-link-text">Develop</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-distribute">
<a class="ac-gn-link ac-gn-link-distribute" href="/distribute/" data-analytics-title="distribute">
<span class="ac-gn-link-text">Distribute</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-dsupport">
<a class="ac-gn-link ac-gn-link-dsupport" href="/support/" data-analytics-title="dsupport">
<span class="ac-gn-link-text">Support</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-account">
<a class="ac-gn-link ac-gn-link-account" href="/account/" data-analytics-title="account">
<span class="ac-gn-link-text">Account</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-search" role="search">
<a id="ac-gn-link-search" class="ac-gn-link ac-gn-link-search" href="/search/" data-analytics-title="search" data-analytics-click="search" data-analytics-intrapage-link="" aria-label="Search"></a>
</li>
</ul>
<aside id="ac-gn-searchview" class="ac-gn-searchview" role="search" data-analytics-region="search">
<div class="ac-gn-searchview-content">
<div class="ac-gn-searchview-bar">
<div class="ac-gn-searchview-bar-wrapper">
<form id="ac-gn-searchform" class="ac-gn-searchform" action="/search/" method="get">
<div class="ac-gn-searchform-wrapper">
<input id="ac-gn-searchform-input" class="ac-gn-searchform-input" type="text" name="q" aria-label="Search" placeholder="Search" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-owns="quicklinks suggestions">
<button id="ac-gn-searchform-submit" class="ac-gn-searchform-submit" type="submit" disabled="" aria-label="Submit Search"></button>
<button id="ac-gn-searchform-reset" class="ac-gn-searchform-reset" type="reset" disabled="" aria-label="Clear Search">
<span class="ac-gn-searchform-reset-background"></span>
</button>
</div>
</form>
<button id="ac-gn-searchview-close-small" class="ac-gn-searchview-close ac-gn-searchview-close-small" aria-label="Cancel Search">
<span class="ac-gn-searchview-close-cancel" aria-hidden="true">
Cancel
</span>
</button>
</div>
</div>
<aside id="ac-gn-searchresults" class="ac-gn-searchresults" data-string-quicklinks="Quick Links" data-string-suggestions="Suggested Searches" data-string-noresults="">
<section class="ac-gn-searchresults-section ac-gn-searchresults-section-defaultlinks">
<div class="ac-gn-searchresults-section-wrapper">
<div class="search-group-checkbox hidden"><input id="group-input" type="checkbox" name="group-filter" checked="">Only search within “<span id="group-search-label"></span>”</div>
<h3 class="ac-gn-searchresults-header ac-gn-searchresults-animated">Quick Links</h3>
<ul class="ac-gn-searchresults-list" id="defaultlinks" role="listbox">
<li class="ac-gn-searchresults-item ac-gn-searchresults-animated"><a href="/download/" id="search-group-link-0" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks">Downloads</a></li><li class="ac-gn-searchresults-item ac-gn-searchresults-animated"><a href="/documentation/" id="search-group-link-1" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks">Documentation</a></li><li class="ac-gn-searchresults-item ac-gn-searchresults-animated"><a href="/videos/" id="search-group-link-2" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks">Videos</a></li><li class="ac-gn-searchresults-item ac-gn-searchresults-animated"><a href="/forums/" id="search-group-link-3" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks">Forums</a></li><li class="ac-gn-searchresults-item ac-gn-searchresults-animated"><a href="/xcode/" id="search-group-link-4" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks">Xcode</a></li></ul>
<span role="status" class="ac-gn-searchresults-count" aria-live="polite">5 Quick Links</span>
</div>
</section>
</aside>
</div>
<button id="ac-gn-searchview-close" class="ac-gn-searchview-close" aria-label="Cancel Search">
<span class="ac-gn-searchview-close-wrapper">
<span class="ac-gn-searchview-close-left"></span>
<span class="ac-gn-searchview-close-right"></span>
</span>
</button>
</aside>
</div>
</nav>
<div class="ac-gn-blur"></div>
<div id="ac-gn-curtain" class="ac-gn-curtain"></div>
<div id="ac-gn-placeholder" class="ac-nav-placeholder"></div>
<script src="/assets/scripts/ac-globalnav.built.js?17182448067"></script><div id="ac-gn-viewport-emitter"> </div>
<link rel="stylesheet" href="/assets/styles/search.css?17182448067">
<script src="/assets/scripts/search.js?17182448067"></script>
<!-- metrics -->
<script>
/* RSID: */
var s_account="awdappledeveloper"
</script>
<script src="/assets/metrics/scripts/analytics.js?072620243"></script>
<script>
s.pageName= AC && AC.Tracking && AC.Tracking.pageName();
s.channel="www.en.developer"
s.channel="www.en.developer";
/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
var s_code=s.t();if(s_code)document.write(s_code)
</script>
<!-- /metrics -->
<link rel="stylesheet" property="stylesheet" href="/assets/styles/localnav.css" type="text/css">
<input type="checkbox" id="localnav-menustate" class="localnav-menustate">
<div id="localnav-sticky-placeholder" class="css-sticky"></div><nav id="localnav" class="localnav localnav-scrim css-sticky" data-sticky="" role="navigation">
<div class="localnav-wrapper">
<div class="localnav-background"></div>
<div class="localnav-content">
<h2 class="localnav-title">
<a class="ac-ln-title-logo" href="/design/" data-analytics-title="product index">Design</a>
</h2>
<div class="localnav-menu">
<a href="#localnav-menustate" class="localnav-menucta-anchor localnav-menucta-anchor-open" id="localnav-menustate-open">
<span class="localnav-menucta-anchor-label">Open Menu</span>
</a>
<a href="#" class="localnav-menucta-anchor localnav-menucta-anchor-close" id="localnav-menustate-close">
<span class="localnav-menucta-anchor-label">Close Menu</span>
</a>
<div class="localnav-menu-tray">
<ul class="localnav-menu-items">
<li class="localnav-menu-item">
<a href="/design/" class="localnav-menu-link current" aria-disabled="true">Overview</a>
</li>
<li class="localnav-menu-item">
<a href="/design/pathway/" class="localnav-menu-link">Pathway</a>
</li>
<li class="localnav-menu-item">
<a href="/design/whats-new/" class="localnav-menu-link">What’s new</a>
</li>
<li class="localnav-menu-item">
<a href="/design/human-interface-guidelines/" class="localnav-menu-link">Guidelines</a>
</li>
<li class="localnav-menu-item">
<a href="/design/resources/" class="localnav-menu-link">Resources</a>
</li>
</ul>
</div>
<div class="localnav-actions">
<div class="localnav-action localnav-action-menucta" aria-hidden="true">
<label for="localnav-menustate" class="localnav-menucta">
<span class="localnav-menucta-chevron"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</nav>
<label id="localnav-curtain" for="localnav-menustate"></label>
<script src="/assets/scripts/ac-localnav.built.js"></script><div id="localnav-viewport-emitter" data-viewport-emitter-dispatch="" data-viewport-emitter-state="{"viewport":"medium","orientation":"landscape","retina":false}"></div>
<script type="text/javascript" src="/assets/scripts/localnav.js"></script>
<main id="main" class="main" role="main">
<div class="ribbon ribbon-blue">
<div class="ribbon-drop-wrapper">
<div class="ribbon-content-wrapper">
<div class="ribbon-content row">
<div class="column large-centered">
<p><a href="/news/?id=s9s75a8k" class="ribbon-link">Design sessions, documentation, and sample code — <span class="nowrap more">all in one place</span></a></p>
</div>
</div>
</div>
</div>
</div>
<section id="hello-section" class="section section-hero" style="background-color: rgb(191, 221, 255);">
<figure class="hello-hero" id="hello-hero" style="background-image: url("/design/images/hello/design-hero-blue-light_2x.png");"></figure>
<div class="section-content">
<div class="row">
<div class="column large-8 medium-11 small-12 large-centered text-center">
<p class="hero-text">Learn how to design great apps and games that integrate seamlessly with Apple platforms.</p>
</div>
</div>
</div>
</section>
<script src="/design/scripts/hello-hero.js?Thursday, 07-Mar-2024 18:48:48 GMT"></script>
<section class="section section-one-sheet no-padding-top no-padding-bottom margin-top-small margin-bottom-small text-center">
<div class="section-content">
<h4 class="typography-headline-body">Want the highlights? <a href="https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/guides-76105412-ED4C-4D9D-AAA5-E039F7FE142B/WWDC24-Design.pdf" class="icon icon-after icon-downloadcircle nowrap">Download the design one-sheet</a></h4>
</div>
</section>
<section class="section section-meet margin-top-small">
<div class="section-content">
<div>
<h2>Human Interface Guidelines</h2>
<p class="large-9 medium-12 small-12">Learn essential information about platforms, foundations, patterns, components, inputs, and technologies. The HIG offers guidance and best practices for designing exceptional user experiences across all Apple platforms.</p>
<p><a class="more" href="/design/human-interface-guidelines/">Explore the Human Interface Guidelines</a></p>
</div>
<ul role="list" class="tiles-list">
<li role="listitem" class="tile-item item-hero">
<a href="/design/human-interface-guidelines/designing-for-games/" class="tile tile-hero" aria-label="">
<div class="tile-media" aria-hidden="true">
<figure class="tile-image hig-card-games"></figure>
</div>
<div class="tile-description" aria-hidden="true">
<div class="tile-head">
<div class="tile-category">GETTING STARTED</div>
<div class="tile-headline">Designing for games</div>
<div class="tile-paragraph">When people play your game on an Apple device, they dive into the world you designed while relying on the platform features they love.</div>
</div>
<div class="tile-timestamp">June 10, 2024</div>
</div>
</a>
</li>
<li role="listitem" class="tile-item item-2up">
<a href="/design/human-interface-guidelines/controls/" class="tile tile-2up">
<div class="tile-media" aria-hidden="true">
<figure class="tile-image hig-card-controls"></figure>
</div>
<div class="tile-description" aria-hidden="true">
<div class="tile-head">
<div class="tile-category">COMPONENTS</div>
<div class="tile-headline">Controls</div>
</div>
<div class="tile-timestamp">June 10, 2024</div>
</div>
</a>
</li>
<li role="listitem" class="tile-item item-2up">
<a href="/design/human-interface-guidelines/app-icons/" class="tile tile-2up">
<div class="tile-media" aria-hidden="true">
<figure class="tile-image hig-card-app-icon"></figure>
</div>
<div class="tile-description" aria-hidden="true">
<div class="tile-head">
<div class="tile-category">FOUNDATIONS</div>
<div class="tile-headline">App icons</div>
</div>
<div class="tile-timestamp">June 10, 2024</div>
</div>
</a>
</li>
</ul>
</div>
</section>
<section class="section section-videos">
<div class="section-content">
<h2>Design sessions</h2>
<p class="large-9 medium-12 small-12">Learn about designing great app and game experiences from Apple experts.</p>
<p><a class="more" href="/videos/design/">Watch design videos</a></p>
<ul role="list" class="tiles-list">
<li role="listitem" class="tile-item item-hero">
<a href="/videos/play/wwdc2024/10086/" class="tile tile-hero" aria-label="">
<div class="tile-media" aria-hidden="true">
<figure class="tile-image video-card-vos"></figure>
</div>
<div class="tile-description" aria-hidden="true">
<div class="tile-head">
<div class="tile-category">VIDEO</div>
<div class="tile-headline">Design great visionOS apps</div>
<div class="tile-paragraph">Find out how to create compelling spatial computing apps by embracing immersion, designing for eyes and hands, and taking advantage of depth, scale, and space.</div>
</div>
<div class="tile-timestamp">WWDC24</div>
</div>
</a>
</li>
<li role="listitem" class="tile-item item-2up">
<a href="/videos/play/wwdc2024/10140/" class="tile tile-2up">
<div class="tile-media" aria-hidden="true">
<figure class="tile-image video-card-ux"></figure>
</div>
<div class="tile-description" aria-hidden="true">
<div class="tile-head">
<div class="tile-category">VIDEO</div>
<div class="tile-headline">Add personality to your app through UX writing</div>
<div class="tile-paragraph">Learn how to define your app’s voice and modulate your tone for every situation. </div>
</div>
<div class="tile-timestamp">WWDC24</div>
</div>
</a>
</li>
<li role="listitem" class="tile-item item-2up">
<a href="/videos/play/wwdc2024/10188/" class="tile tile-2up">
<div class="tile-media" aria-hidden="true">
<figure class="tile-image video-card-sf-symbols"></figure>
</div>
<div class="tile-description" aria-hidden="true">
<div class="tile-head">
<div class="tile-category">VIDEO</div>
<div class="tile-headline">What’s new in SF Symbols 6</div>
<div class="tile-paragraph">Learn how the new Wiggle, Rotate, and Breathe animation presets can bring vitality to your interface.</div>
</div>
<div class="tile-timestamp">WWDC24</div>
</div>
</a>
</li>
</ul>
</div>
</section>
<section class="section section-articles">
<div class="section-content">
<h2>Design articles</h2>
<ul role="list" class="tiles-list">
<li role="listitem" class="tile-item item-hero">
<a href="/news/?id=9x75y43e" class="tile tile-hero" aria-label="">
<div class="tile-media" aria-hidden="true">
<figure class="tile-image article-card-crouton"></figure>
</div>
<div class="tile-description" aria-hidden="true">
<div class="tile-head">
<div class="tile-category">BEHIND THE DESIGN</div>
<div class="tile-headline">How Devin Davies whipped up the tasty recipe app Crouton</div>
<!-- <div class="tile-paragraph"></div> -->
</div>
<div class="tile-timestamp">November 4, 2024</div>
</div>
</a>
</li>
<li role="listitem" class="tile-item item-2up">
<a href="/news/?id=jimo1g6z" class="tile tile-2up">
<div class="tile-media" aria-hidden="true">
<figure class="tile-image article-card-lop"></figure>
</div>
<div class="tile-description" aria-hidden="true">
<div class="tile-head">
<div class="tile-category">BEHIND THE DESIGN</div>
<div class="tile-headline">Meet the masters of puppets behind Lies of P</div>
</div>
<div class="tile-timestamp">October 10, 2024</div>
</div>
</a>
</li>
<li role="listitem" class="tile-item item-2up">
<a href="/news/?id=34m9vbvv" class="tile tile-2up">
<div class="tile-media" aria-hidden="true">
<figure class="tile-image article-card-rytmos"></figure>
</div>
<div class="tile-description" aria-hidden="true">
<div class="tile-head">
<div class="tile-category">BEHIND THE DESIGN</div>
<div class="tile-headline">The rhythms of Rytmos</div>
</div>
<div class="tile-timestamp">September 3, 2024</div>
</div>
</a>
</li>
</ul>
</div>
</section>
<section class="section section-resources bg-light">
<div class="section-content">
<div class="row">
<div class="column large-8 medium-12 small-12 sv-small-padding-top small-text-center">
<h2>Apple Design Resources</h2>
<p>Design apps quickly and accurately by using Sketch, Photoshop, Figma templates, guides, and other resources.</p>
<p class="nowrap"><a class="more" href="/design/resources/">View Apple Design Resources</a></p>
</div>
</div>
<div class="row">
<div class="column large-12 small-12">
<picture>
<img class="light-image resource-image" src="/design/images/hello/apple-design-resources_2x.jpg" width="100%" alt="">
<img class="dark-image resource-image" src="/design/images/hello/apple-design-resources-dark_2x.jpg" width="100%" alt="">
</picture>
</div>
</div>
</div>
</section>
</main>
<link rel="stylesheet" href="/assets/styles/footer.dist.css?17182448067">
<footer id="footer" class="footer" role="contentinfo" aria-labelledby="footer-label">
<div class="footer-content">
<h2 class="footer-label" id="footer-label">Developer Footer</h2>
<developer-breadcrumbs style="display: block;">
<nav class="footer-breadcrumbs" aria-label="Breadcrumbs"><a href="https://www.apple.com/" class="home footer-breadcrumbs-home"><span class="footer-breadcrumbs-home-icon" aria-hidden="true" data-hires-status="pending"></span><span class="footer-breadcrumbs-home-label">Apple</span></a><div class="footer-breadcrumbs-path"><ol class="footer-breadcrumbs-list"><li class="footer-breadcrumbs-item"><a href="/">Developer</a></li><li class="footer-breadcrumbs-item">Design</li></ol></div></nav></developer-breadcrumbs>
<nav class="footer-directory" aria-label="Apple Developer Directory" role="navigation">
<!--googleoff: all-->
<div class="footer-directory-column">
<input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-platform">
<div class="footer-directory-column-section">
<label class="footer-directory-column-section-label" for="footer-directory-column-section-state-platform">
<h3 class="footer-directory-column-section-title">Platforms</h3>
</label>
<a href="#footer-directory-column-section-state-platform" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a>
<a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a>
<ul class="footer-directory-column-section-list">
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/ios/">iOS</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/ipados/">iPadOS</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/macos/">macOS</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/tvos/">tvOS</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/visionos/">visionOS</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/watchos/">watchOS</a></li>
</ul>
</div>
<input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-tools">
<div class="footer-directory-column-section">
<label class="footer-directory-column-section-label" for="footer-directory-column-section-state-tools">
<h3 class="footer-directory-column-section-title">Tools</h3>
</label>
<a href="#footer-directory-column-section-state-tools" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a>
<a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a>
<ul class="footer-directory-column-section-list">
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swift/">Swift</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swiftui/">SwiftUI</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swift-playgrounds/">Swift Playgrounds</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/testflight/">TestFlight</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/xcode/">Xcode</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/xcode-cloud/">Xcode Cloud</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/sf-symbols/">SF Symbols</a></li>
</ul>
</div>
</div>
<div class="footer-directory-column">
<input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-topics">
<div class="footer-directory-column-section">
<label class="footer-directory-column-section-label" for="footer-directory-column-section-state-topics">
<h3 class="footer-directory-column-section-title">Topics & Technologies</h3>
</label>
<a href="#footer-directory-column-section-state-topics" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a>
<a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a>
<ul class="footer-directory-column-section-list">
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/accessibility/">Accessibility</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/accessories/">Accessories</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-extensions/">App Extensions</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/">App Store</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/audio/">Audio & Video</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/augmented-reality/">Augmented Reality</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/design/">Design</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/distribute/">Distribution</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/education/">Education</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/fonts/">Fonts</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/games/">Games</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/health-fitness/">Health & Fitness</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/in-app-purchase/">In-App Purchase</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/localization/">Localization</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/maps/">Maps & Location</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/machine-learning/">Machine Learning</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://opensource.apple.com">Open Source</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/security/">Security</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/safari/">Safari & Web</a></li>
</ul>
</div>
</div>
<div class="footer-directory-column">
<input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-resources">
<div class="footer-directory-column-section">
<label class="footer-directory-column-section-label" for="footer-directory-column-section-state-resources">
<h3 class="footer-directory-column-section-title">Resources</h3>
</label>
<a href="#footer-directory-column-section-state-resources" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a>
<a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a>
<ul class="footer-directory-column-section-list">
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/documentation/">Documentation</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/learn/">Tutorials</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/download/">Downloads</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/forums/">Forums</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/videos/">Videos</a></li>
</ul>
</div>
<input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-support">
<div class="footer-directory-column-section">
<label class="footer-directory-column-section-label" for="footer-directory-column-section-state-support">
<h3 class="footer-directory-column-section-title">Support</h3>
</label>
<a href="#footer-directory-column-section-state-support" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a>
<a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a>
<ul class="footer-directory-column-section-list">
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/support/articles/">Support Articles</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/contact/">Contact Us</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/bug-reporting/">Bug Reporting</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/system-status/">System Status</a></li>
</ul>
</div>
<input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-account">
<div class="footer-directory-column-section">
<label class="footer-directory-column-section-label" for="footer-directory-column-section-state-account">
<h3 class="footer-directory-column-section-title">Account</h3>
</label>
<a href="#footer-directory-column-section-state-account" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a>
<a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a>
<ul class="footer-directory-column-section-list">
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/">Apple Developer</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://appstoreconnect.apple.com/">App Store Connect</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/ios/certificate/">Certificates, IDs, & Profiles</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://feedbackassistant.apple.com/">Feedback Assistant</a></li>
</ul>
</div>
</div>
<div class="footer-directory-column">
<input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-programs">
<div class="footer-directory-column-section">
<label class="footer-directory-column-section-label" for="footer-directory-column-section-state-programs">
<h3 class="footer-directory-column-section-title">Programs</h3>
</label>
<a href="#footer-directory-column-section-state-programs" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a>
<a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a>
<ul class="footer-directory-column-section-list">
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/">Apple Developer Program</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/enterprise/">Apple Developer Enterprise Program</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/small-business-program/">App Store Small Business Program</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://mfi.apple.com/">MFi Program</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/news-partner/">News Partner Program</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/video-partner/">Video Partner Program</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/security-bounty/">Security Bounty Program</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/security-research-device/">Security Research Device Program</a></li>
</ul>
</div>
<input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-events">
<div class="footer-directory-column-section">
<label class="footer-directory-column-section-label" for="footer-directory-column-section-state-events">
<h3 class="footer-directory-column-section-title">Events</h3>
</label>
<a href="#footer-directory-column-section-state-events" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a>
<a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a>
<ul class="footer-directory-column-section-list">
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/events/">Meet with Apple</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/events/developer-centers/">Apple Developer Centers</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/app-store-awards/">App Store Awards</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/design/awards/">Apple Design Awards</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/academies/">Apple Developer Academies</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/entrepreneur-camp/">Entrepreneur Camp</a></li>
<li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/wwdc/">WWDC</a></li>
</ul>
</div>
</div>
<!--googleon: all-->
</nav>
<section class="footer-mini" vocab="http://schema.org/" typeof="Organization">
<div class="footer-mini-news">
<div class="copy">
Get the <a href="https://apps.apple.com/us/app/apple-developer/id640199958">Apple Developer app</a>.
</div>
<div class="content">
<div class="color-scheme-toggle" role="radiogroup" tabindex="0" aria-label="Select a color scheme preference">
<label data-color-scheme-option="light">
<input type="radio" value="light" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)">
<div class="text">Light</div>
</label>
<label data-color-scheme-option="dark">
<input type="radio" value="dark" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)">
<div class="text">Dark</div>
</label>
<label data-color-scheme-option="auto">
<input type="radio" value="auto" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)">
<div class="text">Auto</div>
</label>
</div>
<script async="" src="/assets/scripts/color-scheme-toggle.js"></script>
</div>
</div>
<link rel="stylesheet" href="/assets/styles/language-dropdown.css?17182448067">
<div class="language-dropdown dropdown-container legacy-form" data-lang="complete">
<select class="dropdown" aria-label="Language Dropdown"><option value="https://developer.apple.com/design/">English</option><option value="https://developer.apple.com/cn/design/">简体中文</option><option value="https://developer.apple.com/jp/design/">日本語</option><option value="https://developer.apple.com/kr/design/">한국어</option></select>
<span class="dropdown-icon icon icon-chevrondown" aria-hidden="true"></span>
</div>
<script src="/assets/scripts/language-dropdown.js?17182448067"></script>
<div class="footer-mini-legal">
<div class="footer-mini-legal-copyright">Copyright © 2024 <a href="https://www.apple.com">Apple Inc.</a> All rights reserved.</div>
<div class="footer-mini-legal-links">
<a class="footer-mini-legal-link" href="https://www.apple.com/legal/internet-services/terms/site.html">Terms of Use</a>
<a class="footer-mini-legal-link" href="https://www.apple.com/legal/privacy/">Privacy Policy</a>
<a class="footer-mini-legal-link" href="/support/terms/">Agreements and Guidelines</a>
</div>
</div>
</section>
</div>
</footer>
<!-- <script src="/assets/scripts/chapternav.js"></script> -->
</body></html>