{"id":12926,"date":"2017-10-16T22:41:29","date_gmt":"2017-10-16T21:41:29","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=12926"},"modified":"2020-11-12T12:27:00","modified_gmt":"2020-11-12T12:27:00","slug":"design-beyond-screen-primer-vr-ar-multiverse","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/","title":{"rendered":"Design Beyond a Screen: A Primer for VR, AR and the Multiverse"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since the first iPhone, standard screens have been the medium for which we\u2019ve been designing for most - usually apps and websites. As technology has advanced though, new avenues have slowly emerged (e.g. Augmented Reality and Virtual Reality) through which we can consume media and information in different ways.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"VR and AR are just 2 realms we can design for today \u2013 there\u2019s actually lots more.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Many of these mediums involve blending the real world with digital information in quite unique ways. A popular AR example for instance, is <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/itunes.apple.com\/us\/app\/ikea-place\/id1279244498?mt=8\">IKEA\u2019s upcoming Place app<\/a>, which lets us overlay our living rooms with items of furniture to see how they\u2019d look (or even if they fit in our house).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Augmented Reality (AR) and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/\">Virtual Reality<\/a> (VR) are just 2 of the realms we can design for today though - there\u2019s actually lots more, with each bringing a host of opportunities for app developers. Each realm is made up of a different combination of <em>Time, Space and Matter<\/em> - check them out in the contents below:<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Contents: Realms of opportunity<\/h2>\n<section class=\"long-post-content\">\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"c-silver lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"#part1\">Reality:<\/a><\/strong> <em>Time, Space and Matter<\/em><\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part2\">Augmented Reality:<\/a><\/strong> <em>Time, Space, No-Matter<\/em><\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part6\">Augmented Virtuality:<\/a><\/strong> <em>No-Time, No-Space, Matter<\/em><\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part5\">Alternate Reality:<\/a><\/strong> <em>No-Time, Space, No-Matter<\/em><\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part3\">Physical Virtuality:<\/a><\/strong> <em>Time, No-Space, Matter<\/em><\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part4\">Mirrored Virtuality:<\/a><\/strong> <em>Time, No-Space, No-Matter<\/em><\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part1\">Virtual Reality:<\/a><\/strong> <em>No-Time, No-Space, No-Matter<\/em><\/li>\n<\/ol>\n<\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A lot of the time, all these realms tend to fall under the umbrella phrase, <em>'Mixed Reality'<\/em>, but each term actually has its own meaning depending on the amount of reality and \u2018virtual reality\u2019 involved.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Each different combination of Time, Space and Matter brings different opportunities.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In this article we\u2019ll explore each one, and uncover ideas and inspiration for creating apps and experiences that combine <em>Time, Space and Matter<\/em> in different ways. It might give you some new avenues to explore when coming up with your new product! Let\u2019s start by understanding this multiverse:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">8 realms of opportunity<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Reality and Virtual Reality sit at complete opposite ends of the multiverse, with a range of others realms fitting in between. They can be visualized on this octant, from the book, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.goodreads.com\/book\/show\/10829821-infinite-possibility\">\u2018Infinite Reality: Creating Customer Value on the Digital Frontier\u2019<\/a> by B. Joseph Pine and Kim C. Korn, which this article is inspired by:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_12943\" style=\"width: 547px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12943\" class=\"size-full wp-image-12943\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview.png\" alt=\"\" width=\"537\" height=\"687\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview.png 537w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-469x600.png 469w\" sizes=\"auto, (max-width: 537px) 100vw, 537px\" \/><\/a><p id=\"caption-attachment-12943\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.goodreads.com\/book\/show\/10829821-infinite-possibility\">Eight realms of the Universe<\/a>, by B. Joseph Pine and Kim C. Korn<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Reality to Virtual Reality<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The main difference between all of these realms of experience is the relationship between Time, Space and Matter. It\u2019s more straight forward than it looks - let\u2019s start by understanding the 2 extremes, <em>Reality and Virtual Reality<\/em>:<\/p>\n<div id=\"attachment_12947\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-1.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12947\" class=\"size-full wp-image-12947\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-1.png\" alt=\"\" width=\"1600\" height=\"640\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-1.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-1-600x240.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-1-768x307.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-1-1500x600.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a><p id=\"caption-attachment-12947\" class=\"wp-caption-text\">Reality consists of time, space and matter.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Reality is the realm against which we can benchmark and compare everything with. In reality, all 3 components are present: Time, Space and Matter. It\u2019s the world we live in where we can move through space and touch physical objects.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Reality is the realm against which we can benchmark and compare everything with.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The complete opposite realm is Virtual Reality, where Time, Space and Matter as we know in reality don\u2019t exist. All 3 of these components are created depending on the virtual world being explored. It\u2019s a bit like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/The_Matrix\">the Matrix<\/a> - none of it is actually real.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In between these 2 extremes lie many realms, often simply summed up as <em>Mixed Reality<\/em>. However, each different combination of Time, Space and Matter brings different opportunities. For example, removing \u2018Matter\u2019 from Space and Time results in one of the most popular experiences today - <em>Augmented Reality<\/em>, where digital objects overlay the physical world. Let\u2019s look into it:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Augmented Reality<\/h1>\n<div id=\"attachment_13052\" style=\"width: 4010px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/Aug-Real.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13052\" class=\"size-full wp-image-13052\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/Aug-Real.png\" alt=\"\" width=\"4000\" height=\"1600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Aug-Real.png 4000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Aug-Real-600x240.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Aug-Real-768x307.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Aug-Real-1500x600.png 1500w\" sizes=\"auto, (max-width: 4000px) 100vw, 4000px\" \/><\/a><p id=\"caption-attachment-13052\" class=\"wp-caption-text\">Augmented Reality: Time, Space and No-Matter<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We\u2019re most familiar with AR these days. It\u2019s when we have Time, Space, but the \u2018matter\u2019 doesn\u2019t exist. We use the time and space from reality but overlay it with something digital, which presents us with a host of opportunities as outlined below:<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Augmented Reality Opportunities<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We\u2019ve seen loads of AR over the last couple of years, with games like Pokemon Go being the most popular. Therefore, here\u2019s just a couple examples since we\u2019re already so familiar with these:<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Online Retail<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A popular example has always been to see how furniture would look in your house. Both Shopify and IKEA have been experimenting to make this a real possibility:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><b class=\"fontWeight-5\">Shopify:<\/b><br \/>\nShopify's technology has been used to power an app for <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/itunes.apple.com\/us\/app\/magnolia-market\/id1263517500\">Magnolia Market<\/a>, letting you visualize how household products might look around your house before buying them. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/itunes.apple.com\/us\/app\/magnolia-market\/id1263517500\">The app<\/a> is built using Apple\u2019s ARKit and the Shopify Mobile SDK, letting us preview products in our homes and purchase them with Apple Pay:<center><\/p>\n<div id=\"attachment_12962\" style=\"width: 319px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/5fc92e28-ee7d-48f8-abec-0c09b08a8f50.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12962\" class=\"aligncenter size-full wp-image-12951\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/5fc92e28-ee7d-48f8-abec-0c09b08a8f50.gif\" alt=\"\" width=\"309\" height=\"550\" \/><\/a><p id=\"caption-attachment-12962\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/itunes.apple.com\/us\/app\/magnolia-market\/id1263517500\">Magnolia Market AR app<\/a>, powered by Shopify<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><\/li>\n<li><b class=\"fontWeight-5\">IKEA Place:<\/b><br \/>\nIKEA\u2019s Place app lets you place \u2018true to scale\u2019 3D models of IKEA furniture in your house. It uses Apple\u2019s AR Kit to measure space and place furniture on surfaces. Once you\u2019ve seen how the furniture looks, you can take advantage of existing features of the digital world by sharing images of the simulation with family and friends. Check out their YouTube video, it's awesome:<br \/>\n<iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" src=\"https:\/\/www.youtube.com\/embed\/-xxOvsyNseY\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\n<span class=\"long-quote\">\"IKEA Place lets you confidently experience, experiment and share how good design transforms your space.\"<\/span><\/li>\n<\/ul>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Tools for the World<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As seen in both IKEA\u2019s and Shopify's AR apps, being able to recognise space and surfaces with your phone\u2019s camera makes AR experiences much more powerful. Using Apple\u2019s AR Kit, we can:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Access spacial measurements such as distance<\/li>\n<li>Recognise horizontal planes such as tables and floors<\/li>\n<li>Detect light in a scene, and apply it for lighting the virtual objects<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These features make it possible to develop apps that can replace physical tools such as rulers:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_12962\" style=\"width: 490px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/a93e9da7-49d1-42fe-bcfb-87e6965297de.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12962\" class=\"size-full wp-image-12962\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/a93e9da7-49d1-42fe-bcfb-87e6965297de.gif\" alt=\"\" width=\"480\" height=\"261\" \/><\/a><p id=\"caption-attachment-12962\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/itunes.apple.com\/us\/app\/tapmeasure-ar-utility\/id1281766938?mt=8\">TapMeasure<\/a>, an AR App for measuring things<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><b class=\"fontWeight-5\">Gaming<\/b><br \/>\nAs well as opportunities for tools and productivity, Augmented Reality provides a massive playground for games too. Unless you've been living under a rock, you'll have heard of a few so I won't go into detail. Think <em>Pok\u00e9mon Go<\/em> for instance.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Where to start with AR<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Overall, we\u2019re augmenting what we can see in reality, with whatever technology we have available. At the moment, that\u2019s often our phones, and therefore usually involves the camera of our mobile device. Therefore when it comes to building your own AR app, you can start with <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.apple.com\/ios\/human-interface-guidelines\/technologies\/augmented-reality\/ \">Apple\u2019s AR Guidelines<\/a> which has a host of tips for designing for AR using a phone's camera.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Another great starting point is this article by Designlab:<\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvel7077.wpengine.com\/iphone-xs-ar-engine-mean-ux-designers\/\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">What Does the iPhone X\u2019s AR Engine Mean for UX Designers?<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">We also explore what AR could mean for UX designers, and, finally, our take on the $162bn question: are people going to use it?<\/span><\/span><\/span><\/a><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Augmented Virtuality<\/h1>\n<div id=\"attachment_13053\" style=\"width: 4010px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/augmented-vert.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13053\" class=\"size-full wp-image-13053\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/augmented-vert.png\" alt=\"\" width=\"4000\" height=\"1600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/augmented-vert.png 4000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/augmented-vert-600x240.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/augmented-vert-768x307.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/augmented-vert-1500x600.png 1500w\" sizes=\"auto, (max-width: 4000px) 100vw, 4000px\" \/><\/a><p id=\"caption-attachment-13053\" class=\"wp-caption-text\">Augmented Virtuality: No-Time, No-Space, Matter<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Augmented Virtuality can be seen as an opposite to Augmented Reality in a way. Instead of overlaying the real world with digital stuff, we augment the virtual world with something from the real world. There\u2019s less examples of this than Augmented Reality, but there\u2019s still plenty of opportunities. One of the most prevalent examples of Augmented Virtuality are input devices like remotes and game controllers. A couple are the Nintendo Wii Remote, and more recently, Virtual Reality Gloves:<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Nintendo Wii Remote<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_12967\" style=\"width: 632px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-3.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12967\" class=\"size-full wp-image-12967\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-3.png\" alt=\"\" width=\"622\" height=\"402\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-3.png 622w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-3-600x388.png 600w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/a><p id=\"caption-attachment-12967\" class=\"wp-caption-text\">Augmented Virtuality Example: Nintendo Wii<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center>In it\u2019s time, the Nintendo Wii control was a gamechanger, bringing a new level of interactivity to games that wasn\u2019t previously possible. Instead of pressing buttons to play a tennis game, we could actually carry out the motions of a tennis player and have it transfer to the digital realm.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Analog to digital<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A key part that made this possible was the use of an accelerometer to detect direction and force applied to the Wii remote. That\u2019s done by measuring movement along the X, Y and Z axis, as well as rotation. These analogue forces from the real world are then translated into digital data and sent to the Wii via bluetooth.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Analogue forces from the real world are translated into digital data...\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_12967\" style=\"width: 529px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-5.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12967\" class=\"aligncenter size-full wp-image-12971\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-5.png\" alt=\"\" width=\"519\" height=\"500\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-5.png 519w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-5-32x32.png 32w\" sizes=\"auto, (max-width: 519px) 100vw, 519px\" \/><\/a><p id=\"caption-attachment-12967\" class=\"wp-caption-text\">Sensors that enable Augmented Virtuality<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center>Watch this video to find out exactly how it works:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" title=\"How the Wii Remote Works\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/ETAKfSkec6A?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Virtual Reality Gloves<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Moving on from the Nintendo Wii, and into a Virtual Reality setting, the same type of concept is present for VR gloves. However, the gloves not only detect the orientation of each hand, but also the bending of each finger using \u2018flex sensors\u2019. The number of sensors required increases with the amount of movement needed to be detected, which makes them much more complex. All the data collected from the gloves provide enough information to build a skeletal model of the hand.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Data can be transferred from the digital world to the gloves, so users can feel items via haptic feedback.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_12977\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-6.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12977\" class=\"size-full wp-image-12977\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-6.png\" alt=\"\" width=\"600\" height=\"370\" \/><\/a><p id=\"caption-attachment-12977\" class=\"wp-caption-text\">VR Glove from Manu<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center>Going further than that though, data can also be transferred from the digital world back to the gloves, so users can feel, touch and hold items via <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.androidcentral.com\/android-z-haptic-feedback\">haptic feedback<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Manus VR have designed their gloves to be used specifically for virtual reality, but they could actually be used for any digital environment. Check out the video below to see the hand tracking in action through a Surgeon Simulator game:<br \/>\nhttps:\/\/youtu.be\/tgcAbAII48s<br \/>\nThere\u2019s more information here on how the sensors work:<br \/>\n<iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" title=\"Hands-On Virtual Reality Gloves!\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/HjuPZkBOAbE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Getting started with Augmented Virtuality<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To get started with Augmented Virtuality, you don\u2019t really need any complex hardware. For example, here\u2019s a guide to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.youtube.com\/watch?v=_TDlxFqZywo\">building your own Wii controller in just 10 minutes<\/a>. And here\u2019s a couple more projects from students, using every day objects from the physical reality to control digital worlds:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.youtube.com\/watch?v=ZmpjszRYcBs\">Augmented Virtuality Game<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.youtube.com\/watch?v=y79hW3mrbzE\">Augmented Virtuality Pong<\/a><\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Alternate Reality<\/h1>\n<div id=\"attachment_13055\" style=\"width: 4010px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/alt-real.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13055\" class=\"size-full wp-image-13055\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/alt-real.png\" alt=\"\" width=\"4000\" height=\"1600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/alt-real.png 4000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/alt-real-600x240.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/alt-real-768x307.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/alt-real-1500x600.png 1500w\" sizes=\"auto, (max-width: 4000px) 100vw, 4000px\" \/><\/a><p id=\"caption-attachment-13055\" class=\"wp-caption-text\">Alternate Reality: No-Time, Space, No-Matter<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Alternate Reality only interacts with the spaces of reality (e.g. fields, roads, surfaces). It\u2019s quite similar to Augmented Reality, but in addition to a digital overlay on our world, time becomes fictional. It\u2019s often based upon a storyline with it\u2019s own concept of time. It\u2019s defined pretty well in Wikipedia too, like so:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"An alternate reality game (ARG) is an interactive narrative that uses the real world as a platform, often involving multiple media and game elements, to tell a story that may be affected by participants' ideas or actions.\"<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Essentially, events that normally take place online are brought to the real world across multiple channels. Popular examples from the past have often been marketing campaigns for product launches. Two notable ones are below:<\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><b class=\"fontWeight-5\">The Dark Knight promotion for the Batman movie<\/b>\n<div id=\"attachment_12985\" style=\"width: 650px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-8.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12985\" class=\"size-full wp-image-12985\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-8.png\" alt=\"\" width=\"640\" height=\"277\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-8.png 640w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-8-600x260.png 600w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><p id=\"caption-attachment-12985\" class=\"wp-caption-text\">The Batman<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The Dark Knight ARG immersed over 10 million people in a \u2018real world Gothem City\u2019, where the story was played out through an array of different channels. From playing casual games, to receiving text messages and phone calls, players could unlock pieces of the larger story, experiencing an alternate reality. Check out this case study video that sums up the entire thing:<br \/>\n<iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" src=\"https:\/\/www.youtube.com\/embed\/zT7RTme41_I\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/li>\n<li>Another similar example is the <b class=\"fontWeight-5\">I Love Bees promotion for Microsoft\u2019s Halo 2<\/b> - <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/I_Love_Bees\">Read about the story and game here.<\/a><\/li>\n<\/ol>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Difference between ARG and AR<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since Alternate Reality Games are played out in real-world environments, they can be confused with Augmented reality games today, such as Pok\u00e9mon Go or The Walking Dead. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.learningsolutionsmag.com\/authors\/587\/pamela-s-hogle\">Pamela Hogle<\/a> writes about the differences between the two in her article for <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.learningsolutionsmag.com\/articles\/2070\/blending-fantasy-with-reality-drives-successful-alternate-reality-games\">Learning Solutions Magazine<\/a>. A summary of those differences are outlined below:<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Alternate Reality<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>The game players have more control<\/li>\n<li>The story evolves depending on the actions and responses of players.<\/li>\n<li>Elements of the game are created to fit in with the real world, thereby reinforcing the real world (E.g. using phone calls and text messages for game clues).<\/li>\n<li>Without a story or narrative, the alternate reality games can\u2019t exist.<\/li>\n<\/ul>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Augmented Reality<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Players have less control - the entire content and story is determined by the game creator<\/li>\n<li>The game changes the view a person has of the world, augmenting it with something digital (e.g. Pok\u00e9mon characters overlaying the real world).<\/li>\n<li>The game can exist without a story<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Quick starting tip for Alternate Reality<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As summarised in the table above, the key components for alternate reality games are a good storyline, and a network of users to play with. A good starting point could be this inspirational <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_augmented_reality_software\">list of popular augmented reality games and software<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Physical Virtuality<\/h1>\n<div id=\"attachment_13057\" style=\"width: 4010px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/physical-virt.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13057\" class=\"size-full wp-image-13057\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/physical-virt.png\" alt=\"\" width=\"4000\" height=\"1600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/physical-virt.png 4000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/physical-virt-600x240.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/physical-virt-768x307.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/physical-virt-1500x600.png 1500w\" sizes=\"auto, (max-width: 4000px) 100vw, 4000px\" \/><\/a><p id=\"caption-attachment-13057\" class=\"wp-caption-text\">Physical Virtuality: Time, No-Space, Matter<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Physical Virtuality is the combination of real time and real matter, but the space used is that from the digital realm (no space). It\u2019s actually really common, enabling us to take advantage of digital environments to produce things for the real world. Notable examples are shops like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.vistaprint.co.uk\">Vistaprint<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.tshirtstudio.com\/\">TShirt Studio<\/a>, and even <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.moo.com\/uk\/\">Moo<\/a>. They all enable us to try out different designs and see exactly how they\u2019d look before creating and purchasing the real thing:<\/p>\n<div id=\"attachment_13009\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13009\" class=\"size-full wp-image-13009\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview.gif\" alt=\"\" width=\"800\" height=\"407\" \/><\/a><p id=\"caption-attachment-13009\" class=\"wp-caption-text\">Physical Virtuality example: Vistaprint<\/p><\/div>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Items can be customised, and only actually made when a customer has paid for the design.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Physical Virtuality Advantages<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Combining time and matter with no-space through physical virtuality brings lots of advantages that are useful in many contexts, especially within e-commerce:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><b class=\"fontWeight-5\">Reduce waste by prototyping<\/b>: software allowing us to create digital versions of products reduces waste as we don\u2019t need to use costly materials to get the design right.<\/li>\n<li><b class=\"fontWeight-5\">Reduce distance<\/b>: 3D printing is a great example of reducing physical distances. Instead of ordering a product to be delivered physically, a design file can be sent over the web, from which the recipient can open and print the design directly in their own home on a 3D printer.<\/li>\n<li><b class=\"fontWeight-5\">Make on order<\/b>: Items can be customised, and only actually made when a customer has paid for the design. This means an inventory of a specific item isn\u2019t needed - materials only need to be used upon order completion.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Mirrored Virtuality<\/h1>\n<div id=\"attachment_13059\" style=\"width: 4010px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/mirrored.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13059\" class=\"size-full wp-image-13059\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/mirrored.png\" alt=\"\" width=\"4000\" height=\"1600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/mirrored.png 4000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/mirrored-600x240.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/mirrored-768x307.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/mirrored-1500x600.png 1500w\" sizes=\"auto, (max-width: 4000px) 100vw, 4000px\" \/><\/a><p id=\"caption-attachment-13059\" class=\"wp-caption-text\">Mirrored Virtuality: Time, No-Space, No-Matter<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Mirrored Virtuality comes about when we map real world scenarios (that are happening in real-time) to the virtual world of no space and no matter. The best visualizations give us a compelling overview of information, making fast-paced information easy to consume. A great example is the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/earth.nullschool.net\/\">EarthWindMap<\/a> site, letting us see weather around the world:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_13012\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-1.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13012\" class=\"size-full wp-image-13012\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-1.gif\" alt=\"\" width=\"800\" height=\"408\" \/><\/a><p id=\"caption-attachment-13012\" class=\"wp-caption-text\">Weather in the UK, from <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/earth.nullschool.net\/\">EarthWindMap<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"The best visualizations give us a compelling overview, making fast-paced information easy to consume.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A simpler example is the \u2018<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.worldometers.info\/world-population\/\">People living on Earth<\/a>\u2019 counter:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_13013\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-2.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13013\" class=\"size-full wp-image-13013\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-2.gif\" alt=\"\" width=\"800\" height=\"407\" \/><\/a><p id=\"caption-attachment-13013\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.worldometers.info\/world-population\/\">People living on Earth counter<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center>It provides a simple counter of people on earth, which is quite strange to actually see in this way, yet easy to consume.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Essentially though, mirrored virtuality is offering a mirrored perspective of what\u2019s happening in the real world. To get started creating one of these, you just need to find a data source - available from a host of APIs these days, and think of a way to visualize it. Check out <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/mashable.com\/2014\/01\/08\/data-visualizations-real-time\/#GQjbFGO4ZaqN\">this article<\/a> for more inspiration.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Overall, Get Experimenting<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Overall, we\u2019ve covered a range of opportunities available to design across 7 different realms, and it\u2019s clear to see that there\u2019s plenty of scope for creating something totally new for your users to experience.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"There\u2019s really no restrictions \u2013 combining different realms is also a possibility for new opportunities.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There\u2019s really no restrictions - even combining the different realms is a possibility. For example, the VR Gloves by Manus combine Virtual Reality with Augmented Virtuality to create an even more immersive VR experience.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When thinking about this multiverse, it might also be worth to step right back and begin with the activity or experience you want to create, and then think about different tools that can help get you there. Maybe something as simpler as a smaller screen is enough to create a more immersive experience. As we saw with smartwatches, putting screens on our wrists changed the experience of consuming information quite drastically:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_13015\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-12.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13015\" class=\"size-full wp-image-13015\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-12.png\" alt=\"\" width=\"1600\" height=\"840\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-12.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-12-600x315.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-12-768x403.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-12-1500x788.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a><p id=\"caption-attachment-13015\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.lukew.com\/ff\/entry.asp?1943\">\"On the Wrist...\" by Luke Wroblewski<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center>As shown in the diagram by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.lukew.com\/ff\/entry.asp?1943\">Luke Wroblewski<\/a>, smartwatches provided a new context to design for, allowing us to get updates and track health etc, whilst staying more connected with our surroundings. The experience was no longer focused around the screen, but also our activities and the world around us. The form factor of the watch leads us to only glance at its screen rather than getting totally lost in it like you would a mobile.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"When it comes to experimenting with VR environments, prototyping tools are a great place to start.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When it comes to experimenting with VR environments though, prototyping tools can be a great way to explore. For instance, it\u2019s even possible to prototype VR experiences directly in Marvel - check out <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/vr-prototyping-marvel\/\">this article by Maxime on prototyping for VR with Marvel<\/a>, and get started today!<\/p>\n<div id=\"attachment_13018\" style=\"width: 1510px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-13.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13018\" class=\"size-full wp-image-13018\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/image_preview-13.png\" alt=\"\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-13.png 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-13-600x400.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/image_preview-13-768x512.png 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/a><p id=\"caption-attachment-13018\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/vr-prototyping-marvel\/\">VR Prototyping with Marvel<\/a><\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Since the first iPhone, standard screens have been the medium for which we\u2019ve been designing for most &#8211; usually apps and websites. As technology has advanced though, new avenues have slowly emerged (e.g. Augmented Reality and Virtual Reality) through which we can consume media and information in different ways. &#8220;VR and AR are just 2 realms we can design for&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":76,"featured_media":12928,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-12926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Uncover VR and AR ideas and inspiration for creating apps and experiences that combine Time, Space and Matter in different ways.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Beyond a Screen: A Primer for VR, AR and the Multiverse | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Uncover VR and AR ideas and inspiration for creating apps and experiences that combine Time, Space and Matter in different ways.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-16T21:41:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T12:27:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/purple.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2180\" \/>\n\t<meta property=\"og:image:height\" content=\"1182\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"12 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/purple.png\",\"width\":2180,\"height\":1182},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/\",\"name\":\"Design Beyond a Screen: A Primer for VR, AR and the Multiverse | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/#primaryimage\"},\"datePublished\":\"2017-10-16T21:41:29+00:00\",\"dateModified\":\"2020-11-12T12:27:00+00:00\",\"description\":\"Uncover VR and AR ideas and inspiration for creating apps and experiences that combine Time, Space and Matter in different ways.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/1337c9c5832cfeda9a5ccf5371d24e19\"},\"headline\":\"Design Beyond a Screen: A Primer for VR, AR and the Multiverse\",\"datePublished\":\"2017-10-16T21:41:29+00:00\",\"dateModified\":\"2020-11-12T12:27:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/1337c9c5832cfeda9a5ccf5371d24e19\",\"name\":\"Graeme Fulton\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4a29443acaa7dc0b9b9c6698f976168024ca960660df55b8b5661fc52fbb3c92?s=96&d=mm&r=g\",\"caption\":\"Graeme Fulton\"},\"description\":\"Designer, Writer and Developer at Marvel! Say hello on Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/12926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=12926"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/12926\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/12928"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=12926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=12926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=12926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}