{"id":149,"date":"2023-11-03T22:42:09","date_gmt":"2023-11-03T22:42:09","guid":{"rendered":"http:\/\/hansm2.pairserver.com\/blog\/?p=149"},"modified":"2023-11-06T23:24:34","modified_gmt":"2023-11-06T23:24:34","slug":"prototyping","status":"publish","type":"post","link":"http:\/\/hansm2.pairserver.com\/blog\/2023\/11\/03\/prototyping\/","title":{"rendered":"PROTOTYPING MERCADO"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">My first group project of designing and prototyping<\/h3>\n\n\n\n<h5 class=\"wp-block-heading\">Mercado is an app to help prevent food waste<\/h5>\n\n\n\n<p>My first group project was during 2023 that I first started prototyping. I began with learning Figma and the tools within. Starting with using frames from small screen like iPhones to larger screen like Macbook Airs. <\/p>\n\n\n\n<p>I started to build an app to help prevent food waste specifically from grocery stores and restaurants. The objective was to create a digital system used to prevent wasted food and get food to consumers quickly. First my group started with thumbnails and sitemaps. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"535\" height=\"237\" src=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.16.34-PM.png\" alt=\"\" class=\"wp-image-172\" style=\"aspect-ratio:2.257383966244726;width:631px;height:auto\" srcset=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.16.34-PM.png 535w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.16.34-PM-300x133.png 300w\" sizes=\"auto, (max-width: 535px) 100vw, 535px\" \/><\/figure>\n\n\n\n<p>After developing our initial points, we began wireframes. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"798\" height=\"571\" src=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.17.48-PM.png\" alt=\"\" class=\"wp-image-173\" srcset=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.17.48-PM.png 798w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.17.48-PM-300x215.png 300w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.17.48-PM-768x550.png 768w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><\/figure>\n\n\n\n<p>Once determined our layout, we each made different style tiles to comply with out tone and aesthetic of the website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"848\" height=\"342\" src=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.18.04-PM.png\" alt=\"\" class=\"wp-image-174\" srcset=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.18.04-PM.png 848w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.18.04-PM-300x121.png 300w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.18.04-PM-768x310.png 768w\" sizes=\"auto, (max-width: 848px) 100vw, 848px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>With a determined layout, typography, and color palette. We started stylizing our wireframes. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"420\" src=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.17.31-PM.png\" alt=\"\" class=\"wp-image-175\" style=\"aspect-ratio:1.2142857142857142;width:629px;height:auto\" srcset=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.17.31-PM.png 510w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2023-11-06-at-6.17.31-PM-300x247.png 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Figma allowed us to stylize and prototype our website so that way when we moved onto Sublime and Github, our references were precise. Each one of us took tasks of advancing different pages that way our HTML and CSS did not overlap and cause an error. Github helped us stay updated with each change one of us would make and allow us to pull that new coding onto our own screens.  <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Mercado-Bag-with-Sticker-1024x683.png\" alt=\"\" class=\"wp-image-178\" srcset=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Mercado-Bag-with-Sticker-1024x683.png 1024w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Mercado-Bag-with-Sticker-300x200.png 300w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Mercado-Bag-with-Sticker-768x512.png 768w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/Mercado-Bag-with-Sticker.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Everyone had a different way of coding, for example I love to use lots of notes within the code to organize my sections. It was a challenge to understand everyones coding style but when together in person communication was key. Working in a team made things easier and overall shortening the process. It is only efficient if there is constant communication between group members. We used Snapchat and Slack as tools to communicate when not together in person. Since we did well with this, I think this group project went very well for our first time.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/watchmockmercado-1-1024x682.png\" alt=\"\" class=\"wp-image-176\" srcset=\"http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/watchmockmercado-1-1024x682.png 1024w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/watchmockmercado-1-300x200.png 300w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/watchmockmercado-1-768x512.png 768w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/watchmockmercado-1-1536x1023.png 1536w, http:\/\/hansm2.pairserver.com\/blog\/wp-content\/uploads\/2023\/11\/watchmockmercado-1.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I learned many things from applications like Figma and Github, but also communication skills. Working on system-based-design projects can be very efficient and quick if there is good communication. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>My first group project of designing and prototyping Mercado is an app to help prevent food waste My first group project was during 2023 that I first started prototyping. I began with learning Figma and the tools within. Starting with using frames from small screen like iPhones to larger screen like Macbook Airs. I started [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-149","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/hansm2.pairserver.com\/blog\/wp-json\/wp\/v2\/posts\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/hansm2.pairserver.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hansm2.pairserver.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hansm2.pairserver.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hansm2.pairserver.com\/blog\/wp-json\/wp\/v2\/comments?post=149"}],"version-history":[{"count":7,"href":"http:\/\/hansm2.pairserver.com\/blog\/wp-json\/wp\/v2\/posts\/149\/revisions"}],"predecessor-version":[{"id":179,"href":"http:\/\/hansm2.pairserver.com\/blog\/wp-json\/wp\/v2\/posts\/149\/revisions\/179"}],"wp:attachment":[{"href":"http:\/\/hansm2.pairserver.com\/blog\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hansm2.pairserver.com\/blog\/wp-json\/wp\/v2\/categories?post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hansm2.pairserver.com\/blog\/wp-json\/wp\/v2\/tags?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}