{"id":559,"date":"2025-01-04T00:06:06","date_gmt":"2025-01-04T00:06:06","guid":{"rendered":"https:\/\/sites.wsagames.com\/jr16g23\/?page_id=559"},"modified":"2025-01-19T20:16:25","modified_gmt":"2025-01-19T20:16:25","slug":"ui-experiments","status":"publish","type":"page","link":"https:\/\/sites.wsagames.com\/jr16g23\/ui-experiments\/","title":{"rendered":"UI experiments"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

For the start screen I used a downloaded font called Aquatico. I wrote out the name of my game in Photoshop<\/em> and converted the text to a smart object so I could add effects. I added a wind filter as well as ripple to look like to text has some movement from the water. I also wrote out: new game, continue and settings using the same process.<\/p>\n\n\n\n

Look at my font process here: Load screen\/logo design<\/a><\/p>\n\n\n\n

Once I was happy with the text I imported all my assets to Procreate<\/em> where I brightened up the text with the lightbrush tool and sketched a butterfly icon.<\/p>\n\n\n\n

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

Once I had created an inventory and anxiety meter I began to play around with how they would look in-game.<\/p>\n\n\n\n

For the first experiment I placed the anxiety meter and inventory in the bottom left corner. I didn’t like how this looked as the rest of the screen had too much space.<\/p>\n\n\n\n

For the second experiment I moved the inventory bar more central and the anxiety meter in the top left corner. I loved the placement of this however players would have a hard time trying to read the anxiety meter.<\/p>\n\n\n\n

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

So players could see the anxiety meter better I highlighted around the bar using the lightbrush pen in Procreate<\/em>. I also added a glow around the bottom of the inventory to give more definition. <\/p>\n\n\n\n

I love the layout and I’m happy with how this turned out.<\/p>\n\n\n\n

Anxiety meter animations:<\/strong><\/p>\n\n\n\n