top of page

UI/UX Design

Sovereign Soul HUD - Mark One

         Sovereign Soul is a project I have going based off my book series of the same name. The plan is to make a 3rd person adventure/RPG title where a few party members follow you on the open world map. More details can be found on the Game Design Doc in the named section!

        Anyway, the point is that the assignment I did for my class was to create this HUD as part of a user interface. It isn't fully functional in a game yet, but I made the assets able to be sectioned out and modified later on. The minimap is a sample of one of the game maps, redone in Inkarnate and modified in such a way to look like a legitimate minimap. I added cursors for the character location and quests. The fonts used are Berlin Sans FB for the body text, and Rift Demi or Bold for the headers, time, and the N icon. The screenshot used to sample the HUD is not my own, but was placed in to see what my HUD looks like against the background and style I intend to pursue in my game.

        I include a small button prompt near the character to activate their individual skill, which differs based on which character is in control, but I aimed for a very minimal HUD.

  • My goal was to make a minimal interface that doesn't block out a lot of the gameplay. I liked the gold text against the bg with a translucient window behind it, making sure it stands out.

  • The wheel around the minimap could use some highlights or recoloring to further stand out.

  • I later faded the character healthbars since I don't want them always shown unless battle happens, and then to disappear when characters recover HP.

  • Progress pic of just after I finished the minimap, showing the layers. I messed around with effects on the graphics to see what I could create. I created icons for the player and quest objectives, using transparency and effects for the light illusion.

  • I wanted weather and time to be some of the only other factors to the map, but gave them some space.

  • Distance to a quest is not an in-your-face statistic and gives some freedom for exploring players.

  • Progress pic of just after I assembled the character HUD. Art is official art I commissioned for my character (credits to Tyler Girard-Meli!)

  • I used stroke to outline the image so it stands out against the bg. After this part, I went on to darken the bars to make them suit the rest of the HUD more, and later faded them too.

  • I might have the size of the bar reflect the character's HP and MP, and add other widgets to their HUD, like skill cooldowns and a 'limit-like' bar.

  • The HUD progress before adding another portrait and darkening/fading the character HUDs. Here you can see how the Quest widget has a transparent background meant to start dark and fade into the background color.

  • You can see how I started to sort the different parts of the HUD into groups to avoid clutter and keep it organized. In the groups, all aspects are still separate to ensure I can plug it into a real HUD later on.

  • The minimap I made with Inkarnate. It's based off a map of Bytold from my story website, but the perspective somewhat altered and zoomed to give a bit more of a 'minimap' feel. 

  • I included lighting on the illuminated parts of this map before later darkening it. Maps like this would remain in my project as viewable maps of the locations to offer some more immersion in the world.  

  • After plugging in the 2nd character's HUD. I opted to make it smaller and less detailed. The objective is to just show their face and the percentage of their HP/MP remaining. I also opted to use gold bars instead of blue for the MP as a UI choice.

  • As you can see, the characters are also masked rather than objectively erased, to allow for easier modifications if needed. 

  • Part of the goal is to have facial images react to damage, healing, events, etc. 

Sovereign Soul Menu Design

        Continuing from the above assignment, I used Figma to design a complete menu system for Sovereign Soul. I elaborated on the HUD above, then created a central menu which opens out to Equipment, Inventory, Party, and more. I used tools like Photoshop to create small menus within Figma, an Inventory bar, elemental icons, item images, and stylized images of my main character for use in a bigger menu system.

         To see my whole process on the design of the menu, I have created a Powerpoint that goes over all aspects of the menu. 

       

bottom of page