{"id":324,"date":"2023-11-20T10:51:00","date_gmt":"2023-11-20T10:51:00","guid":{"rendered":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/?p=324"},"modified":"2023-11-20T10:51:19","modified_gmt":"2023-11-20T10:51:19","slug":"web-for-desktop-design","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/entire-project-2a\/project-2a\/web-for-desktop-design\/","title":{"rendered":"Web for Desktop Design"},"content":{"rendered":"\n

In Week 7, I successfully brought my desktop design to a high-fidelity standard, incorporating prototype elements that provide a glimpse into its potential real-world application. Although initially challenging, this process became an enjoyable learning experience, allowing me to delve into new software and acquire skills that undoubtedly contribute to my future career. Despite Figma’s occasional difficulty and nuances, I’ve grasped its essentials, paving the way for smoother navigation in future lessons and projects.<\/p>\n\n\n\n

I endeavoured ored to infuse my site with interactive elements, incorporating various animations like changing color buttons, scrollable pop-ups, click-to-scroll features, overlays, number spinners\/variables, and an image carousel. This effort aimed to make the site, even though not live, as interactive as possible, providing users with a tangible sense of its look and feel. While some animation concepts were familiar from a university workshop, others required self-teaching or collaboration with a classmate, Max. <\/p>\n\n\n\n

\n
\n
\"\"
Colour changing buttons<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Click to scroll feature<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"
Number Spinner<\/figcaption><\/figure><\/div><\/div>\n\n\n\n
\n
\"\"
Image carousel <\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Overcoming the challenge of researching animations without the proper terminology was significant, as it prompted me to explore and comprehend the intricacies independently\u2014a process I believe will prove more beneficial in the long run.<\/p>\n\n\n\n

Taking the design a step further, I introduced small but thematic animations on each game page to enhance the gaming atmosphere. For instance, on the Minecraft page, a miniature Minecraft Steve runs along the top of the banner, while on the <\/p>\n\n\n\n

Super Mario page, three coins roll across the banner. These animations were crafted in Adobe After Effects, involving the illustration of drawings in Illustrator and subsequent animation adjustments. Though this proved somewhat challenging and time-consuming due to my prolonged break from After Effects, I swiftly regained proficiency. The animations added an extra layer to the website, enriching the gaming experience for the target audience.<\/p>\n\n\n\n

Looking ahead, I aspire to refine these animations further and explore advanced features in After Effects, such as exporting videos with transparent backgrounds for seamless integration into the design.<\/p>\n\n\n\n

In terms of potential in-game animations for the website, ideas include creating a rain effect on the drink section or incorporating iconic eating sounds. While considering sounds from the Mario Games, I remain thoughtful about maintaining professionalism and avoiding any potential tackiness.<\/p>\n\n\n\n

Overall, my desktop design progress has been a source of satisfaction, not only in skill acquisition but also in producing work aligned with the project brief. Despite a rocky start due to the project’s initial complexity, I’ve found a rhythm in the site design process and am excited to confidently transition to the mobile design phase and Project 4, “Design for Good,” feeling on track and engaged in the course.<\/p>\n","protected":false},"excerpt":{"rendered":"

In Week 7, I successfully brought my desktop design to a high-fidelity standard, incorporating prototype elements that provide a glimpse into its potential real-world application. Although initially challenging, this process became an enjoyable learning experience, allowing me to delve into new software and acquire skills that undoubtedly contribute to my future career. Despite Figma’s occasional difficulty and nuances, I’ve grasped its essentials, paving the way for smoother navigation in future lessons and projects. I endeavoured ored to infuse my site with interactive elements, incorporating various animations like changing color buttons, scrollable pop-ups, click-to-scroll features, overlays, number spinners\/variables, and an image carousel. This effort aimed to make the site, even though not live, as interactive as possible, providing users with a tangible sense of its look and feel. While some animation concepts were familiar from a university workshop, others required self-teaching or collaboration with a classmate, Max.  Overcoming the challenge of researching animations without the proper terminology was significant, as it prompted me to explore and comprehend the intricacies independently\u2014a process I believe will prove more beneficial in the long run. Taking the design a step further, I introduced small but thematic animations on each game page to enhance the gaming atmosphere. For instance, on the Minecraft page, a miniature Minecraft Steve runs along the top of the banner, while on the  Super Mario page, three coins roll across the banner. These animations were crafted in Adobe After Effects, involving the illustration of drawings in Illustrator and subsequent animation adjustments. Though this proved somewhat challenging and time-consuming due to my prolonged break from After Effects, I swiftly regained proficiency. The animations added an extra layer to the website, enriching the gaming experience for the target audience. Looking ahead, I aspire to refine these animations further and explore advanced features in After Effects, such as exporting videos with transparent backgrounds for seamless integration into the design. In terms of potential in-game animations for the website, ideas include creating a rain effect on the drink section or incorporating iconic eating sounds. While considering sounds from the Mario Games, I remain thoughtful about maintaining professionalism and avoiding any potential tackiness. Overall, my desktop design progress has been a source of satisfaction, not only in skill acquisition but also in producing work aligned with the project brief. Despite a rocky start due to the project’s initial complexity, I’ve found a rhythm in the site design process and am excited to confidently transition to the mobile design phase and Project 4, “Design for Good,” feeling on track and engaged in the course.<\/p>\n","protected":false},"author":1,"featured_media":325,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts\/324"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/comments?post=324"}],"version-history":[{"count":2,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts\/324\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts\/324\/revisions\/331"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/media\/325"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/media?parent=324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/categories?post=324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/tags?post=324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}