{"id":60,"date":"2021-10-15T06:45:02","date_gmt":"2021-10-15T06:45:02","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/craftb\/?p=60"},"modified":"2021-10-15T07:01:05","modified_gmt":"2021-10-15T07:01:05","slug":"week-2-wired-out-da-frame","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/craftb\/2021\/10\/15\/week-2-wired-out-da-frame\/","title":{"rendered":"Week 2: Wired Out Da Frame"},"content":{"rendered":"\n<p>Things are starting to get real now.    We met as a team, discussed activity splits, and receded to our respective corners of the world to get to work.  The first job to do on my list was to create the wireframes for my select pages. <br><br>I remember doing this exercise on a Chipotle napkin for the first Software Design class.  With this being Capstone, I wanted to step my game up and use a more official means for creating them.  So, I scoured the web for wireframe tools that fit my price range: Free-ish.<br><br>After some investigation, I quickly realized that my price range wasn&#8217;t very popular in the land of quick and easy tools; However, among the several dozen explored, some really good and really expensive, I discovered a few ones that fit the bill.<br><br>Out of this bunch, I&#8217;ll give you a few to explore that won&#8217;t break your budget and are fairly easy to learn.  Following are my top 3 with an overview and price breakdown of each:<br><br>1. <strong><a href=\"https:\/\/www.mockplus.com\/free-wireframing-tool\/\">Mockplus<\/a><\/strong><br><br><\/p>\n\n\n\n<p>Mockplus is a\u00a0tool for designers to rapidly create interactive wireframes for websites and mobile apps, which enables you to share and test design ideas across PCs and mobile devices from an early stage in the design process.  It&#8217;s easy to learn and good for team collaboration; However, not good for low to med fidelity wireframing.<br><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/dpbnri2zg3lc2.cloudfront.net\/en\/wp-content\/uploads\/old-blog-uploads\/mockplus-free-wireframe-tool.png\" alt=\"The Mockplus wireframe tool and its interface\" title=\"The Mockplus wireframe tool and its interface\" \/><\/figure>\n\n\n\n<p><br><strong>Price<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Basic: Free<\/li><li>Pro: 15-day free trial, $16 per mo (annually)<\/li><\/ul>\n\n\n\n<h4 class=\"has-normal-font-size wp-block-heading\" id=\"figma\">\u00a0<br><br>2. <a href=\"https:\/\/www.figma.com\/\">Figma<\/a><br><br><\/h4>\n\n\n\n<p>Figma is a cloud-based solution that is excellent for sharing and collaborating among team members. Its open and expansive layout gives you the ability to create many designs within one project. It also gives you the ability to produce many iterations side-by-side, making brainstorming exercises and redesigns super simple.<br><br><\/p>\n\n\n\n<figure class=\"wp-block-embed is-provider-youtube wp-block-embed-youtube\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Free Figma Tutorial: Designing Wireframes with Figma\" width=\"750\" height=\"422\" src=\"https:\/\/www.youtube.com\/embed\/6t_dYhXyYjI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><br><strong>Price<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Starter: Free  (up to two editors and three projects)<\/li><li>Premium: Free for students\u00a0<strong>or<\/strong>\u00a0$12 per editor\/month (unlimited projects).<\/li><\/ul>\n\n\n\n<p><br><br>3. <a href=\"https:\/\/ninjamock.com\/\">NinjaMock<\/a><br><br><\/p>\n\n\n\n<p>NinjaMock is a collaborative mockup and wireframing application for designing and testing mobile apps and web pages. It\u2019s simple, easy to learn, and includes many interactive elements.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Welcome to NinjaMock - make wireframes &amp; mockup&#039;s in minutes\" width=\"750\" height=\"422\" src=\"https:\/\/www.youtube.com\/embed\/haAwh6lboHA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><br><strong>Price<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Starter: Free  (up to two editors and three projects)<\/li><li>Premium: Free for students\u00a0<strong>or<\/strong>\u00a0$12 per editor\/month (unlimited projects).<br><\/li><\/ul>\n\n\n\n<p><br>There you have it.  This is just a few of the many options out there, especially if you&#8217;re willing to and can fork over the cash.  I encourage you to do as many free trials as possible to see what you like.  Different developers have have different needs and palettes.  So, go crazy&#8230; Just don&#8217;t forget to cancel the trial memberships.<br><br>See you next week!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Things are starting to get real now. We met as a team, discussed activity splits, and receded to our respective corners of the world to get to work. The first job to do on my list was to create the wireframes for my select pages. I remember doing this exercise on a Chipotle napkin for&hellip; <a class=\"more-link\" href=\"https:\/\/blogs.oregonstate.edu\/craftb\/2021\/10\/15\/week-2-wired-out-da-frame\/\">Continue reading <span class=\"screen-reader-text\">Week 2: Wired Out Da Frame<\/span><\/a><\/p>\n","protected":false},"author":11697,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-60","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/posts\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/users\/11697"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":27,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/posts\/60\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/categories?post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/tags?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}