Gardeners Grove aims to keep the UI as minimal as possible while retaining the warm wholesome Autumn feeling throughout. This section outlines how the UI works as well as demonstrating specific funtions.

Gif showing the mock-up UI created in Figma for Gardeners Grove.

Gif showing the mock-up UI created in Figma for Gardeners Grove.

Placement hotbar

At the bottom centre of the screen, there is a Hotbar containing all the plants or decorations that the player wishes to have easy access to.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/45703ac0-4323-4cca-85c9-c8c92fd24ce6/Untitled.png

Inventory

The player will be able to view all of their plants from their collection book. Each unlocked plant will take up space on the grid. Any locked plants will be greyed out which gives the player the idea that there is more to discover.

When the player opens their collection book/inventory the Hotbar will stay there but only for dragging plants or decor to and from the Hotbar and inventory.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9c2fe731-ffc5-46d2-9431-84c3d1bf3085/Untitled.png

There are tabs at the top that allow the player to switch between plant collection and decorative items. This is because plants are a separate type of collectable to decorative items. Separating the two into different categories will help the player to understand what will actually trigger the breeding mechanics and what does not.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/91d3e948-060c-4d7c-9470-a7835be026d2/Untitled.png

If the player wishes to place a plant they simply click on their desired object in the Hotbar and then a preview of the item will appear attached to the mouse. As the player hovers the mouse over the ground, the item preview will be slightly transparent with a projected radius so that the player knows how close objects need to be placed in order to breed. When the item is placed it gains it becomes fully opaque and the radius disappears.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fe634d33-1948-4ede-bdef-5a4f08ac5677/Untitled.png

If the player wishes to remove the item attached to the cursor they can simply right-click to get an empty cursor again.

Trading & Gifting

Players will be able to access the 'Share' tab in their inventory which will allow them to gift or trade plants. Players can drag items from their hotbar to the desired action box (Gift or Trade) and then select the friend they wish to send the items to.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/07e6a89c-074b-4e2c-a6ac-5eb79058f672/Untitled.png

When the player has selected the friend they wish to trade with, some items may appear "locked" to show that their friend is not a high enough level to receive that item, and some items may appear "greyed out" - these items are rewards and cannot be traded.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cb6a5bd8-eb69-4abc-8580-c4bb5b177b2a/Untitled.png

Players will be prompted with a "Confirm Trade/Gift" question before the items are sent.