{"id":14,"date":"2021-10-07T18:48:53","date_gmt":"2021-10-07T18:48:53","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/?p=14"},"modified":"2021-10-07T18:48:54","modified_gmt":"2021-10-07T18:48:54","slug":"wireframe-fun","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/2021\/10\/07\/wireframe-fun\/","title":{"rendered":"Wireframe Fun"},"content":{"rendered":"\n<p>I believe the best use of wireframes are to generate a quick and imperfect sketch of a website. I understand the importance of creating wireframes in the process of designing a website. They are meant to be a visual guide of the skeletal framework of a website and can be adapted by designers to create a more high-res prototype of the design. I am not the best designer, so started sketching out a few different ideas on a whiteboard to rapid prototype and to get some feedback from my group.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/F92A735E-CAF9-430A-AF64-A9BC1CBCAC75_1_105_c.jpeg\" alt=\"\" data-id=\"15\" data-full-url=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/F92A735E-CAF9-430A-AF64-A9BC1CBCAC75_1_105_c.jpeg\" data-link=\"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/?attachment_id=15\" class=\"wp-image-15\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/F92A735E-CAF9-430A-AF64-A9BC1CBCAC75_1_105_c.jpeg 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/F92A735E-CAF9-430A-AF64-A9BC1CBCAC75_1_105_c-300x225.jpeg 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/F92A735E-CAF9-430A-AF64-A9BC1CBCAC75_1_105_c-768x576.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/0C3EB351-CDC3-432C-89B0-FA6BDDEB4A2B_1_105_c.jpeg\" alt=\"\" data-id=\"16\" data-full-url=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/0C3EB351-CDC3-432C-89B0-FA6BDDEB4A2B_1_105_c.jpeg\" data-link=\"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/?attachment_id=16\" class=\"wp-image-16\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/0C3EB351-CDC3-432C-89B0-FA6BDDEB4A2B_1_105_c.jpeg 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/0C3EB351-CDC3-432C-89B0-FA6BDDEB4A2B_1_105_c-300x225.jpeg 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/0C3EB351-CDC3-432C-89B0-FA6BDDEB4A2B_1_105_c-768x576.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/859D1A4F-AA21-4601-9233-1EB4ED18D4D6_1_105_c.jpeg\" alt=\"\" data-id=\"17\" data-full-url=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/859D1A4F-AA21-4601-9233-1EB4ED18D4D6_1_105_c.jpeg\" data-link=\"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/?attachment_id=17\" class=\"wp-image-17\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/859D1A4F-AA21-4601-9233-1EB4ED18D4D6_1_105_c.jpeg 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/859D1A4F-AA21-4601-9233-1EB4ED18D4D6_1_105_c-300x225.jpeg 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/859D1A4F-AA21-4601-9233-1EB4ED18D4D6_1_105_c-768x576.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/094FC0D2-61EA-469F-BFA3-6D6DE23FB0C3_1_105_c.jpeg\" alt=\"\" data-id=\"18\" data-full-url=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/094FC0D2-61EA-469F-BFA3-6D6DE23FB0C3_1_105_c.jpeg\" data-link=\"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/?attachment_id=18\" class=\"wp-image-18\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/094FC0D2-61EA-469F-BFA3-6D6DE23FB0C3_1_105_c.jpeg 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/094FC0D2-61EA-469F-BFA3-6D6DE23FB0C3_1_105_c-300x225.jpeg 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/094FC0D2-61EA-469F-BFA3-6D6DE23FB0C3_1_105_c-768x576.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/132C2EFA-B1C9-48EE-952A-5B40EC7172C3_1_105_c.jpeg\" alt=\"\" data-id=\"19\" data-full-url=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/132C2EFA-B1C9-48EE-952A-5B40EC7172C3_1_105_c.jpeg\" data-link=\"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/?attachment_id=19\" class=\"wp-image-19\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/132C2EFA-B1C9-48EE-952A-5B40EC7172C3_1_105_c.jpeg 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/132C2EFA-B1C9-48EE-952A-5B40EC7172C3_1_105_c-300x225.jpeg 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/132C2EFA-B1C9-48EE-952A-5B40EC7172C3_1_105_c-768x576.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/84D93CFA-08AE-451D-AE29-67F844FE79AE_1_105_c.jpeg\" alt=\"\" data-id=\"20\" data-full-url=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/84D93CFA-08AE-451D-AE29-67F844FE79AE_1_105_c.jpeg\" data-link=\"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/?attachment_id=20\" class=\"wp-image-20\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/84D93CFA-08AE-451D-AE29-67F844FE79AE_1_105_c.jpeg 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/84D93CFA-08AE-451D-AE29-67F844FE79AE_1_105_c-300x225.jpeg 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/84D93CFA-08AE-451D-AE29-67F844FE79AE_1_105_c-768x576.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\">Wireframes for one of the website<\/figcaption><\/figure>\n\n\n\n<p>These wireframes are not the best quality, but they were done quickly and communicated what I was thinking to my teammates. One teammate said he liked two of them and so I went onto the next step of creating a digital wireframe of the pages.<\/p>\n\n\n\n<p>I looked into tools like Figma and LucidChart but ultimately decided to make the wireframes with HTML and CSS. I made this decision because I am trying to more quickly go through this step of the application development cycle, and thought I could prototype in HTML and CSS just as quickly as using other tools.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"710\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/Screen-Shot-2021-10-07-at-2.13.22-PM-1024x710.png\" alt=\"\" class=\"wp-image-21\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/Screen-Shot-2021-10-07-at-2.13.22-PM-1024x710.png 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/Screen-Shot-2021-10-07-at-2.13.22-PM-300x208.png 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/Screen-Shot-2021-10-07-at-2.13.22-PM-768x533.png 768w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/4752\/files\/2021\/10\/Screen-Shot-2021-10-07-at-2.13.22-PM.png 1146w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Wireframe with HTML and CSS<\/figcaption><\/figure>\n\n\n\n<p>This wireframe is still not perfect, but was done quickly and the code for it could be adapted to build the final product. <\/p>\n\n\n\n<p>This fast and scrappy approach to design is probably not the best option for companies, but in order to get a project up and working quickly, I think it&#8217;s the most convenient approach.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I believe the best use of wireframes are to generate a quick and imperfect sketch of a website. I understand the importance of creating wireframes in the process of designing a website. They are meant to be a visual guide of the skeletal framework of a website and can be adapted by designers to create&hellip; <a class=\"more-link\" href=\"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/2021\/10\/07\/wireframe-fun\/\">Continue reading <span class=\"screen-reader-text\">Wireframe Fun<\/span><\/a><\/p>\n","protected":false},"author":11627,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-14","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/wp-json\/wp\/v2\/posts\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/wp-json\/wp\/v2\/users\/11627"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/wp-json\/wp\/v2\/posts\/14\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/joshkaiserdev\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}