Concept

For the game it was decided that there would be a shop interface were players could purchase items, armour, abilities and weapons to use in the game world. It was decided that this would be done through a separate screen in the game, through mouse clicks, to give the player the most control possible over what items they were purchasing. This layout also allowed the inclusion descriptions for items and the displaying of a shopkeeper sprite the player could talk to while shopping.

Therefore the essential components for the screen were: a shopkeeper image (to make dialog sensical), a display of items to select, a box showing item descriptions, a display of the items/money the player currently has and a purchase button.

Within this, it also had to be designed to be a logical screen while in the safehouse, therefore the colour themes and assets had to be based off of the existing shop design.

References

In order to represent the shop screen in a logical way references were gathered for the possible layout arrangements that would allow all the necessary information to be included in a single screen in a way that didn't pull the player out of the game. The main inspirations found were Moonlighter and an example GUI from mobile game graphics which both used segmented shop screens. Overall the vertical segmentation seemed like it would be more appropriate as this game had a limited item set and a column wise arrangement allowed more room for descriptions and the shopkeeper.

Layout

Initial Concept Iterations

Once the general columns concept was chosen variations of the layout were considered. Generally it was decided to use the shopkeeper on the left to have the player on the right and the items in the middle (as this gave enough space between sections and semi). From there the main consideration was where to position the purchase button; with the items or next to the player. Finally it was decided to move the purchase button to under the player so that it required more user directed motivation to select the purchase button, and no purchases would be made on accident (and it gave more room for a success/failure message).

Additionally user testing was performed to examine the layout and whether it made sense for users.

Final Layout

After deciding on the layout it was implemented in the game.

Design Elements

Wall and Backing

Alongside the layout for the screen, assets were created for the backgrounds of the screen to make it look more finalised and overall understandable/legible. This included a general background as well as specific backgrounds for areas of text and items.

For the general background it was decided to use a close up version of the already existing wall in the shop in order to better ground the shop as part of the safehouse.

However, when placed as the background the wall is lost so it was decided to use backing for the elements within the safehouse (which specifically utilised the colouring from the bookshelf in the shop to better match the colour scheme). Though this increased the legibility a lot there was still issues with the item icons being different sizes, therefore to uniformize them it was decided to create versions of the items with backings pre-made to set the size and make sure they were cohesive.

Additionally, as the backing for the items was no longer part of the background it could be easily change through interactions with the shop menu and therefore allow highlighting of selected items. After some colour tests it was decided to do a slightly lighter version of the base background colour.

To fit this it was also decided that the description and the text that tell you the item name should also be in the same colour to better connect the selection and the description.

However it was seen as quite imbalanced with the description also coloured so it was decided to use only the title being coloured in order to still have the connection without making the screen look too imbalanced.

Final Screen

When implemented behind the shop screen the final shop screen appears as: