Yao had made some additional changes to the style and the layout of the sketchbook UI, which was developed and implemented previously for the alpha build.
There's quite some amount of work that's needed to improve our user interface and user experience for players navigating or understanding our game mechanics. From the large amount of sample by observations and feedbacks received in the Science Fair, we noticed there’s more we can do to let players play the game with better flow and ease. While also the visual style of the sketchbook and our UI needs refinement at the same time.
Font Choices For fonts, we chose ‘caveat’ as the main font style to utilise to refer the handwritten theme in the sketchbook. But I also wanted to pick between another one after learning about the importance of different typefaces across UI layout, splitting into display and body typefaces…
Display typefaces:
Body typefaces:
The new font will accompany our previous choice for interfaces that requires to work at small sizes and readability across interfaces outside the sketchbook interface as well. I've filtered the selections between these choices: Poppins, Funky rat pink, Humming & Rodinwanpaku
Sketchbook UI I will iterate the key visuals of our sketchbook from the alpha build. My previous alterations involve adjustments to the colour palette. This time, I will do the same whilst fiddling with the composition of the layout and page design.
The most noticeable changes made is the colour on the book cover, I've changed the outline style of the tabs and the design of the pages as well through framing. Our designs for icons which was initially desired to be separate category tabs to further organise the pages into: creatures, structures and ruins led to a difficulty in our coding skills to achieve this effect together with the decrease of our payable biomes in this alpha build may not in urgent need for them as separate tabs yet. I've decided to combine these icons as part of the designs for separate pages that matches their categorised properties.
The tutorial page is enhanced in its formatting that includes keybind button icons with the assigned function and WASD for movement controls, as we found players often needed hints on how to control movement.
Function Icons We noticed many playtesters struggle to understand or navigate between when opening the sketchbook. To improve the user experience, I made additional icons to execute functions such as turn to next / previous page, x icon to close the book, and action keybinds in the tutorial page as shown above.
We also thought about creating a photo album that collects all the images players took outside of ones that would be documented in the sketchbook. This is decided from a portion of the playtesters enjoying their time taking photos whilst exploring the map in the alpha build. A bin icon to delete could be required to discard unwanted taken photos. A start and quit button for the start menu is also made, as appearing as just formatted text seems too bland.
- Actions
- Control Keybinds
- Menu Buttons
Overworld Features During observation, it’s listed as our summary that some players regularly open the sketchbook again or unsure the action features (e.g. take photo) to constantly remind them the controls to trigger various mechanics that’s provided within in game. We will deliver these controls through keybinds that will be presented as part of the overworld UI, much like HUD assistance. They will split into 2 layout placements to be shown, one for the overworld experience and one when activating the ‘camera mode’.
A crosshair and cursor design is made to further customise the game, fitting to our game atmosphere. The pen element that was mentioned in our drafting of the sketchbook is implemented as a cursor design to be used as a pointing when navigating around the sketchbook interface.
- HUD Keybinds
- Crosshair & Cursor
<aside> ❓
To Be Fixed Next
</aside>
These tasks listed below are to be completed within Unity, as they occur in some bugs in our alpha build when attempting to perform its functions…