{"id":894,"date":"2023-01-29T23:14:39","date_gmt":"2023-01-29T23:14:39","guid":{"rendered":"http:\/\/mycours.es\/fastcurious\/?page_id=894"},"modified":"2023-02-21T01:59:53","modified_gmt":"2023-02-21T01:59:53","slug":"project-the-interface-is-the-game","status":"publish","type":"page","link":"http:\/\/mycours.es\/fastcurious\/project-the-interface-is-the-game\/","title":{"rendered":"Project: The interface IS the game"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-415\" src=\"http:\/\/mycours.es\/gamestudio2019\/files\/2019\/02\/prompt3.png\" alt=\"\" width=\"1000\" height=\"456\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/prompt3.png 1000w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/prompt3-300x137.png 300w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/prompt3-768x350.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<p>Make a game that is 100% graphic user interface.<\/p>\n<p>*Avoid avatars and representational spaces as much as you can<br \/>\n**Avoid standard interface-heavy genres, make the GUI the protagonist<\/p>\n<p><strong>Some approaches:<\/strong><\/p>\n<p>Interfaces as narrative frames<\/p>\n<p><iframe loading=\"lazy\" title=\"Digital: A Love Story - Complete Gameplay\" width=\"840\" height=\"630\" src=\"https:\/\/www.youtube.com\/embed\/0HJvZ3TdTts?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Bury Me, My Love Walkthrough (part 1)\" width=\"840\" height=\"630\" src=\"https:\/\/www.youtube.com\/embed\/uWO01fLcqfQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"[Lets Play] Reigns - 100 YEARS! - Part IV - No Commentary\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/SmBUoaIxB4E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Her Story | Full Game Walkthrough | No Commentary\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/WIrxh8wyPEQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><a href=\"https:\/\/tim-sheinman.itch.io\/family\">https:\/\/tim-sheinman.itch.io\/family<\/a><\/p>\n<p>Interface centered genres<\/p>\n<p><iframe loading=\"lazy\" title=\"Universal Paperclips Speedrun - 1hr59min\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/rTyIUzsxt4U?start=356&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Papers, Please! |no-commentary Playthrough| - Flawless border control! Part 1\" width=\"840\" height=\"630\" src=\"https:\/\/www.youtube.com\/embed\/h2Th-x8nzl8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><a href=\"http:\/\/www.thegoparcade.com\/game\/bomb-the-right-place\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-386\" src=\"http:\/\/mycours.es\/gamestudio2019\/files\/2019\/02\/30677211645_c30fbdbbac_b-1024x584.jpg\" alt=\"\" width=\"840\" height=\"479\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/30677211645_c30fbdbbac_b.jpg 1024w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/30677211645_c30fbdbbac_b-300x171.jpg 300w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/30677211645_c30fbdbbac_b-768x438.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><iframe loading=\"lazy\" title=\"Spaceteam Introduction Trailer\" width=\"840\" height=\"630\" src=\"https:\/\/www.youtube.com\/embed\/aBfHhfxLNPE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Breaking the 4th wall<\/p>\n<p><a href=\"https:\/\/alienmelon.itch.io\/electric-file-monitor\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-383\" src=\"http:\/\/mycours.es\/gamestudio2019\/files\/2019\/02\/Screen-Shot-2019-02-14-at-10.50.48-PM-1-1024x655.png\" alt=\"\" width=\"840\" height=\"537\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-14-at-10.50.48-PM-1-1024x655.png 1024w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-14-at-10.50.48-PM-1-300x192.png 300w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-14-at-10.50.48-PM-1-768x491.png 768w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-14-at-10.50.48-PM-1-1200x767.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><iframe loading=\"lazy\" title=\"macdows 95 Gameplay (PC HD) [1080p60FPS]\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/k7_5dPFRSp8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"It is as if you were doing work trailer\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/RDMiRiHcezI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><a href=\"https:\/\/pippinbarr.com\/itisasifyouweredoingwork\/\">https:\/\/pippinbarr.com\/itisasifyouweredoingwork\/<\/a><\/p>\n<p><a href=\"http:\/\/ENHANCE.COMPUTER\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-906\" src=\"http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-2-1024x479.png\" alt=\"\" width=\"840\" height=\"393\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-2-1024x479.png 1024w, http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-2-300x140.png 300w, http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-2-768x359.png 768w, http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-2-1536x718.png 1536w, http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-2-1200x561.png 1200w, http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-2.png 1632w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><a href=\"http:\/\/ENHANCE.COMPUTER\">enhance.computer<\/a><\/p>\n<p><a href=\"https:\/\/porpentine.itch.io\/foldscape\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-385\" src=\"http:\/\/mycours.es\/gamestudio2019\/files\/2019\/02\/EmULH.png\" alt=\"\" width=\"553\" height=\"426\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/EmULH.png 553w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/EmULH-300x231.png 300w\" sizes=\"auto, (max-width: 553px) 85vw, 553px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/www.tomscott.com\/usvsth3m\/realistic-facebook-privacy-simulator\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-384\" src=\"http:\/\/mycours.es\/gamestudio2019\/files\/2019\/02\/realistic_facebook_privacy_simulator_1.jpg\" alt=\"\" width=\"660\" height=\"513\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/realistic_facebook_privacy_simulator_1.jpg 660w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/realistic_facebook_privacy_simulator_1-300x233.jpg 300w\" sizes=\"auto, (max-width: 660px) 85vw, 660px\" \/><\/a><\/p>\n<p>Mysterious interfaces<\/p>\n<p><iframe loading=\"lazy\" title=\"Mu Cartographer Gameplay\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/lQvcOX-VDzQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><a href=\"https:\/\/tak.itch.io\/tempres\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-389\" src=\"http:\/\/mycours.es\/gamestudio2019\/files\/2019\/02\/Screen-Shot-2019-02-14-at-11.05.27-PM-1024x586.png\" alt=\"\" width=\"840\" height=\"481\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-14-at-11.05.27-PM-1024x586.png 1024w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-14-at-11.05.27-PM-300x172.png 300w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-14-at-11.05.27-PM-768x439.png 768w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-14-at-11.05.27-PM-1200x687.png 1200w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-14-at-11.05.27-PM.png 1370w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><iframe loading=\"lazy\" title=\"Sethian Gameplay Video 1\" width=\"840\" height=\"630\" src=\"https:\/\/www.youtube.com\/embed\/3UhzG6o5g8c?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Devlog 19 - Verreciel IGF Build\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/Yb8N7kyJXYs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3>UI Design (different from UX)<\/h3>\n<p><a href=\"https:\/\/material.io\/\">Material<\/a> &#8211; design language\/philosophy used by Google<\/p>\n<p>Flat design vs\u00a0<a href=\"https:\/\/www.google.com\/search?q=skeuomorphism&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=0ahUKEwiBmazx5L3gAhWu1VkKHQzAABUQ_AUIDigB&amp;biw=1280&amp;bih=645#imgrc=t1RLdv6ZIfkiQM:\">skeuomorphism<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-398\" src=\"http:\/\/mycours.es\/gamestudio2019\/files\/2019\/02\/Evolution_of_Scrollbar_Apple-1024x5235-1024x523.jpg\" alt=\"\" width=\"840\" height=\"429\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Evolution_of_Scrollbar_Apple-1024x5235.jpg 1024w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Evolution_of_Scrollbar_Apple-1024x5235-300x153.jpg 300w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Evolution_of_Scrollbar_Apple-1024x5235-768x392.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-399\" src=\"http:\/\/mycours.es\/gamestudio2019\/files\/2019\/02\/buttons-1024x222.png\" alt=\"\" width=\"840\" height=\"182\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/buttons-1024x222.png 1024w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/buttons-300x65.png 300w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/buttons-768x167.png 768w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/buttons-1200x261.png 1200w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/buttons.png 1280w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><br \/>\nWith flat design is more difficult to communicate affordances.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-397\" src=\"http:\/\/mycours.es\/gamestudio2019\/files\/2019\/02\/Screen-Shot-2019-02-15-at-7.59.00-AM-1024x446.png\" alt=\"\" width=\"840\" height=\"366\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-15-at-7.59.00-AM-1024x446.png 1024w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-15-at-7.59.00-AM-300x131.png 300w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-15-at-7.59.00-AM-768x335.png 768w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-15-at-7.59.00-AM-1200x523.png 1200w, http:\/\/mycours.es\/fastcurious\/files\/2019\/02\/Screen-Shot-2019-02-15-at-7.59.00-AM.png 1354w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<p><strong>Affordance<\/strong>: your elements should communicate how they are supposed to be used by using color, shape, animation,\u00a0 context, etc. (also &#8220;perceived affordance&#8221;).<\/p>\n<p>&nbsp;<\/p>\n<h3>Brainstorming<\/h3>\n<p><iframe loading=\"lazy\" title=\"Mobile Application Design : Paper Prototype Video\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/y20E3qBmHpg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><strong>Paper prototyping time!<\/strong><\/p>\n<p><iframe loading=\"lazy\" title=\"Hypnospace Outlaw - Full Game (No Commentary)\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/M47OkFcxBj8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">1. Let&#8217;s list non gaming digital applications<br \/>\nPick one <\/span>and&#8230;<br \/>\n<span style=\"font-weight: 400;\">Design a game out of it.<\/span><\/p>\n<p><a href=\"http:\/\/inflorescence.city\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-905\" src=\"http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-1-1-1024x566.png\" alt=\"\" width=\"840\" height=\"464\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-1-1-1024x566.png 1024w, http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-1-1-300x166.png 300w, http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-1-1-768x424.png 768w, http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-1-1-1536x849.png 1536w, http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-1-1-1200x663.png 1200w, http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Image-1-1.png 1609w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">2.\u00a0 Let&#8217;s list game genres that involve very little GUI interactions<br \/>\n<\/span>Pick one and&#8230;<br \/>\n<span style=\"font-weight: 400;\">Design an interface-centric version of it.<\/span><\/p>\n<p><a href=\"http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Microsoft-Bob.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-904\" src=\"http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Microsoft-Bob.png\" alt=\"\" width=\"638\" height=\"470\" srcset=\"http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Microsoft-Bob.png 638w, http:\/\/mycours.es\/fastcurious\/files\/2023\/01\/Microsoft-Bob-300x221.png 300w\" sizes=\"auto, (max-width: 638px) 85vw, 638px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">3. Our GUIs are based on metaphors, mostly office related. Let&#8217;s list alternative metaphors.<br \/>\nPick one and&#8230;<br \/>\nDesign an OS starting from it.<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Make a game that is 100% graphic user interface. *Avoid avatars and representational spaces as much as you can **Avoid standard interface-heavy genres, make the GUI the protagonist Some approaches: Interfaces as narrative frames https:\/\/tim-sheinman.itch.io\/family Interface centered genres &nbsp; Breaking the 4th wall https:\/\/pippinbarr.com\/itisasifyouweredoingwork\/ enhance.computer Mysterious interfaces &nbsp; &nbsp; UI Design (different from UX) Material &hellip; <a href=\"http:\/\/mycours.es\/fastcurious\/project-the-interface-is-the-game\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project: The interface IS the game&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-894","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/pages\/894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/comments?post=894"}],"version-history":[{"count":4,"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/pages\/894\/revisions"}],"predecessor-version":[{"id":907,"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/pages\/894\/revisions\/907"}],"wp:attachment":[{"href":"http:\/\/mycours.es\/fastcurious\/wp-json\/wp\/v2\/media?parent=894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}