{"id":685,"date":"2024-11-25T16:10:30","date_gmt":"2024-11-25T16:10:30","guid":{"rendered":"https:\/\/sites.wsagames.com\/is3g23\/?page_id=685"},"modified":"2024-12-09T16:18:58","modified_gmt":"2024-12-09T16:18:58","slug":"hud-ui-experiments","status":"publish","type":"page","link":"https:\/\/sites.wsagames.com\/is3g23\/hud-ui-experiments\/","title":{"rendered":"HUD & UI Experiments"},"content":{"rendered":"\n

Update: The final outcome of these experiments can be found here<\/a><\/strong>.<\/p>\n\n\n\n

Here are some of my rough digital composition ideas that I made of the starting screen. Here I did 6 iterations and made comments of each one to find out which ones I thought were best. I liked #4 the most, followed by #1 despite it looking quite basic. However, after some consideration I felt like #4 was the right choice as it was clear and concise, had good positioning, followed a liner style and was easy to read. <\/p>\n\n\n\n

Side Note: Font used Marker Felt Wide<\/strong><\/p>\n\n\n\n

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

I did a couple of UI experiments. I changed the sizing and positioning of the heart rate monitor to see which composition was most efficient and I also show the mask of Emily’s face as another UI component.<\/p>\n\n\n\n

\n
\"\"
Iteration 1<\/figcaption><\/figure>\n\n\n\n
\"\"
Iteration 2<\/figcaption><\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Palettes and brushes used can be found here<\/a> for reference.<\/strong><\/p>\n\n\n\n

I think during scene 10 I want the players to feel like they are really experiencing the panic attack and so having a bigger heart rate monitor could really help to give that feeling, I also might want to consider animating the monitor to be more realistic I could even look at making it bigger to go across the whole lower half of the screen.<\/p>\n\n\n\n

Animated UI<\/strong><\/p>\n\n\n\n