{"id":319,"date":"2023-03-21T01:11:29","date_gmt":"2023-03-21T01:11:29","guid":{"rendered":"https:\/\/fmx298.santiago.bz\/maddy\/?page_id=319"},"modified":"2023-05-05T13:59:03","modified_gmt":"2023-05-05T13:59:03","slug":"ui-ux","status":"publish","type":"page","link":"https:\/\/fmx298.santiago.bz\/maddy\/ui-ux\/","title":{"rendered":"UI\/UX"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/05\/website.png\" src=\"https:\/\/www.dropbox.com\/s\/o79kr8eyc7bgpv1\/floraldesign.mov?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: AJ Floral Design Website <br>MEDIA: CSS3 and HTML5<br>SOFTWARE: Dreamweaver<br>HARDWARE: Macbook Pro 2019<br>SPECIFICATIONS: 1920X1080px<br>DURATION: 1&#8217;15&#8221;<br>CLASS: FMX 311 UI\/UX<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 23<br>INSTITUTION: University of Tampa<br>DESCRIPTION: &#8220;AJ Floral Design Website&#8221; is a fully functional website created with HTML5 and CSS3 using Dreamweaver. Each page was created with code and linked together using a main CSS file. This project is for non-commercial use and is for education purposes only. Most images were my mom&#8217;s own floral arrangements and the video on the home page shows my mom arranging roses. Some of the product images were stock because at the time of this project, official arrangements had not been made yet. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/animatedres.png\" src=\"https:\/\/www.dropbox.com\/s\/x5jmco6w1tsbron\/animatedres.mov?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Animated Resume <br>MEDIA: CSS3 and HTML5<br>SOFTWARE: Dreamweaver<br>HARDWARE: Macbook Pro 2019<br>SPECIFICATIONS: 1920X1080px<br>DURATION: 1&#8217;02&#8221;<br>CLASS: FMX 311 UI\/UX<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 23<br>INSTITUTION: University of Tampa<br>DESCRIPTION: &#8220;Animated Resume&#8221; is a piece created in CSS and HTML5. This resume contains audio of myself, communicating to the user what they can interact with on the page. The words and arrows appearing are coded to move along with the sound that is played. After my recording lets the audience know what they can click on, background music plays and the user is free to move the mouse along any of the headers to see some of my work. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/Screenshot-2023-04-16-at-2.04.39-PM.png\" src=\"https:\/\/www.dropbox.com\/s\/h1x638cv4xnxxrs\/Screen%20Recording%202023-04-16%20at%202.45.25%20PM.mov?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Kinetic Typography<br>MEDIA: CSS3 and HTML5<br>SOFTWARE: Dreamweaver<br>HARDWARE: Macbook Pro 2019<br>SPECIFICATIONS: 1920X1080px<br>DURATION: 0&#8217;15&#8221;<br>CLASS: FMX 311 UI\/UX<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 23<br>INSTITUTION: University of Tampa<br>DESCRIPTION: &#8220;Kinetic Typography&#8221; is a piece using text from the song &#8216;DEATH&#8217; by &#8216;Melanie Martinez.&#8217; I really love the message that is conveyed in DEATH and wanted to portray someone opening a letter from a loved one they lost. I think that everyone at some point wants to have closure of their past loved ones&#8217; and that they are always with them. When the mouse moves around the unreadable lines, it turns into text creating a readable letter. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/Screenshot-2023-04-16-at-2.15.40-PM.png\" src=\"https:\/\/www.dropbox.com\/s\/5kxd4mh7hrsm3v7\/Screen%20Recording%202023-04-16%20at%202.48.47%20PM.mov?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Website Prototype<br>MEDIA: UI\/UX<br>SOFTWARE: Adobe XD<br>HARDWARE: Macbook Pro 2019<br>SPECIFICATIONS: 1920X1080px<br>DURATION: 0&#8217;30&#8221;<br>CLASS: FMX 311 UI\/UX<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 23<br>INSTITUTION: University of Tampa<br>DESCRIPTION: &#8220;Website Prototype&#8221; is a test site for my mom&#8217;s company, &#8220;AJ Floral Design.&#8221; Using Adobe XD, I created a mock-up of the site and how it would function page to page. Not all of the final content was included in the demo, but I included a good number of products to see how the pages would ideally function. I also added a swiping feature on the home page to showcase different types of floral arrangements and a cart feature. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted poster=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/prototype.png\" src=\"https:\/\/www.dropbox.com\/s\/rzy2vnkya7g6izx\/Screen%20Recording%202023-04-16%20at%202.51.51%20PM.mov?raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Functionality Prototype<br>MEDIA: UI\/UX<br>SOFTWARE: Adobe XD<br>HARDWARE: Macbook Pro 2019<br>SPECIFICATIONS: 1920X1080px<br>DURATION: 0&#8217;16&#8221;<br>CLASS: FMX 311 UI\/UX<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 23<br>INSTITUTION: University of Tampa<br>DESCRIPTION: &#8220;Functionality Prototype&#8221; is a basic structure of how the website for &#8216;AJ Floral Design&#8217; was to run using Adobe XD. I created a few tabs of how my client wanted the website to function. Later, these were then simplified to make the website&#8217;s content easier to find. Each tab is connected to a page which would lead the customer to the specified page depending on what was clicked. The cart and home buttons also take the customer to those respective pages. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/AJ-Floral-Design-Site-Map-.png\" alt=\"\" class=\"wp-image-407\" srcset=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/AJ-Floral-Design-Site-Map-.png 1024w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/AJ-Floral-Design-Site-Map--300x225.png 300w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/AJ-Floral-Design-Site-Map--768x576.png 768w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/AJ-Floral-Design-Site-Map--660x495.png 660w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Site Map<br>MEDIA: UI\/UX<br>SOFTWARE: Canva<br>HARDWARE: Macbook Pro 2019<br>SPECIFICATIONS: 1920X1080px<br>CLASS: FMX 311 UI\/UX<br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 23<br>INSTITUTION: University of Tampa<br>DESCRIPTION: &#8220;Site Map&#8221; is an infographic describing the content for a website for my client &#8216;AJ Floral Design.&#8217; Using Canva, I was able to create a detailed plan of how the website was to function. This includes the details for the pages that the client wanted to include and the ideal domain name. This was later used to help plan the next few projects: the functionality and website prototypes. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/Screenshot-2023-04-16-at-2.32.53-PM-1024x573.png\" alt=\"\" class=\"wp-image-408\" srcset=\"https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/Screenshot-2023-04-16-at-2.32.53-PM-1024x573.png 1024w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/Screenshot-2023-04-16-at-2.32.53-PM-300x168.png 300w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/Screenshot-2023-04-16-at-2.32.53-PM-768x429.png 768w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/Screenshot-2023-04-16-at-2.32.53-PM-1536x859.png 1536w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/Screenshot-2023-04-16-at-2.32.53-PM-660x369.png 660w, https:\/\/fmx298.santiago.bz\/maddy\/wp-content\/uploads\/sites\/151\/2023\/04\/Screenshot-2023-04-16-at-2.32.53-PM.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">TITLE: Pain Point<br>MEDIA: UI\/UX<br>SOFTWARE: Canva<br>HARDWARE: Macbook Pro 2019<br>SPECIFICATIONS: 1920X1080px<br>CLASS: FMX 311 UI\/UX <br>PROFESSOR: Santiago Echeverry<br>SEMESTER \/ TERM: SP 23<br>INSTITUTION: University of Tampa<br>LINK:<a href=\"https:\/\/www.canva.com\/design\/DAFZ5u3SAew\/UVSVJ_WREF9F5hRbIINBSA\/edit?utm_content=DAFZ5u3SAew&amp;utm_campaign=designshare&amp;utm_medium=link2&amp;utm_source=sharebutton\">https:\/\/www.canva.com\/design\/DAFZ5u3SAew\/UVSVJ_WREF9F5hRbIINBSA\/edit?utm_content=DAFZ5u3SAew&amp;utm_campaign=designshare&amp;utm_medium=link2&amp;utm_source=sharebutton<\/a><br>DESCRIPTION: &#8220;Pain Point&#8221; is a presentation created on Canva. This presentation was used to identify my client&#8217;s strengths and weaknesses with their business &#8216;AJ Floral Design.&#8217; It was then used to help create a site that would address the issues and solve any problems the client had with creating a successful business. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>TITLE: AJ Floral Design Website MEDIA: CSS3 and HTML5SOFTWARE: DreamweaverHARDWARE: Macbook Pro 2019SPECIFICATIONS: 1920X1080pxDURATION: 1&#8217;15&#8221;CLASS: FMX 311 UI\/UXPROFESSOR: Santiago EcheverrySEMESTER&hellip; <a class=\"read-more\" href=\"https:\/\/fmx298.santiago.bz\/maddy\/ui-ux\/\">Read more <span class=\"screen-reader-text\">UI\/UX<\/span><\/a><\/p>\n","protected":false},"author":147,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","footnotes":""},"class_list":["post-319","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/pages\/319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/users\/147"}],"replies":[{"embeddable":true,"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/comments?post=319"}],"version-history":[{"count":9,"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/pages\/319\/revisions"}],"predecessor-version":[{"id":484,"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/pages\/319\/revisions\/484"}],"wp:attachment":[{"href":"https:\/\/fmx298.santiago.bz\/maddy\/wp-json\/wp\/v2\/media?parent=319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}