Swords Of Ditto
2018 © Onebitbeyond
Microsoft Windows, Steam, PlayStation 4
Below are a selection of UI screens I produced as a freelancer in 2017 for Swords of Ditto by OnebitBeyond, a small indie team. Swords of Ditto is an action role-playing game with roguelike elements. The game was published in 2018 on PC and console.
I received feature briefs from game design and constructued a flow for the core game loop such as a boot flow, main menu, settings and for the various features that required bespoke UI supplementation such as the equipment screen, inventory, HUD and many more.
I researched relevant competitor titles to identify key genre player affordances to leverage for Swords of Ditto as well as successful information presentation then produced layout options for each feature, ensuring each screen consistently had space for the longest localisation languages and worst case scenarios for maximum content that could need to be displayed. I identified the most effective layouts, aligned and validated with the game director before proceding with applying visual style I had developed in paralell with the UI screen designs.
When I joined the team the game already had a distinct visual style direction defined for the 2D gameplay but no UI design or style established. I used the playful, cartoonish and colourful style as a starting point and concepted a variety of styles with common UI elements such as buttons and popups before landing on the style shown in the UI screens below, validating with the 2D artist and director. My goal was to create a UI visual style that seamlessly blended into the visual style of the in game art style, yet still was visually distinct enough to differentiate in world information from UI information. I leveraged the tactile and rough yet playful theming of the gameplay of sword battle adventures with a slight medieval and battle worn texture and ensured whilst the style was still clean and crisp it didn't feel overly clinically perfect by retaining a subtle hand drawn charm.
I then created styled versions of each menu in the art style I had previously established for the UI, focussing on reusability, consistency and technical requirements such as textures that would need to scale with content. Lastly, I created a suite of textures ready for implmentation of the UI to game.
Equipment
The equipment screen served as a loadout for the player's character. The main goal was to provide a simple but clear overview of currently equipped items and their stats and status.
Inventory
The goal of the inventory was to keep the layout simple and surface the most critical information for each item in a clear manner.
Options
HUD
Status Screen
The status screen served as a snapshot of the player's progression, showing stats about their level and playthrough data as well as information about currently available quests.
Map
The map expanded as the player discovered new areas of the world. To capture that concept and to tie into the adventurous child like quality of the player characters I designed the map to have a hand drawn pirate map like quality as though the character drew it as they explored.
