{"id":118,"date":"2025-02-05T13:19:40","date_gmt":"2025-02-05T13:19:40","guid":{"rendered":"https:\/\/pf.fmxut.com\/whelchel\/?page_id=118"},"modified":"2025-04-23T01:05:27","modified_gmt":"2025-04-23T01:05:27","slug":"ui-ux","status":"publish","type":"page","link":"https:\/\/pf.fmxut.com\/whelchel\/ui-ux\/","title":{"rendered":"FMX 311 UI UX"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/SHARKINFO-1024x575.png\" alt=\"\" class=\"wp-image-289\" srcset=\"https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/SHARKINFO-1024x575.png 1024w, https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/SHARKINFO-300x168.png 300w, https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/SHARKINFO-768x431.png 768w, https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/SHARKINFO-660x371.png 660w, https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/SHARKINFO.png 1245w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: Website Prototype, Info Architecture <br>Media: Adobe Illustrator<br>Class: UI\/UX<br>Professor: Santiago Echeverry<br>Term: FA 24<br>Institution: The University of Tampa<br>Description: This was my information architecture layout for the final website design. To start, I interviewed a potential client with a business idea that I could translate into a website. I carefully mapped out the main pages and subcategories for each section. Using Illustrator for the layout allowed me to easily adjust and move the different bubbles around, making it simple to refine the structure as I considered the purpose and flow of each page.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/pf.fmxut.com\/whelchel\/wp-content\/uploads\/sites\/239\/2025\/03\/Screenshot-2025-03-18-003333.png\" src=\"https:\/\/www.dropbox.com\/scl\/fi\/trbsau1z8c1e2rjm8hlac\/SofiaWhelchelXD1min.mp4?rlkey=1ckbgnc4uis50sfhq6ckqg6kz&amp;st=pav6dep6&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: Website Prototype<br>Media: Adobe XD<br>Class: UI\/UX<br>Professor: Santiago Echeverry<br>Term: FA 24<br>Institution: The University of Tampa<br>Description: This is the prototype for the final website, created in Adobe XD. Using the information architecture layout as a foundation, I built a functioning prototype to test the design and usability of each page. This process allowed me to experiment with the layout for every page, and it also helped me identify which pages needed adjustments or should be removed entirely.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.dropbox.com\/scl\/fi\/c2ew45xkr8uq2ukqaxhk5\/sharksearchfinalvid.mp4?rlkey=5yceoxn0hn2j3b1di15lahab4&amp;st=yvg6to1k&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: Website <br>Media: Dreamweaver HTML5 JavaScript<br>Class: UI\/UX<br>Professor: Santiago Echeverry<br>Term: FA 24<br>Institution: The University of Tampa<br>Description: The final website was built using HTML5 and JavaScript in Dreamweaver. Following the prototype and information architecture, I carefully constructed the website\u2019s structure, ensuring each page followed a consistent layout. Once the basic structure was in place, I added images and text, bringing the design to life and finalizing the content for each page. The purpose of the website is to provide students, researchers, and beachgoers with live tracking of shark movements.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.dropbox.com\/scl\/fi\/ngfdx5xd16y09vizw3sfj\/player.mp4?rlkey=2ho1mmzrq0cgdz0merhseppqr&amp;st=v4h8ivo7&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: Multi Media <br>Media: Dreamweaver HTML5 JavaScript<br>Class: UI\/UX<br>Professor: Santiago Echeverry<br>Term: FA 24<br>Institution: The University of Tampa<br>Description: The multimedia project was the second-to-last assignment before the final website. This project helped us visualize how the pages and transitions would come together for our website. After reviewing a few examples, I was inspired to create a player select screen, similar to what you\u2019d find in a video game.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.dropbox.com\/scl\/fi\/boszqr6v5iv99lpdh7ycy\/interactivePoemVid.mp4?rlkey=140k1bo2bko81wo1qoolxbce5&amp;st=bosybei0&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Title: Interactive Poem<br>Media: Dreamweaver HTML5 JavaScript<br>Class: UI\/UX<br>Professor: Santiago Echeverry<br>Term: FA 24<br>Institution: The University of Tampa<br>Description: For the interactive poem project, we focused on applying various effects and transitions. This experience proved invaluable for the final project, especially when it came to using visual cues to guide the user. I came up with the idea to turn the poem into a clock, with the sonnets acting as the hour markers. While I wish the numerals looked a bit less like sentences, I\u2019m overall pleased with how the clock turned out and feel that I successfully achieved the intended effect.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Title: Website Prototype, Info Architecture Media: Adobe IllustratorClass: UI\/UXProfessor: Santiago EcheverryTerm: FA 24Institution: The University of TampaDescription: This was my&hellip; <a class=\"read-more\" href=\"https:\/\/pf.fmxut.com\/whelchel\/ui-ux\/\">Read more <span class=\"screen-reader-text\">FMX 311 UI UX<\/span><\/a><\/p>\n","protected":false},"author":234,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","footnotes":""},"class_list":["post-118","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/pages\/118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/users\/234"}],"replies":[{"embeddable":true,"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":12,"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/pages\/118\/revisions"}],"predecessor-version":[{"id":470,"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/pages\/118\/revisions\/470"}],"wp:attachment":[{"href":"https:\/\/pf.fmxut.com\/whelchel\/wp-json\/wp\/v2\/media?parent=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}