{"id":58,"date":"2020-04-25T01:16:24","date_gmt":"2020-04-25T01:16:24","guid":{"rendered":"https:\/\/tremainedesigns.com\/chloeting\/?p=58"},"modified":"2020-04-27T02:59:26","modified_gmt":"2020-04-27T02:59:26","slug":"wireframe","status":"publish","type":"post","link":"https:\/\/tremainedesigns.com\/chloeting\/2020\/04\/25\/wireframe\/","title":{"rendered":"Wireframe"},"content":{"rendered":"\n<p>A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-24-at-9.19.34-PM-1024x371.png\" alt=\"\" class=\"wp-image-64\" srcset=\"https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-24-at-9.19.34-PM-1024x371.png 1024w, https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-24-at-9.19.34-PM-300x109.png 300w, https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-24-at-9.19.34-PM-768x279.png 768w, https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-24-at-9.19.34-PM-1536x557.png 1536w, https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-24-at-9.19.34-PM-2048x743.png 2048w, https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-24-at-9.19.34-PM-165x60.png 165w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:55px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Physical Wireframe<\/h2>\n\n\n\n<p>Before completing a digital wireframe, we first needed to create a paper copy of every page of our app. This paper copy would help with user testing, since we wouldn&#8217;t put a lot of work into creating a digital version, just to have to change it later on.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/IMG_1263-1024x768.jpg\" alt=\"\" class=\"wp-image-65\" width=\"590\" height=\"443\" srcset=\"https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/IMG_1263-1024x768.jpg 1024w, https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/IMG_1263-300x225.jpg 300w, https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/IMG_1263-768x576.jpg 768w, https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/IMG_1263-1536x1152.jpg 1536w, https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/IMG_1263-2048x1536.jpg 2048w, https:\/\/tremainedesigns.com\/chloeting\/wp-content\/uploads\/2020\/04\/IMG_1263-80x60.jpg 80w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:55px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Interactive Wireframe<\/h2>\n\n\n\n<p>Here is my completed interactive wireframe. Some things may be confusing because of the lack of symbols and icons, but wireframes are not supposed to contain many graphics. I&#8217;ve been told that mine was actually very elaborate.<\/p>\n\n\n\n<p>Feel free to test it out for yourself!<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<iframe width=\"414\" height=\"736\" src=\"https:\/\/xd.adobe.com\/embed\/ed112428-c5b0-4e4b-41b4-dfe5ba32a62f-9b20\/?fullscreen&amp;hints=off\" frameborder=\"0\" allowfullscreen=\"\"><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Tasks<\/h2>\n\n\n\n<p>Tasks are created for user testing your wireframe. They are simple commands that you give to a user one at a time that they complete without guidance. Here are my three tasks:<\/p>\n\n\n\n<ol><li>Create an account<\/li><li>Join a forum and hide it&#8217;s alerts<\/li><li>Create a workout program<\/li><\/ol>\n\n\n\n<div style=\"height:55px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">User Testing<\/h2>\n\n\n\n<p>Due to COVID-19, I wasn&#8217;t able to test someone with my physical wireframe. So, as a work around, I tested someone over a zoom call by utilizing screen share. As you&#8217;ll see, I read the user a statement, then introduced him to each task individually. It&#8217;s important to do that so the user doesn&#8217;t get overwhelmed.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube aligncenter wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"User Testing Chloe Ting App - Wireframe\" width=\"780\" height=\"585\" src=\"https:\/\/www.youtube.com\/embed\/oCUuCovtR-0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. Physical Wireframe Before completing a digital wireframe, we first needed to create a paper copy of &hellip; <\/p>\n","protected":false},"author":1,"featured_media":59,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/tremainedesigns.com\/chloeting\/wp-json\/wp\/v2\/posts\/58"}],"collection":[{"href":"https:\/\/tremainedesigns.com\/chloeting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tremainedesigns.com\/chloeting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tremainedesigns.com\/chloeting\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tremainedesigns.com\/chloeting\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":5,"href":"https:\/\/tremainedesigns.com\/chloeting\/wp-json\/wp\/v2\/posts\/58\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/tremainedesigns.com\/chloeting\/wp-json\/wp\/v2\/posts\/58\/revisions\/73"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tremainedesigns.com\/chloeting\/wp-json\/wp\/v2\/media\/59"}],"wp:attachment":[{"href":"https:\/\/tremainedesigns.com\/chloeting\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tremainedesigns.com\/chloeting\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tremainedesigns.com\/chloeting\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}