UI Workflow

Today I want to discuss the user interaction workflow. Buggy Bogey is a whimsical party golf game, so I wanted to bring that feeling into the UI art. Before I start designing, I like to create a mood board which is a collection of UI art from other games that are similar to ours, this helps get ideas flowing. I decided to start with the title of the game so I could base some of the UI off that feeling and come to decision about main colors. I designed the font for the title to be bubble, also adjusted the letter setup to look messy, giving it that fun feeling. When I am designing on Illustrator its always good to create multiple iterations of the design so you can keep adjusting as you go. I thought it would be fun to incorporate the player character with the golf ball instead of the letter “O” in Bogey. It turned out well and the group liked it. Once I was finished, I collaborated with the group, and we all decided on one. We also decided on the color choices for the UI. Yellow, purple, and light blue was what we were going forward with.

A unique aspect to Buggy Bogey is the use of phone controls. We wanted to have a join and a control screen with a pause menu. Throughout the design process I worked closely with the UI programmers to make sure my art would match what they had in plan. Again, my workflow starts with a mood board and many different iterations. Starting with the background of the phone will help me make better decisions about design throughout the process. I created a diagonal pattern with different hues of the same base color, the first iteration was purple, but we ended up doing light blue for the background. After the background I wanted to implement the control interactions, the best decision was to match the aim and hit controls with the title letters, using the yellow and purple colors. I created the arrow designs as to how a player would interact with it, making the hit arrow small at the point and thick at the base. We were satisfied with the end results and started to use it in our playtesting.

The workflow was starting to become more efficient now that we had finalized UI that was implemented into the game. With a set slate of design, I continued to create more including, on screen player icons, pause menu, and a main lobby that still need work. A successful UI palette brings life to the game and makes it clear for the player to use. Without the fun UI in Buggy Bogey, it would not be possible to feel the fun, wacky style we are trying to achieve.