{"id":700,"date":"2024-11-25T16:58:57","date_gmt":"2024-11-25T16:58:57","guid":{"rendered":"https:\/\/sites.wsagames.com\/is3g23\/?page_id=700"},"modified":"2024-12-09T16:23:48","modified_gmt":"2024-12-09T16:23:48","slug":"ui-design-screen-mockups","status":"publish","type":"page","link":"https:\/\/sites.wsagames.com\/is3g23\/ui-design-screen-mockups\/","title":{"rendered":"UI Design & Screen\u00a0Mockups"},"content":{"rendered":"\n

All development of UI & HUD can be found here<\/a>.<\/strong><\/p>\n\n\n\n

Start up screen:<\/strong><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

Program used: Procreate + Canva<\/strong><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

PC Mockup<\/strong><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Laptop Mockup<\/strong><\/p>\n\n\n\n

Final HUD Designs<\/strong><\/p>\n\n\n

\n
\"\"
Heart Rate Monitor<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"
Emily’s Mask<\/figcaption><\/figure>\n<\/div>\n\n\n

HUD Icons<\/strong><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

HUD Animations<\/strong><\/p>\n\n\n\n

Down below are the animations for the HUD in the game, within the game at certain points the mask will pulse to let players know they need to click on the mask, in the classroom there’s even a demonstration of the mask turning from coloured to greyed out. Also there is an animation of the heart rate monitor that will happen in scene 10.<\/p>\n\n\n\n