{"id":139,"date":"2012-10-27T21:22:30","date_gmt":"2012-10-27T21:22:30","guid":{"rendered":"http:\/\/saul.cpsc.ucalgary.ca\/sketchbook\/?page_id=139"},"modified":"2012-10-30T00:06:55","modified_gmt":"2012-10-30T00:06:55","slug":"videos","status":"publish","type":"page","link":"https:\/\/sketchbook.cpsc.ucalgary.ca\/?page_id=139","title":{"rendered":"Videos"},"content":{"rendered":"<p>The following videos provide examples about sketching and sketching methods as related to interaction design. Note that many are from other sources, so we cannot guarantee that all links are alive (although they were when we put this site together)<\/p>\n<h1>Talking over a screen-captured slide show<\/h1>\n<p>Adding narration to your sketch can help make it self-explanatory. One simple way to do this is to take a series of screenshots (or mocked up screenshots) showing an interactive sequence, and assemble them in a slide show. Then use a screen capture program to capture the slide show, your mouse position, and your voice as a video. A narrator can talk about each screen (pointing with the cursor), then click to the next screen. As Jonas Lowgren explains: <em>the resulting video communicates the temporal qualities of the design much better than the static screenshots would, and it didn&#8217;t take many minutes to produce.<\/em><\/p>\n<ul>\n<li><a href=\"http:\/\/webzone.k3.mah.se\/k3jolo\/designVideo\/designVideo11.htm\"><strong>c3demo<\/strong><\/a> by Jonas Lowgren, 2007. An example explorative work in interactive visualization of semi-structured data.<\/li>\n<\/ul>\n<h1>Video Enactments Explaining Complex Ideas<\/h1>\n<ul>\n<li><a href=\"http:\/\/dotsub.com\/films\/twitterin\/index.php?autostart=true&amp;language_setting=en_3068\"><strong>Twitter in Plain English.<\/strong><\/a> Wonderful use of paper cut-outs and simple video animation tricks <span style=\"font-size: 12px;\">to explain Twitter via sketches<\/span><\/li>\n<li><a href=\"http:\/\/youtube.com\/watch?v=eRqUE6IHTEA\"><strong>Google Docs in Plain English<\/strong><\/a> is a great example of mixing sketches, concepts, use scenarios, and even interface walkthroughs in an engaging video sketch.<\/li>\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=Zto6aTZM9t0&amp;NR=1\"><strong>Nokia Morph Concept<\/strong><\/a> is a high-end animation illustration future possibilities for mobile devices. Includes animated cartoons, split scenes, title slates, photos, and annotations.<\/li>\n<\/ul>\n<h1>Videos as Thin Fiction<\/h1>\n<p>The idea of &#8216;thin fiction&#8217; is to illustrate a video sketch via a scenario showing it in use<\/p>\n<ul>\n<li><a href=\"http:\/\/webzone.k3.mah.se\/k3jolo\/designVideo\/\"><strong>Designing with Moving Images<\/strong><\/a>Jonas L\u00f6wgren collects various thin fiction video sketches. A subset is listed below\n<ul>\n<li><a href=\"http:\/\/webzone.k3.mah.se\/k3jolo\/designVideo\/designVideo02.htm\"><strong>Tip-Toe<\/strong><\/a> illustrates floor buttons used to unlock a door. Editing confined to adding button-press beeps and cutting unnecessary sequences.<\/li>\n<li><a href=\"http:\/\/webzone.k3.mah.se\/k3jolo\/designVideo\/designVideo04.htm\"><strong>News Media<\/strong><\/a>, a news-on-demand service, tells a-day-in-life story with detailed interface animations composited into the live action.<\/li>\n<li><a href=\"http:\/\/webzone.k3.mah.se\/k3jolo\/designVideo\/designVideo05.htm\"><strong>Posthoc WorkNotes<\/strong><\/a> a rich media content management system, shot in live-action video, into which detailed interface designs are composited<\/li>\n<li><a href=\"http:\/\/webzone.k3.mah.se\/k3jolo\/designVideo\/designVideo06.htm\"><strong>Our News and Sports<\/strong><\/a> also uses detailed interface designs composited into live-action footage<\/li>\n<li><a href=\"http:\/\/webzone.k3.mah.se\/k3jolo\/designVideo\/designVideo07.htm\"><strong>Sitep<\/strong><\/a> uses cutout animation to tell the story.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The following videos provide examples about sketching and sketching methods as related to interaction design. Note that many are from other sources, so we cannot guarantee that all links are alive (although they were when we put this site together) &hellip; <a href=\"https:\/\/sketchbook.cpsc.ucalgary.ca\/?page_id=139\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-139","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sketchbook.cpsc.ucalgary.ca\/index.php?rest_route=\/wp\/v2\/pages\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketchbook.cpsc.ucalgary.ca\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sketchbook.cpsc.ucalgary.ca\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sketchbook.cpsc.ucalgary.ca\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sketchbook.cpsc.ucalgary.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=139"}],"version-history":[{"count":6,"href":"https:\/\/sketchbook.cpsc.ucalgary.ca\/index.php?rest_route=\/wp\/v2\/pages\/139\/revisions"}],"predecessor-version":[{"id":188,"href":"https:\/\/sketchbook.cpsc.ucalgary.ca\/index.php?rest_route=\/wp\/v2\/pages\/139\/revisions\/188"}],"wp:attachment":[{"href":"https:\/\/sketchbook.cpsc.ucalgary.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}