{"id":487,"date":"2012-05-09T18:14:09","date_gmt":"2012-05-10T01:14:09","guid":{"rendered":"http:\/\/blog.mozilla.org\/ux\/?p=487"},"modified":"2012-07-05T15:39:32","modified_gmt":"2012-07-05T22:39:32","slug":"video-sketching-firefox-metro-start-page","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2012\/05\/video-sketching-firefox-metro-start-page\/","title":{"rendered":"Video Sketching Firefox Metro Start Page"},"content":{"rendered":"<a href=\"http:\/\/blog.mozilla.org\/ux\/2012\/05\/video-sketching-firefox-metro-start-page\/banner-pg-s\/\" rel=\"attachment wp-att-537\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/blog.mozilla.org\/ux\/files\/2012\/05\/banner-pg-s.png\" alt=\"\" title=\"Banner Image - Video Sketching Firefox Metro\" width=\"600\" height=\"296\" class=\"size-full wp-image-537\" srcset=\"https:\/\/blog.mozilla.org\/ux\/files\/2012\/05\/banner-pg-s.png 600w, https:\/\/blog.mozilla.org\/ux\/files\/2012\/05\/banner-pg-s-252x124.png 252w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a>\n<p>Starting from March, I began to work on a challenging but super exciting project: designing Firefox on Windows 8. As you may know, Windows 8 will employ a new user interface based on Microsoft&#8217;s <a title=\"Wiki - Metro design language\" href=\"http:\/\/en.wikipedia.org\/wiki\/Metro_(design_language)\">Metro design language<\/a>. This Metro environment is a tile-based, touch-optimized, cross-platform system.<\/p>\n<p>To make Firefox shine on this unique environment, the UX team on\u00a0<a title=\"MozillaWiki - Firefox Metro UI\" href=\"https:\/\/wiki.mozilla.org\/Firefox_Metro_UI\">MetroUI project<\/a>\u00a0has been focusing on solving some design challenges, such as: delivering a consistent &#8220;Firefoxy&#8221; experience and also making it native on Metro; designing an equally awesome experience of Firefox Metro on desktop using mouse and keyboard.<\/p>\n<p>Another challenge for me as a UX designer is prototyping and testing a product that has a brand new touch language. I found it hard to simulate the W8 touch experience in a quick and dirty way, withouting building a functional product. In order to get the experience out and gain enough feedback to iterate,\u00a0I decided to &#8220;video sketch&#8221; the Start Page of Firefox Metro by just using Keynote.<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/player.vimeo.com\/video\/41887411\" width=\"500\" height=\"281\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen><\/iframe><\/p>\n<p>Making a video sketch by Keynote is simple:<\/p>\n<ul>\n<li>Step 1: Create a user story. Write a script with scenes.<\/li>\n<li>Step 2: Place your mockups into Keynote, put them in sequence to match the scenes you created.<\/li>\n<li>Step 3: Link your mockups\u00a0together(create animations, page transitions, or maybe just hotspot link)<\/li>\n<li>Step 4: Record your slideshow<\/li>\n<li>Step 5: Export as Quicktime movie<\/li>\n<\/ul>\n<p>I will be posting more video sketch demos on Firefox Metro&#8217;s main features, such as browsing web pages, searching via awesomescreen, using app contracts, etc.\u00a0Also stay tuned for more awesomeness about Firefox Metro from <a title=\"Stephen Horlander - visual design lead\" href=\"http:\/\/stephenhorlander.com\/\" target=\"_blank\">Stephen Horlander<\/a>, <a title=\"Brian R. Bondy - Win Developer on Metro\" href=\"http:\/\/www.brianbondy.com\/\" target=\"_blank\">Brian R. Bondy<\/a>, and <a title=\"Asa Dotzler\" href=\"http:\/\/weblogs.mozillazine.org\/asa\/\" target=\"_blank\">Asa Dotzler<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Starting from March, I began to work on a challenging but super exciting project: designing Firefox on Windows 8. As you may know, Windows 8 will employ a new user &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/ux\/2012\/05\/video-sketching-firefox-metro-start-page\/\">Read more<\/a><\/p>\n","protected":false},"author":487,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[246,9595,9577],"tags":[],"coauthors":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/487"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/users\/487"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/comments?post=487"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/487\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media?parent=487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/categories?post=487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/tags?post=487"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/coauthors?post=487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}