CINXE.COM

<!DOCTYPE html><html class="hasSidebar hasPageActions hasBreadcrumb conceptual has-default-focus theme-light" lang="en-us" dir="ltr" data-authenticated="false" data-auth-status-determined="false" data-target="docs" x-ms-format-detection="none"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta property="og:title" content="Start designing and prototyping - Mixed Reality" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://learn.microsoft.com/en-us/windows/mixed-reality/design/design" /><meta property="og:description" content="If you're ready to create something, learn the basic concepts you need to begin designing and prototyping." /><meta property="og:image" content="https://learn.microsoft.com/en-us/media/open-graph-image.png" /> <meta property="og:image:alt" content="Microsoft Learn" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@MicrosoftLearn" /> <meta name="color-scheme" content="light dark"><meta name="adobe-target" content="true" /> <meta name="author" content="lolambean" /> <meta name="breadcrumb_path" content="/windows/mixed-reality/breadcrumb/toc.json" /> <meta name="depot_name" content="MSDN.mixed-reality-docs" /> <meta name="description" content="If you're ready to create something, learn the basic concepts you need to begin designing and prototyping." /> <meta name="document_id" content="56908b68-fae3-67a4-8f72-495f670afaf3" /> <meta name="document_version_independent_id" content="2b7ef884-1096-81f0-923f-a268a75f901f" /> <meta name="feedback_help_link_type" content="" /> <meta name="feedback_help_link_url" content="" /> <meta name="feedback_product_url" content="" /> <meta name="feedback_system" content="None" /> <meta name="git_commit_id" content="8f770f0319cb5f332382de1216533fb7755f5475" /> <meta name="gitcommit" content="https://github.com/MicrosoftDocs/mixed-reality-pr/blob/8f770f0319cb5f332382de1216533fb7755f5475/mixed-reality-docs/mr-dev-docs/design/design.md" /> <meta name="keywords" content="Mixed Reality, discover, distribute, index, landing page, design, development, tutorials, sample apps, fundamentals, case studies, resources, HoloLens how-to, Open source projects, core concepts, interaction, mixed reality headset, windows mixed reality headset, virtual reality headset, HoloLens, MRTK, Mixed Reality Toolkit" /> <meta name="locale" content="en-us" /> <meta name="ms.author" content="lolab" /> <meta name="ms.date" content="6/7/2022" /> <meta name="ms.localizationpriority" content="high" /> <meta name="ms.service" content="mixed-reality" /> <meta name="ms.subservice" content="mr-dev" /> <meta name="ms.topic" content="article" /> <meta name="original_content_git_url" content="https://github.com/MicrosoftDocs/mixed-reality-pr/blob/live/mixed-reality-docs/mr-dev-docs/design/design.md" /> <meta name="page_type" content="conceptual" /> <meta name="pdf_url_template" content="https://learn.microsoft.com/pdfstore/en-us/MSDN.mixed-reality-docs/{branchName}{pdfName}" /> <meta name="schema" content="Conceptual" /> <meta name="site_name" content="Docs" /> <meta name="toc_rel" content="../toc.json" /> <meta name="uhfHeaderId" content="MSDocsHeader-Hololens" /> <meta name="updated_at" content="2024-07-03 09:53 PM" /> <meta name="word_count" content="971" /> <meta name="persistent_id" content="34e06d8b-3df8-973c-70eb-0fdcf8e352f8" /> <meta name="cmProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/05616262-6974-4662-ac87-15adf94b9c3a" data-source="generated" /> <meta name="spProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/25c95491-bd10-484c-89ce-1fa29173d007" data-source="generated" /> <meta name="scope" content="Mixed Reality" /><meta name="github_feedback_content_git_url" content="https://github.com/MicrosoftDocs/mixed-reality/blob/docs/mixed-reality-docs/mr-dev-docs/design/design.md" /><link href="https://learn.microsoft.com/en-us/windows/mixed-reality/design/design" rel="canonical"><title>Start designing and prototyping - Mixed Reality | Microsoft Learn</title><link rel="stylesheet" href="/static/assets/0.4.028726178/styles/site-ltr.css"> <script id="msdocs-script"> var msDocs = {environment: { supportLevel: 'production', accessLevel: 'online', reviewFeatures: false, systemContent: true, azurePortalHostname: 'portal.azure.com', legacyHosting: false, siteName: 'learn', },data: { timeOrigin: Date.now(), contentLocale: 'en-us', contentDir: 'ltr', userLocale: 'en-us', userDir: 'ltr', pageTemplate: 'Conceptual', brand: '', context: {}, hasBinaryRating: true, feedbackHelpLinkType:'', feedbackHelpLinkUrl:'', standardFeedback: false, showFeedbackReport: false, enableTutorialFeedback: false, feedbackSystem: 'None', feedbackGitHubRepo: '', feedbackProductUrl: '',extendBreadcrumb: true,isEditDisplayable: true, hideViewSource: false, hasPageActions: true, hasPrintButton: true, hasBookmark: true, hasShare: true, isPermissioned: false, isPrivateUnauthorized: false,hasRecommendations: true,contributors: [{ name: "lolambean", url: "https://github.com/lolambean" },{ name: "markingmyname", url: "https://github.com/markingmyname" },{ name: "qianw211", url: "https://github.com/qianw211" },{ name: "vtieto", url: "https://github.com/vtieto" },{ name: "cre8ivepark", url: "https://github.com/cre8ivepark" },{ name: "hferrone", url: "https://github.com/hferrone" }],}, functions:{} }; </script><script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script> <script src="https://js.monitor.azure.com/scripts/c/ms.jsll-4.min.js"></script><script src="/static/assets/0.4.028726178/global/deprecation.js"></script><link rel="preconnect" href="//mscom.demdex.net" crossorigin> <link rel="dns-prefetch" href="//target.microsoft.com"> <link rel="dns-prefetch" href="//microsoftmscompoc.tt.omtrdc.net"> <link rel="preload" as="script" href="/static/third-party/adobe-target/at-js/2.9.0/at.js" integrity="sha384-1/viVM50hgc33O2gOgkWz3EjiD/Fy/ld1dKYXJRUyjNYVEjSUGcSN+iPiQF7e4cu" crossorigin="anonymous" id="adobe-target-script" type="application/javascript" /><script src="/static/assets/0.4.028726178/scripts/en-us/index-docs.js"></script></head> <body lang="en-us" dir="ltr"> <div class="header-holder has-default-focus"> <a href="#main" style="z-index: 1070" class="outline-color-text visually-hidden-until-focused position-fixed inner-focus focus-visible top-0 left-0 right-0 padding-xs text-align-center has-body-background" tabindex="1">Skip to main content</a><div hidden id="cookie-consent-holder" data-test-id="cookie-consent-container"></div> <div id="unsupported-browser" style=" background-color: white; color: black; padding: 16px; border-bottom: 1px solid grey;" hidden > <div style="max-width: 800px; margin: 0 auto;"> <p style="font-size: 24px">This browser is no longer supported.</p> <p style="font-size: 16px; margin-top: 16px;">Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.</p> <div style="margin-top: 12px;"> <a href="https://go.microsoft.com/fwlink/p/?LinkID=2092881 " style=" background-color: #0078d4; border: 1px solid #0078d4; color: white; padding: 6px 12px; border-radius: 2px; display: inline-block; ">Download Microsoft Edge</a> <a href="https://learn.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge" style=" background-color: white; padding: 6px 12px; border: 1px solid #505050; color: #171717; border-radius: 2px; display: inline-block; ">More info about Internet Explorer and Microsoft Edge</a> </div> </div> </div>   <header id="ms--site-header" data-test-id="site-header-wrapper" role="banner" itemscope="itemscope" itemtype="http://schema.org/Organization"> <div id="ms--mobile-nav" class="site-header display-none-tablet padding-inline-none gap-none" data-bi-name="mobile-header" data-test-id="mobile-header"></div> <div id="ms--primary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L1-header" data-test-id="primary-header"></div> <div id="ms--secondary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L2-header" data-test-id="secondary-header"></div> </header><div id="content-header" class="content-header uhf-container has-padding has-default-focus border-bottom-none" data-bi-name="content-header"> <div class="content-header-controls margin-xxs margin-inline-sm-tablet"> <button type="button" class="contents-button button button-sm margin-right-xxs" data-bi-name="contents-expand" aria-haspopup="true" data-contents-button> <span class="icon"><span class="docon docon-menu" aria-hidden="true"></span></span> <span class="contents-expand-title">Table of contents</span> </button> <button type="button" class="ap-collapse-behavior ap-expanded button button-sm" data-bi-name="ap-collapse" aria-controls="action-panel"> <span class="icon"><span class="docon docon-exit-mode" aria-hidden="true"></span></span> <span>Exit focus mode</span> </button> </div> </div><div id="disclaimer-holder" class="has-overflow-hidden has-default-focus">  </div> </div> <div class="mainContainer uhf-container has-default-focus" data-bi-name="body"> <div class="columns has-large-gaps is-gapless-mobile "><div id="left-container" class="left-container is-hidden-mobile column is-one-third-tablet is-one-quarter-desktop"> <nav id="affixed-left-container" class="margin-top-sm-tablet position-sticky display-flex flex-direction-column" aria-label="Primary"></nav> </div> <section class="primary-holder column is-two-thirds-tablet is-three-quarters-desktop">  <div class="columns is-gapless-mobile has-large-gaps "><div id="main-column" class="column is-full is-8-desktop"> <main id="main" class="" role="main" data-bi-name="content" lang="en-us" dir="ltr"> <div id="article-header" class="background-color-body margin-top-sm-tablet margin-bottom-xs display-none-print"> <div class="display-flex align-items-center "><details id="article-header-breadcrumbs-overflow-popover" class="popover" data-for="article-header-breadcrumbs"> <summary class="button button-clear button-primary button-sm inner-focus" aria-label="All breadcrumbs"> <span class="icon"> <span class="docon docon-more"></span> </span> </summary> <div id="article-header-breadcrumbs-overflow" class="popover-content padding-none"> </div> </details> <bread-crumbs id="article-header-breadcrumbs" data-test-id="article-header-breadcrumbs" class="overflow-hidden flex-grow-1 margin-right-sm margin-right-md-tablet margin-right-lg-desktop margin-left-negative-xxs padding-left-xxs"></bread-crumbs><div id="article-header-page-actions" class="opacity-none margin-left-auto display-flex flex-wrap-no-wrap align-items-stretch"><a id="lang-link-tablet" class="button button-primary button-clear button-sm display-none display-inline-flex-tablet" title="Read in English" data-bi-name="language-toggle" data-read-in-link hidden> <span class="icon margin-none" aria-hidden="true" data-read-in-link-icon> <span class="docon docon-locale-globe"></span> </span> <span class="is-visually-hidden" data-read-in-link-text>Read in English</span> </a><button type="button" class="collection button button-clear button-sm button-primary display-none display-inline-flex-tablet" data-list-type="collection" data-bi-name="collection" title="Add to collection"> <span class="icon margin-none" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="collection-status is-visually-hidden">Save</span> </button><a data-contenteditbtn class="button button-clear button-sm text-decoration-none button-primary display-none display-inline-flex-tablet" aria-label="Edit" title="Edit This Document" data-bi-name="edit" href="https://github.com/MicrosoftDocs/mixed-reality/blob/docs/mixed-reality-docs/mr-dev-docs/design/design.md" data-original_content_git_url="https://github.com/MicrosoftDocs/mixed-reality-pr/blob/live/mixed-reality-docs/mr-dev-docs/design/design.md" data-original_content_git_url_template="{repo}/blob/{branch}/mixed-reality-docs/mr-dev-docs/design/design.md" data-pr_repo="" data-pr_branch=""> <span class="icon margin-none" aria-hidden="true"> <span class="docon docon-edit-outline"></span> </span> </a> <details class="popover popover-right" id="article-header-page-actions-overflow"> <summary class="justify-content-flex-start button button-clear button-sm button-primary" aria-label="More actions" title="More actions"> <span class="icon" aria-hidden="true"> <span class="docon docon-more-vertical"></span> </span> </summary> <div class="popover-content padding-xs"><button data-page-action-item="overflow-mobile" type="button" class="justify-content-flex-start button-block button-sm has-inner-focus button button-clear display-none-tablet" data-bi-name="contents-expand" data-contents-button data-popover-close> <span class="icon"> <span class="docon docon-editor-list-bullet" aria-hidden="true"></span> </span><span class="contents-expand-title">Table of contents</span></button><a id="lang-link-overflow" class="justify-content-flex-start button-sm has-inner-focus button button-clear button-block display-none-tablet" title="Read in English" data-bi-name="language-toggle" data-page-action-item="overflow-mobile" data-check-hidden="true" data-read-in-link hidden > <span class="icon" aria-hidden="true" data-read-in-link-icon> <span class="docon docon-locale-globe"></span> </span> <span data-read-in-link-text>Read in English</span> </a><button type="button" class="collection justify-content-flex-start button button-clear button-sm has-inner-focus button-block display-none-tablet" data-list-type="collection" data-bi-name="collection" title="Save" data-page-action-item="overflow-mobile" data-check-hidden="true" data-popover-close> <span class="icon" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="collection-status">Save</span> </button> <button type="button" class="collection justify-content-flex-start button button-clear button-sm has-inner-focus button-block display-none-tablet" data-list-type="plan" data-bi-name="plan" title="Add to Plan" data-page-action-item="overflow-mobile" data-check-hidden="true" data-popover-close hidden> <span class="icon" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="plan-status">Add to Plan</span> </button><a data-contenteditbtn class="button button-clear button-block button-sm has-inner-focus justify-content-flex-start text-decoration-none display-none-tablet" aria-label="Edit" title="Edit This Document" data-bi-name="edit" href="https://github.com/MicrosoftDocs/mixed-reality/blob/docs/mixed-reality-docs/mr-dev-docs/design/design.md" data-original_content_git_url="https://github.com/MicrosoftDocs/mixed-reality-pr/blob/live/mixed-reality-docs/mr-dev-docs/design/design.md" data-original_content_git_url_template="{repo}/blob/{branch}/mixed-reality-docs/mr-dev-docs/design/design.md" data-pr_repo="" data-pr_branch=""> <span class="icon" aria-hidden="true"> <span class="docon docon-edit-outline"></span> </span> <span>Edit</span> </a><div aria-hidden="true" class="margin-none" data-page-action-item="overflow-all"></div> <hr class="display-none-tablet margin-bottom-xxs margin-top-xxs" /> <h4 class="font-size-sm padding-left-xxs">Share via</h4> <a class="button button-clear button-sm button-block has-inner-focus text-decoration-none justify-content-flex-start share-facebook" data-bi-name="facebook" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-facebook-share font-size-md color-primary"></span> </span> <span class="margin-left-xxs">Facebook</span> </a> <a class="button button-clear button-sm has-inner-focus button-block text-decoration-none justify-content-flex-start share-twitter" data-bi-name="twitter" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-xlogo-share font-size-xxs"></span> </span> <span class="margin-left-xxs">x.com</span> </a> <a class="button button-clear button-sm has-inner-focus button-block text-decoration-none justify-content-flex-start share-linkedin" data-bi-name="linkedin" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-linked-in-logo font-size-sm color-primary"></span> </span> <span class="margin-left-xxs">LinkedIn</span> </a> <a class="button button-clear button-sm button-block has-inner-focus text-decoration-none justify-content-flex-start margin-bottom-xxs share-email" data-bi-name="email" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-mail-message font-size-sm color-primary"></span> </span> <span class="margin-left-xxs">Email</span> </a><hr /> <button class="button button-block button-clear button-sm justify-content-flex-start has-inner-focus margin-top-xxs" title="Print" type="button" aria-label="Print" data-bi-name="print" data-page-action-item="overflow-all" data-popover-close data-print-page data-check-hidden="true"> <span class="icon" aria-hidden="true"> <span class="docon docon-print font-size-sm color-primary"></span> </span> <span class="margin-left-xxs">Print</span> </button> </div> </details> </div></div> </div> <div> <button type="button" class="border contents-button button button-clear button-sm is-hidden-tablet has-inner-focus" data-bi-name="contents-expand" data-contents-button hidden> <span class="icon"> <span class="docon docon-editor-list-bullet" aria-hidden="true"></span> </span><span class="contents-expand-title">Table of contents</span></button> </div> <div class="content "><h1 id="start-designing-and-prototyping">Start designing and prototyping</h1><div class="display-flex justify-content-space-between align-items-center flex-wrap-wrap page-metadata-container"> <div class="margin-right-xxs"> <ul class="metadata page-metadata" data-bi-name="page info" lang="en-us" dir="ltr"><li>Article</li><li class="visibility-hidden-visual-diff"><time class="is-invisible" data-article-date aria-label="Article review date" datetime="2022-06-08T00:00:00Z" data-article-date-source="calculated">06/08/2022</time> </li><li class="contributors-holder display-none-print"> <button aria-label="View all contributors" class="contributors-button link-button" data-bi-name="contributors" title="View all contributors">6 contributors</button> </li></ul> </div> <div id="user-feedback" class="margin-block-xxs display-none-print" data-hide-on-archived> <button id="user-feedback-button" data-test-id="conceptual-feedback-button" class="button button-sm button-clear button-primary" type="button" data-bi-name="user-feedback-button" data-user-feedback-button > <span class="icon" aria-hidden="true"> <span class="docon docon-like"></span> </span> <span>Feedback</span> </button> </div></div><nav id="center-doc-outline" class="doc-outline is-hidden-desktop display-none-print margin-bottom-sm" data-bi-name="intopic toc" aria-label="In this article"> <h2 id="ms--in-this-article" class="title is-6 margin-block-xs">In this article</h2> </nav><p><img src="images/design-hero-image.png" alt="mixed reality design abstract" data-linktype="relative-path"></p> <p>Mixed Reality applications are unlike anything else in the world today, and designing them is hard work. Not only do you have to account for the new combinations of real and virtual worlds you're creating, but also the new user experiences they afford. Since Mixed Reality is a big place, we've selected important points along its design spectrum and laid them out below as a series of checkpoints. These are meant to be sequential, but if you've already dipped your feet in feel free to jump to any of the following sections.</p> <p>Take a look at our design overview video to get started:</p> <div class="embeddedvideo"><iframe src="https://www.microsoft.com/en-us/videoplayer/embed/RE4LhlW" frameborder="0" allowfullscreen="true" data-linktype="external"></iframe></div> <h2 id="design-checkpoints">Design checkpoints</h2> <p>Use the following checkpoints to bring your application ideas and concepts into the world of mixed reality.</p> <h3 id="1-getting-started">1. Getting started</h3> <p>Like all journeys, your adventure into designing Mixed Reality applications starts with the basics. We recommend familiarizing yourself with the <a href="../discover/mixed-reality" data-linktype="relative-path">What is Mixed Reality</a> and <a href="../discover/hologram" data-linktype="relative-path">What is a hologram?</a> articles to get your mind primed for immersive design. Once you've completed your read-through, you'll be ready to start your Mixed Reality design journey!</p> <p><img src="images/handtracking2.gif" alt="Getting started gif from Designing Holograms app" data-linktype="relative-path"></p> <table> <thead> <tr> <th>Checkpoint</th> <th>Outcome</th> </tr> </thead> <tbody> <tr> <td><a href="../discover/case-study-expanding-the-design-process-for-mixed-reality" data-linktype="relative-path">Expand your design process</a></td> <td>Get a first-hand look at design process for Mixed Reality, gathered from designers inside and outside of Microsoft</td> </tr> <tr> <td><a href="../discover/types-of-mixed-reality-apps" data-linktype="relative-path">Types of Mixed Reality apps</a></td> <td>Decide where your app experience will live on the Mixed Reality spectrum</td> </tr> <tr> <td><a href="https://www.microsoft.com/p/designing-holograms/9nxwnjklrzwd" data-linktype="external">Designing Holograms app</a></td> <td>Learn the fundamentals of Mixed Reality UX Design by experiencing with behaviors, tips, and recommendations for creating amazing HoloLens apps (available for download from Microsoft Store in HoloLens 2)</td> </tr> <tr> <td><a href="https://www.microsoft.com/en-us/p/mrtk-examples-hub/9mv8c39l2sj4" data-linktype="external">MRTK Examples Hub</a></td> <td>Experience common spatial interactions and UX building blocks for Mixed Reality (available for download from Microsoft Store in HoloLens 2)</td> </tr> <tr> <td><strong>Optional</strong> <a href="figma-toolkit" data-linktype="relative-path">Download the Figma Toolkit</a></td> <td>The Figma Toolkit provides assets for you to use for sketching and laying out UI based on the components available in MRTK</td> </tr> </tbody> </table> <h3 id="2-core-concepts">2. Core concepts</h3> <p>Whether you're developing for VR or AR, there are several core concepts that apply to designing fluid immersive experiences. Understanding the users point of view, positioning objects, and ensuring everyone is comfortable and safe are your top priorities at this stage of your journey. By the end of this section you'll have a solid foundation to carry through into interaction design.</p> <p><img src="images/fragments-750px.jpg" alt="Core concepts example image" data-linktype="relative-path"></p> <table> <thead> <tr> <th>Concept</th> <th>Outcome</th> </tr> </thead> <tbody> <tr> <td><a href="holographic-frame" data-linktype="relative-path">Holographic frame</a></td> <td>Understand how users see your content overlaid onto the real world when wearing their headsets</td> </tr> <tr> <td><a href="coordinate-systems" data-linktype="relative-path">Coordinate systems</a></td> <td>Learn how to position holograms in meaningful places in the world, whether it's their physical room or a virtual realm you've created</td> </tr> <tr> <td><a href="spatial-mapping" data-linktype="relative-path">Spatial mapping</a></td> <td>Anchor objects in the user's world and take advantage of real world's physical surfaces</td> </tr> <tr> <td><a href="comfort" data-linktype="relative-path">Comfort considerations</a></td> <td>Ensure user comfort and safety by creating and presenting immersive content in a way that mimics the natural world</td> </tr> </tbody> </table> <h3 id="3-interaction-design">3. Interaction design</h3> <p>No matter how beautiful and immersive a virtual experience is, it's useless without interaction. This section will walk you through basic interaction models, hand and motion controllers, voice input, and gathering eye tracking data from your users. By the end of this section you'll be ready to tackle the last big topic on your design journey: user experience.</p> <p><img src="images/ux_hero_manipulation.jpg" alt="Interaction design factors" data-linktype="relative-path"></p> <table> <thead> <tr> <th>Concept</th> <th>Outcome</th> </tr> </thead> <tbody> <tr> <td><a href="interaction-fundamentals" data-linktype="relative-path">Interaction models</a></td> <td>Provide your users with instinctual interactions through hand, eye, and voice input</td> </tr> <tr> <td><a href="hands-and-tools" data-linktype="relative-path">Hands and motion controllers</a></td> <td>Learn how to interact with holograms at close range with a user' hands or at long range with precise interactions</td> </tr> <tr> <td><a href="voice-input" data-linktype="relative-path">Voice input</a></td> <td>Use voice commands as input in your immersive apps to control surrounding holograms and environments</td> </tr> <tr> <td><a href="eye-tracking" data-linktype="relative-path">Eye Tracking</a></td> <td>Add a new level of context and human understanding in a holographic experience by using information about what your users are looking at</td> </tr> </tbody> </table> <h3 id="4-user-experience-elements">4. User experience elements</h3> <p>Now that you've mastered basic interactions, you can focus on the finer points of user experience elements and how to adapt them for Mixed Reality's unique environments. You'll cover common behaviors, asset design, object scaling, and typography, while making the experience intuitive for your users. This section marks the end of the official Mixed Reality design journey, but there are more resources in the <a href="#whats-next" data-linktype="self-bookmark">What's next?</a> section to keep you going.</p> <p><img src="images/ux_hero_boundingbox.jpg" alt="UX Elements" data-linktype="relative-path"></p> <table> <thead> <tr> <th>Concept</th> <th>Outcome</th> </tr> </thead> <tbody> <tr> <td><a href="app-patterns-landingpage" data-linktype="relative-path">Common controls and behaviors</a></td> <td>Learn about frequently used spatial interactions and UI building blocks</td> </tr> <tr> <td><a href="color-light-and-materials" data-linktype="relative-path">Color, light, and materials</a></td> <td>Design quality assets for Mixed Reality that take color, lighting, and materials into account</td> </tr> <tr> <td><a href="scale" data-linktype="relative-path">Object scale</a></td> <td>Incorporate as many real-world visual cues as possible to us help your users understand where objects are, how big they are, and what they鈥檙e made of</td> </tr> <tr> <td><a href="typography" data-linktype="relative-path">Typography</a></td> <td>Use clear, readable text in three-dimensional space to give your users the important information they need</td> </tr> </tbody> </table> <h2 id="whats-next">What's next?</h2> <p>A designer's job is never done, especially when learning to create immersive experiences in a new paradigm. The following sections will take you beyond the beginner level design material you've already completed and into the world of Mixed Reality development. These topics and resources aren't in any sequential order, so feel free to explore!</p> <h3 id="choose-a-prototyping-option">Choose a prototyping option</h3> <section class="row"> <div class="column"> <p><a href="https://github.com/Microsoft/MRDL_Unity_PeriodicTable" data-linktype="external"><img src="images/74-13.png" alt="MRTK Figma Toolkit" data-linktype="relative-path"></a><br> <strong><a href="figma-toolkit" data-linktype="relative-path">Figma Toolkit</a></strong><br> Figma Toolkit provides the assets that can be used for sketching and laying out UI. All UI controls are based on the components available in MRTK.</p> </div> <div class="column"> <p><a href="https://learn.unity.com/" data-linktype="external"><img src="../images/final_unity_logo.png" alt="Learn Unity" data-linktype="relative-path"></a><br> <strong><a href="https://learn.unity.com/" data-linktype="external">Learn Unity</a></strong><br> Learn how to create interactive experiences with Unity. Learn by doing, from start to finish.</p> </div> <div class="column"> <p><a href="https://github.com/Microsoft/MixedRealityToolkit-Unity" data-linktype="external"><img src="images/74-12.png" alt="Mixed Reality Toolkit (MRTK)" data-linktype="relative-path"></a><br> <strong><a href="/en-us/windows/mixed-reality/mrtk-unity/" data-linktype="absolute-path">Mixed Reality Toolkit (MRTK)</a></strong><br> With spatial interaction and UI building blocks, jump-start your mixed reality design and development with Unity.</p> </div> <div class="column"> <p><a href="https://www.maquette.ms/" data-linktype="external"><img src="images/74-14.png" alt="Microsoft Maquette" data-linktype="relative-path"></a><br> <strong><a href="https://www.maquette.ms/" data-linktype="external">Microsoft Maquette</a></strong><br> Design for VR. Microsoft Maquette makes spatial prototyping easy, quick, and immersive.</p> </div> </section> <br> <div class="NOTE"> <p>Note</p> <p>Starting with MRTK3 we are introducing a new Mixed Reality design language to developers. For more information, see the <a href="/en-us/windows/mixed-reality/mrtk-unity/mrtk3-overview" data-linktype="absolute-path">MRTK3 documentation</a>.</p> </div> <hr> <h3 id="other-resources">Other resources</h3> <section class="row"> <div class="column"> <p><a href="../discover/get-started-with-mr#understand-the-basics" data-linktype="relative-path"><img src="images/74-15.png" alt="Understand the basics" data-linktype="relative-path"></a><br> <strong><a href="../discover/get-started-with-mr#understand-the-basics" data-linktype="relative-path">Understand the basics</a></strong><br> Get a better understanding of what defines mixed reality and how it鈥檚 being used.</p> </div> <div class="column"> <p><a href="../whats-new/journey-to-mr-series" data-linktype="relative-path"><img src="images/74-16.png" alt="Come to an event" data-linktype="relative-path"></a><br> <strong><a href="../whats-new/journey-to-mr-series" data-linktype="relative-path">Come to an event</a></strong><br> Get started with your Mixed Reality development journey.</p> </div> <div class="column"> <p><a href="../develop/install-the-tools" data-linktype="relative-path"><img src="images/74-17.png" alt="Install the tools" data-linktype="relative-path"></a><br> <strong><a href="../develop/install-the-tools" data-linktype="relative-path">Install the tools</a></strong><br> Use the installation checklist to get the tools you need to build apps for HoloLens and mixed reality.</p> </div> <div class="column"> <p><a href="../develop/development" data-linktype="relative-path"><img src="images/74-18.png" alt="Start developing" data-linktype="relative-path"></a><br> <strong><a href="../develop/development" data-linktype="relative-path">Start developing</a></strong><br> Choose a development path based on your skill level, work style, or platform interest.</p> </div> </section> <br> <br> </div><div id="ms--inline-notifications" class="margin-block-xs" data-bi-name="inline-notification"></div><div id="assertive-live-region" role="alert" aria-live="assertive" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div> <div id="polite-live-region" role="status" aria-live="polite" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div>  </main>  <aside id="ms--additional-resources-mobile" aria-label="Additional resources" class="display-none-desktop display-none-print" > <hr class="hr" hidden /> <h2 id="ms--additional-resources-mobile-heading" class="title is-3" hidden>Additional resources</h2> <section id="right-rail-recommendations-mobile" data-bi-name="recommendations" hidden></section> <section id="right-rail-training-mobile" data-bi-name="learning-resources-card" hidden></section> <section id="right-rail-events-mobile" data-bi-name="events-card" hidden></section> <section id="right-rail-qna-mobile" data-bi-name="qna-link-card" hidden></section> </aside><div class="border-top is-visible-interactive has-default-focus margin-top-sm "><footer id="footer-interactive" data-bi-name="footer" class="footer-layout"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu-interactive" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu-interactive" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/previous-versions/" data-bi-name="archivelink">Previous Versions</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="https://techcommunity.microsoft.com/t5/microsoft-learn-blog/bg-p/MicrosoftLearnBlog" data-bi-name="bloglink">Blog</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/contribute/" data-bi-name="contributorGuide">Contribute</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/legal/termsofuse" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2024</li> </ul> </footer></div></div><div id="ms--additional-resources" class="right-container column is-4-desktop display-none display-block-desktop" data-bi-name="pageactions" role="complementary" aria-label="Additional resources" > <div id="affixed-right-container" class="margin-top-sm-tablet" data-bi-name="right-column"> <h2 id="ms--additional-resources-heading" class="title is-6 margin-top-md" hidden>Additional resources</h2> <section id="right-rail-events" data-bi-name="events-card" hidden></section> <section id="right-rail-training" data-bi-name="learning-resources-card" hidden></section> <section id="right-rail-recommendations" data-bi-name="recommendations" hidden></section> <nav id="side-doc-outline" class="doc-outline" data-bi-name="intopic toc" aria-label="In this article"> <h3>In this article</h3> </nav> <section id="right-rail-qna" class="margin-top-xxs" data-bi-name="qna-link-card" hidden></section> </div> </div></div>  </section>   <aside id="interactive-container" class="interactive-container is-visible-interactive column has-body-background-dark "> </aside>  </div> </div>  <section class="border-top has-default-focus is-hidden-interactive margin-top-sm "><footer id="footer" data-bi-name="footer" class="footer-layout uhf-container has-padding" role="contentinfo"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/previous-versions/" data-bi-name="archivelink">Previous Versions</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="https://techcommunity.microsoft.com/t5/microsoft-learn-blog/bg-p/MicrosoftLearnBlog" data-bi-name="bloglink">Blog</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/contribute/" data-bi-name="contributorGuide">Contribute</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/legal/termsofuse" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2024</li> </ul> </footer> </section> <div id="action-panel" role="region" aria-label="Action Panel" class="action-panel has-default-focus" tabindex="-1"></div> </body> </html>