{"id":132,"date":"2022-11-01T20:42:59","date_gmt":"2022-11-01T20:42:59","guid":{"rendered":"https:\/\/comdma.com\/kuhn7\/?p=132"},"modified":"2022-11-01T20:48:17","modified_gmt":"2022-11-01T20:48:17","slug":"dma-217-project-2-mobile-desktop-website","status":"publish","type":"post","link":"https:\/\/comdma.com\/kuhn7\/2022\/11\/01\/dma-217-project-2-mobile-desktop-website\/","title":{"rendered":"DMA217 Project #2: Mobile\/Desktop Website"},"content":{"rendered":"\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 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%\">\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"390\" height=\"844\" data-id=\"150\" src=\"https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Home-Mobile-5.png\" alt=\"\" class=\"wp-image-150\" srcset=\"https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Home-Mobile-5.png 390w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Home-Mobile-5-139x300.png 139w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Home-Mobile-5-92x200.png 92w\" sizes=\"auto, (max-width: 390px) 100vw, 390px\" \/><figcaption>Home Mobile<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"390\" height=\"844\" data-id=\"152\" src=\"https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Vintage-Mobile-3.png\" alt=\"\" class=\"wp-image-152\" srcset=\"https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Vintage-Mobile-3.png 390w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Vintage-Mobile-3-139x300.png 139w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Vintage-Mobile-3-92x200.png 92w\" sizes=\"auto, (max-width: 390px) 100vw, 390px\" \/><figcaption>Vintage Mobile<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"1024\" src=\"https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Home-Desktop-6.png\" alt=\"\" class=\"wp-image-153\" srcset=\"https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Home-Desktop-6.png 1440w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Home-Desktop-6-300x213.png 300w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Home-Desktop-6-1024x728.png 1024w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Home-Desktop-6-768x546.png 768w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Home-Desktop-6-1250x889.png 1250w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Home-Desktop-6-200x142.png 200w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><figcaption>Home Desktop<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"1024\" src=\"https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Vintage-Desktop-3.png\" alt=\"\" class=\"wp-image-151\" srcset=\"https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Vintage-Desktop-3.png 1440w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Vintage-Desktop-3-300x213.png 300w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Vintage-Desktop-3-1024x728.png 1024w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Vintage-Desktop-3-768x546.png 768w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Vintage-Desktop-3-1250x889.png 1250w, https:\/\/comdma.com\/kuhn7\/wp-content\/uploads\/sites\/117\/2022\/11\/Vintage-Desktop-3-200x142.png 200w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><figcaption>Vintage Desktop<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p>Visit Dream Drives <a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/proto\/mDdwk9Gf7E5wk3S8d2bbBF\/Kuhn_DMA217_PRJ2?node-id=216%3A13&amp;scaling=scale-down&amp;page-id=202%3A2&amp;starting-point-node-id=216%3A13&amp;show-proto-sidebar=1\" target=\"_blank\">Here<\/a>!<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>What did you learn?<\/li><\/ol>\n\n\n\n<p>As I was moving through this project, I began to understand components and variants in great detail. Having this skill allowed to progress relatively quickly, despite a few hiccups here and there. I also learned more about Auto Layout and its importance in Figma.<\/p>\n\n\n\n<p>    2. What was easy?<\/p>\n\n\n\n<p>The easy portion of this project involved creating the Desktop and Mobile Pages and adding functionality for navigation. I enjoyed working with several different layout schemas and used a variety of colors which gave the website a sleek look and feel.<\/p>\n\n\n\n<p>    3. What was challenging?<\/p>\n\n\n\n<p>The challenging aspect of this project was creating an idea\/concept for the site. Deciding the purpose of my site came with time, but continued to evolve after thinking about the end-user. Another tricky factor was designing the layout to make each webpage feel fluid.<\/p>\n\n\n\n<p>    4. How could your submission be improved<\/p>\n\n\n\n<p>Overall, I was quite pleased with the result considering the amount of content on certain pages. However, I would&#8217;ve changed the Radio Menu size for the &#8220;Vintage, Luxury, and Off-Road&#8221; Desktop Pages. Also, I tried to blur the background image for the Desktop and Mobile homepages, but was unable to find a way to do so. I know how to blur any image in Figma, but didn&#8217;t see  a &#8220;blur image&#8221; option for the background image embedded in the frame. Including a feature for scrolling pictures on the Mobile Portfolio Page would&#8217;ve been cool but I didn&#8217;t have time for it.<\/p>\n\n\n\n<p>    5. How could I improve the assignment next class?<\/p>\n\n\n\n<p>For this project, I liked all of the tasks at hand. For the future, I&#8217;d recommend covering different options when approaching the overlay design for the Mobile View.<\/p>\n\n\n\n<p>    6. How might you apply your knowledge in future assignments or work scenarios?<\/p>\n\n\n\n<p>Having experience with this project and the design process has given me the ability to design a simple webpage concept in Figma and use it to write HTML\/CSS code. This skill is incredibly useful as it saves the designer from having to brainstorm a foundation. I like to think of Figma as a digital means for drawing out ideas on paper and using them for applications\/projects<\/p>\n\n\n\n<p>    7. How did a specific reading or video inspire or help you? <\/p>\n\n\n\n<p>Dream Drives is a website where the user to &#8220;view&#8221; and &#8220;rent&#8221; different vehicles for a  specific purpose or desire, in this case, a vacation. These cars are found in three variations: Vintage, Luxury, and Off-Road. While I originally focused on my product involving Convertible-type cars, I decided to broaden out to any outdoor\/summer vehicle. This allowed for my site to have more practicality but retain its core principle of offering Convertibles. Each vehicle  or &#8220;Dream Drive&#8221; listed on the site is intended to appeal its audience, hence the reason for two distinctive vehicles of each variation. <\/p>\n\n\n\n<p>For the cars themselves, I attempted to make each spec as realistic as possible. The &#8220;Rental Price&#8221; is based on several car rental sites that offered models and each vehicle&#8217;s &#8220;Color&#8221; pertains to a Factory Color found on the manufacturer&#8217;s website\/catalog. In regards to pictures of the vehicles, I used Pexels and Unsplash, two services that offer Royalty-Free images. These sites assisted me in creating the elements found on each vehicle variation.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.autocolorlibrary.com\/\">Car Color Catalog<\/a><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.pexels.com\/\" data-type=\"URL\" data-id=\"https:\/\/www.pexels.com\/\" target=\"_blank\">Pexels<\/a> <\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/unsplash.com\/\" data-type=\"URL\" data-id=\"https:\/\/unsplash.com\/\" target=\"_blank\">Unsplash<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visit Dream Drives Here! What did you learn? As I was moving through this project, I began to understand components and variants in great detail. Having this skill allowed to progress relatively quickly, despite a few hiccups here and there. I also learned more about Auto Layout and its importance in Figma. 2. What was [&hellip;]<\/p>\n","protected":false},"author":111,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-132","post","type-post","status-publish","format-standard","hentry","category-dma217"],"taxonomy_info":{"category":[{"value":6,"label":"DMA217"}]},"featured_image_src_large":false,"author_info":{"display_name":"kuhn7","author_link":"https:\/\/comdma.com\/kuhn7\/author\/kuhn7\/"},"comment_info":"","category_info":[{"term_id":6,"name":"DMA217","slug":"dma217","term_group":0,"term_taxonomy_id":6,"taxonomy":"category","description":"","parent":0,"count":2,"filter":"raw","cat_ID":6,"category_count":2,"category_description":"","cat_name":"DMA217","category_nicename":"dma217","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/comdma.com\/kuhn7\/wp-json\/wp\/v2\/posts\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comdma.com\/kuhn7\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/comdma.com\/kuhn7\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/comdma.com\/kuhn7\/wp-json\/wp\/v2\/users\/111"}],"replies":[{"embeddable":true,"href":"https:\/\/comdma.com\/kuhn7\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":4,"href":"https:\/\/comdma.com\/kuhn7\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":160,"href":"https:\/\/comdma.com\/kuhn7\/wp-json\/wp\/v2\/posts\/132\/revisions\/160"}],"wp:attachment":[{"href":"https:\/\/comdma.com\/kuhn7\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/comdma.com\/kuhn7\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/comdma.com\/kuhn7\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}