{"id":82,"date":"2025-07-07T04:05:26","date_gmt":"2025-07-07T04:05:26","guid":{"rendered":"https:\/\/sites.create.ou.edu\/des3643\/?p=82"},"modified":"2026-04-01T14:43:28","modified_gmt":"2026-04-01T14:43:28","slug":"week-11-12-prototypehi-fi","status":"publish","type":"post","link":"https:\/\/sova.ourcloud.ou.edu\/des3643\/2025\/07\/07\/week-11-12-prototypehi-fi\/","title":{"rendered":"Week 11-12: Prototype(Hi-Fi)"},"content":{"rendered":"\n<p>You will begin developing a high-fidelity prototype based on the feedback gathered from your low-fidelity prototype evaluation. The goal is to create polished, functional UI designs and to conduct a heuristic evaluation to assess the usability of your prototype.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Topics<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hi-Fi Prototype<\/li>\n\n\n\n<li>Figma Recap<br>\u2013 Autolayout, Variables, Components, Slots<br>\u2013 Micro interactions (e.g., button state change)<br>\u2013 Animation(e.g., loaders, spinners)<br>\u2013 Modes (e.g., dark\/light mode and compact\/relaxed mode)<\/li>\n\n\n\n<li>Image generation using ChatGPT, Adobe Firefly<\/li>\n\n\n\n<li>Video generation using Sora<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Studio Activities<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Start developing Hi-Fi prototype in Figma<\/li>\n\n\n\n<li>Make sure to organize your components using the Atomic Design Framework e.g., Atoms (headings, paragraphs, icons, buttons, etc.), Molecules and a Template Use variables and local styles to maintain consistency (typography, spacing, and components)<\/li>\n\n\n\n<li>Feel free to use this starter template: <a href=\"https:\/\/www.figma.com\/design\/XDwy1GW08PDi8Yx6HRSZNS\/UX-Project-Portfolio?node-id=2842-129&amp;t=9GxCIGv8pVPUctiW-0\">https:\/\/www.figma.com\/design\/XDwy1GW08PDi8Yx6HRSZNS\/UX-Project-Portfolio?node-id=2842-129&amp;t=9GxCIGv8pVPUctiW-0<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Useful Links<\/h2>\n\n\n\n<p><strong>Figma<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Figma Tutorial: <a href=\"https:\/\/youtube.com\/playlist?list=PLv3Jx2LapDOulLcenPYxpiOc21AuSGqiV&amp;si=S9G0klhMyDrg79su\">https:\/\/youtube.com\/playlist?list=PLv3Jx2LapDOulLcenPYxpiOc21AuSGqiV&amp;si=S9G0klhMyDrg79su<\/a><\/li>\n\n\n\n<li>Instagram prototype file: <a href=\"https:\/\/www.figma.com\/design\/JmuNpz7sxlDSdQMA0WI4OY\/Instagram-UI-Design?node-id=24-429&amp;p=f&amp;t=9GxCIGv8pVPUctiW-0\">https:\/\/www.figma.com\/design\/JmuNpz7sxlDSdQMA0WI4OY\/Instagram-UI-Design?node-id=24-429&amp;p=f&amp;t=9GxCIGv8pVPUctiW-0<\/a><\/li>\n\n\n\n<li>Figma Release Notes: <a href=\"https:\/\/www.figma.com\/release-notes\/\">https:\/\/www.figma.com\/release-notes\/<\/a><\/li>\n\n\n\n<li>Apple UI Kit: <a href=\"https:\/\/www.figma.com\/community\/file\/1527721578857867021\">https:\/\/www.figma.com\/community\/file\/1527721578857867021<\/a><\/li>\n<\/ul>\n\n\n\n<p><strong>AIX Design<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>AIX Examples, AIX Design patterns, actionable cheatsheets: <a href=\"https:\/\/www.aiverse.design\/browse\">https:\/\/www.aiverse.design\/browse<\/a><\/li>\n\n\n\n<li>Free online introduction to AI for non-experts:&nbsp;<a href=\"https:\/\/www.elementsofai.com\/\">https:\/\/www.elementsofai.com\/<\/a><\/li>\n\n\n\n<li>AI-powered applications:\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/aiagentsdirectory.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/theresanaiforthat.com\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/aiagentsdirectory.com\/landscape\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/aiagentsdirectory.com\/landscape<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>AI image generation<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.adobe.com\/products\/firefly\/ai-generated-examples\/image-prompts.html \">https:\/\/www.adobe.com\/products\/firefly\/ai-generated-examples\/image-prompts.html <\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.microsoft.com\/en-us\/microsoft-copilot\/for-individuals\/do-more-with-ai\/ai-art-prompting-guide\/image-prompting-101?form=MA13Q6\">Microsoft: Image Prompting 101<\/a><\/li>\n<\/ul>\n\n\n\n<p>Sora [Discontinued] Tutorials: <a href=\"https:\/\/academy.openai.com\/public\/collections\/sora-tutorials-2025-03-11\">https:\/\/academy.openai.com\/public\/collections\/sora-tutorials-2025-03-11<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>You will begin developing a high-fidelity prototype based on the feedback gathered from your low-fidelity prototype evaluation. The goal is to create polished, functional UI designs and to conduct a heuristic evaluation to assess the usability of your prototype. Topics Studio Activities Useful Links Figma AIX Design AI image generation Sora [Discontinued] Tutorials: https:\/\/academy.openai.com\/public\/collections\/sora-tutorials-2025-03-11<\/p>\n","protected":false},"author":23,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-82","post","type-post","status-publish","format-standard","hentry","category-schedule","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/sova.ourcloud.ou.edu\/des3643\/wp-json\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sova.ourcloud.ou.edu\/des3643\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sova.ourcloud.ou.edu\/des3643\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/des3643\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/des3643\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":34,"href":"https:\/\/sova.ourcloud.ou.edu\/des3643\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":822,"href":"https:\/\/sova.ourcloud.ou.edu\/des3643\/wp-json\/wp\/v2\/posts\/82\/revisions\/822"}],"wp:attachment":[{"href":"https:\/\/sova.ourcloud.ou.edu\/des3643\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/des3643\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sova.ourcloud.ou.edu\/des3643\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}