{"id":16718,"date":"2018-12-03T21:45:22","date_gmt":"2018-12-04T05:45:22","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=16718"},"modified":"2020-04-27T07:01:04","modified_gmt":"2020-04-27T14:01:04","slug":"prototype-sneak-previews-with-device-frames","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/","title":{"rendered":"Share Sneak Previews of Your Prototypes With Device Frames"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16719 size-full\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/12\/DeviceFrames_blog-post-header_1200x600_v7.png\" alt=\"Device Frames\" width=\"1200\" height=\"600\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/12\/DeviceFrames_blog-post-header_1200x600_v7.png 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/12\/DeviceFrames_blog-post-header_1200x600_v7-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/12\/DeviceFrames_blog-post-header_1200x600_v7-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/12\/DeviceFrames_blog-post-header_1200x600_v7-1024x512.png 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>You no longer have to imagine what your final prototype will actually look like on a device. UXPin\u2019s new Device Frames\u2026 at your service.<\/p>\n<p>Imagine you\u2019ve just poured your blood, sweat and tears into an important design project. You\u2019re ready to shout it from the rooftops and share it with the world. But first, you want your stakeholders to preview it in its full glory\u2014in real life. Enter Device Frames. Device Frames allow you to add mockups of mobile devices for a contextualized preview of your prototypes.<\/p>\n<p>With this update, we&#8217;ve added two extra features:<\/p>\n<ul>\n<li>You can change the color of the background and add\/remove shadow for the device mockups on preview. This gives designers extra powers to control the presentation of their project to stakeholders.<\/li>\n<li>Use user finger simulation on preview for mobile devices. Now for mobile prototypes, you&#8217;ll see a circle simulating finger instead of a desktop cursor. This adds to the realism of the experience on preview.<\/li>\n<\/ul>\n<h2>Why you\u2019ll love it<\/h2>\n<p>Previously, you&#8217;d have to download a device mockup from somewhere and upload it to UXPin to preview it. Fortunately for everyone, now you&#8217;re able to automatically add the right device image\/frame to your preview based on your canvas size. So not only can you beautifully present your design in the context of the right device, it\u2019s automatic too! <\/p>\n<p>Also, you can trust that they\u2019ll see exactly what you intend for your prototype to look like. These digital mockups will help the viewer truly understand what you\u2019re trying to present as the final result, on all its different displays. To show stakeholders the final UI in real world context. Additionally, it benefits designers\u2019 workflow; so you can check out how the design looks like on the real device and adjust it wherever needed to get the best result.<\/p>\n<p>The Device Frames for your designs are not interactive\u2014 they are static and for aesthetic preview purposes only. You can preview your prototypes on iPads, iPhones and WatchOS, as well as Android phones and tablets. <\/p>\n<p>This is the first step in our plans to step up our Responsive and Mobile Design game. We&#8217;ll be releasing the UXPin Mirror app \u00a0soon, to preview your prototypes directly on an iOS\/Android device. Stay tuned! <\/p>\n","protected":false},"excerpt":{"rendered":"<p>You no longer have to imagine what your final prototype will actually look like on a device. UXPin\u2019s new Device Frames\u2026 at your service. Imagine you\u2019ve just poured your blood, sweat and tears into an important design project. You\u2019re ready to shout it from the rooftops and share it with the world. But first, you<\/p>\n","protected":false},"author":2,"featured_media":16719,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,205,172,15],"tags":[252,250,27,247,248,251,254,249,255,253],"class_list":["post-16718","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-mobile-design","category-product-design","category-responsive-web-design","tag-android","tag-apple-watch","tag-collaboration","tag-device-frames","tag-device-mockups","tag-ios","tag-mobile-devices","tag-preview","tag-responsive-and-mobile-design","tag-stakeholders"],"yoast_title":"","yoast_metadesc":"Device frames allow you to clearly see how your project will look like on different systems. Take sneak peak at how UXPin does it.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Share Sneak Previews of Your Prototypes With Device Frames | UXPin<\/title>\n<meta name=\"description\" content=\"Device frames allow you to clearly see how your project will look like on different systems. Take sneak peak at how UXPin does it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Share Sneak Previews of Your Prototypes With Device Frames\" \/>\n<meta property=\"og:description\" content=\"Device frames allow you to clearly see how your project will look like on different systems. Take sneak peak at how UXPin does it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-04T05:45:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-27T14:01:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/12\/DeviceFrames_blog-post-header_1200x600_v7.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Marcin Treder\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marcintreder\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcin Treder\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/\"},\"author\":{\"name\":\"Marcin Treder\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/cc841401f06463c92d633bed6dfd84bc\"},\"headline\":\"Share Sneak Previews of Your Prototypes With Device Frames\",\"datePublished\":\"2018-12-04T05:45:22+00:00\",\"dateModified\":\"2020-04-27T14:01:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/\"},\"wordCount\":397,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/DeviceFrames_blog-post-header_1200x600_v7.png\",\"keywords\":[\"android\",\"apple watch\",\"collaboration\",\"device frames\",\"device mockups\",\"ios\",\"mobile devices\",\"preview\",\"Responsive and Mobile Design\",\"stakeholders\"],\"articleSection\":[\"Blog\",\"Collaboration\",\"Mobile Design\",\"Product Design\",\"Responsive Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/\",\"name\":\"Share Sneak Previews of Your Prototypes With Device Frames | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/DeviceFrames_blog-post-header_1200x600_v7.png\",\"datePublished\":\"2018-12-04T05:45:22+00:00\",\"dateModified\":\"2020-04-27T14:01:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/cc841401f06463c92d633bed6dfd84bc\"},\"description\":\"Device frames allow you to clearly see how your project will look like on different systems. Take sneak peak at how UXPin does it.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/DeviceFrames_blog-post-header_1200x600_v7.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/DeviceFrames_blog-post-header_1200x600_v7.png\",\"width\":1200,\"height\":600,\"caption\":\"DeviceFrames blog post header 1200x600 v7\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-sneak-previews-with-device-frames\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Share Sneak Previews of Your Prototypes With Device Frames\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/cc841401f06463c92d633bed6dfd84bc\",\"name\":\"Marcin Treder\",\"description\":\"Marcin Treder is the CEO and co-founder of UXPin, a product design platform. Since co-founding UXPin in 2010, he has helped build and lead product teams in the Poland and Silicon Valley offices. Previously, he worked on projects for two companies that IPOed and managed the design team for one of the biggest eCommerce companies in Eastern Europe. He holds an M.A. in Cognitive Psychology. Marcin has been given numerous awards, including MIT 30 under 35 for his accomplishments in design and business.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\",\"https:\\\/\\\/x.com\\\/marcintreder\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/marcintreder\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Share Sneak Previews of Your Prototypes With Device Frames | UXPin","description":"Device frames allow you to clearly see how your project will look like on different systems. Take sneak peak at how UXPin does it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/","og_locale":"en_US","og_type":"article","og_title":"Share Sneak Previews of Your Prototypes With Device Frames","og_description":"Device frames allow you to clearly see how your project will look like on different systems. Take sneak peak at how UXPin does it.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/","og_site_name":"Studio by UXPin","article_published_time":"2018-12-04T05:45:22+00:00","article_modified_time":"2020-04-27T14:01:04+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/12\/DeviceFrames_blog-post-header_1200x600_v7.png","type":"image\/png"}],"author":"Marcin Treder","twitter_card":"summary_large_image","twitter_creator":"@marcintreder","twitter_misc":{"Written by":"Marcin Treder","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/"},"author":{"name":"Marcin Treder","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/cc841401f06463c92d633bed6dfd84bc"},"headline":"Share Sneak Previews of Your Prototypes With Device Frames","datePublished":"2018-12-04T05:45:22+00:00","dateModified":"2020-04-27T14:01:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/"},"wordCount":397,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/12\/DeviceFrames_blog-post-header_1200x600_v7.png","keywords":["android","apple watch","collaboration","device frames","device mockups","ios","mobile devices","preview","Responsive and Mobile Design","stakeholders"],"articleSection":["Blog","Collaboration","Mobile Design","Product Design","Responsive Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/","name":"Share Sneak Previews of Your Prototypes With Device Frames | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/12\/DeviceFrames_blog-post-header_1200x600_v7.png","datePublished":"2018-12-04T05:45:22+00:00","dateModified":"2020-04-27T14:01:04+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/cc841401f06463c92d633bed6dfd84bc"},"description":"Device frames allow you to clearly see how your project will look like on different systems. Take sneak peak at how UXPin does it.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/12\/DeviceFrames_blog-post-header_1200x600_v7.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/12\/DeviceFrames_blog-post-header_1200x600_v7.png","width":1200,"height":600,"caption":"DeviceFrames blog post header 1200x600 v7"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-sneak-previews-with-device-frames\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Share Sneak Previews of Your Prototypes With Device Frames"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/cc841401f06463c92d633bed6dfd84bc","name":"Marcin Treder","description":"Marcin Treder is the CEO and co-founder of UXPin, a product design platform. Since co-founding UXPin in 2010, he has helped build and lead product teams in the Poland and Silicon Valley offices. Previously, he worked on projects for two companies that IPOed and managed the design team for one of the biggest eCommerce companies in Eastern Europe. He holds an M.A. in Cognitive Psychology. Marcin has been given numerous awards, including MIT 30 under 35 for his accomplishments in design and business.","sameAs":["http:\/\/uxpin.com","https:\/\/x.com\/marcintreder"],"url":"https:\/\/www.uxpin.com\/studio\/author\/marcintreder\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=16718"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16718\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/16719"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=16718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=16718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=16718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}