- ID de l'analyse :
- 27fc8faa-bfa4-458d-b455-cce43c1004baTerminée
- URL soumise :
- https://developer.apple.com/design/
- Fin du rapport :
Liens : 10 trouvé(s)
Liens sortants identifiés à partir de la page
| Lien | texte |
|---|---|
| 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 |
Variables JavaScript : 39 trouvée(s)
Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
| Nom | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| Settings | object |
| LanguageLocales | object |
| AC | object |
| s_account | string |
| isTouchAvailable | function |
Messages de journal de console : 0 trouvé(s)
Messages consignés dans la console web
HTML
Le corps HTML de la page en données brutes
<!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>