{"id":6372,"date":"2021-04-07T21:01:04","date_gmt":"2021-04-08T04:01:04","guid":{"rendered":"https:\/\/blogs.ubc.ca\/etec523\/?p=6372"},"modified":"2021-08-31T16:30:46","modified_gmt":"2021-08-31T23:30:46","slug":"marvelapp-a-design-tool-for-non-coders-and-non-designers","status":"publish","type":"post","link":"https:\/\/blogs.ubc.ca\/etec523\/2021\/04\/07\/marvelapp-a-design-tool-for-non-coders-and-non-designers\/","title":{"rendered":"MarvelApp  &#8211; A Design Tool for Non-Coders (and non-designers)"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogs.ubc.ca\/etec523\/files\/2021\/04\/Screen-Shot-2021-04-04-at-7.41.42-PM-6-537x1024.png\" alt=\"\" class=\"wp-image-6375\" width=\"317\" height=\"604\" srcset=\"https:\/\/blogs.ubc.ca\/etec523\/files\/2021\/04\/Screen-Shot-2021-04-04-at-7.41.42-PM-6-537x1024.png 537w, https:\/\/blogs.ubc.ca\/etec523\/files\/2021\/04\/Screen-Shot-2021-04-04-at-7.41.42-PM-6-157x300.png 157w, https:\/\/blogs.ubc.ca\/etec523\/files\/2021\/04\/Screen-Shot-2021-04-04-at-7.41.42-PM-6.png 754w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">I can\u2019t code&#8230;or design, really. My 12-year-old daughter can code to program a Lego robot and design intricate objects to be 3-D printed, but it\u2019s all completely foreign to me (and I don\u2019t really want to learn, yet). For people who do not know how to code, the idea of building an app initially seems daunting, but there are many app building\/prototyping tools available just for us non-coders. In ETEC 523, several posts have included prototypes created in platforms such as <a href=\"https:\/\/www.adobe.com\/ca\/products\/xd.html\" data-type=\"URL\" data-id=\"https:\/\/www.adobe.com\/ca\/products\/xd.html\">Adobe XD<\/a>, <a href=\"https:\/\/www.figma.com\/\" data-type=\"URL\" data-id=\"https:\/\/www.figma.com\/\">Figma<\/a>, <a href=\"https:\/\/marvelapp.com\/\" data-type=\"URL\" data-id=\"https:\/\/marvelapp.com\/\">MarvelApp<\/a> and more. As an educator, what is the value in learning how to use such a tool?&nbsp; I may never create and sell my own amazing app and retire early as my newest neighbour has done (he\u2019s 35), but I am teaching students who may do just that if given an opportunity to learn.&nbsp; For my A-3 project, I decided to prototype my future casting idea using the MarvelApp prototyping tool.&nbsp; With so many tools to choose from and very little confidence in my own abilities, MarvelApp appealed the most in that I\u2019d already seen examples of it used previously, and it advertises as being simple enough that even a design newbie can be building an app with a few easy clicks.&nbsp; l can attest that it also takes a half-dozen tutorial videos, a lot of re-thinking and trial and error, and would be most successful with a clear idea of what you want the app to do and look like before you start.&nbsp; I started by sketching out many of my ideas on paper and then re-imagined them using the in-app design tool, but with decent sketches, a designer can take pictures of them and upload them directly into the app.&nbsp; If you\u2019re already using <a href=\"https:\/\/www.sketch.com\/\">Sketch<\/a> as a design tool, or want to design in PowerPoint, these designs can also be integrated right into MarvelApp. What online tools for non-coders have you used and find helpful.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I can\u2019t code&#8230;or design, really. My 12-year-old daughter can code to program a Lego robot and design intricate objects to be 3-D printed, but it\u2019s&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/blogs.ubc.ca\/etec523\/2021\/04\/07\/marvelapp-a-design-tool-for-non-coders-and-non-designers\/\">Read more<span class=\"screen-reader-text\">MarvelApp  &#8211; A Design Tool for Non-Coders (and non-designers)<\/span><\/a><\/div>\n","protected":false},"author":67020,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[218,217],"class_list":["post-6372","post","type-post","status-publish","format-standard","hentry","category-mobiletechnologies","tag-non-coding","tag-prototyping","entry"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/etec523\/wp-json\/wp\/v2\/posts\/6372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/etec523\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/etec523\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec523\/wp-json\/wp\/v2\/users\/67020"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec523\/wp-json\/wp\/v2\/comments?post=6372"}],"version-history":[{"count":3,"href":"https:\/\/blogs.ubc.ca\/etec523\/wp-json\/wp\/v2\/posts\/6372\/revisions"}],"predecessor-version":[{"id":6377,"href":"https:\/\/blogs.ubc.ca\/etec523\/wp-json\/wp\/v2\/posts\/6372\/revisions\/6377"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/etec523\/wp-json\/wp\/v2\/media?parent=6372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec523\/wp-json\/wp\/v2\/categories?post=6372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec523\/wp-json\/wp\/v2\/tags?post=6372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}