top of page
UI / UX Design
Nebulous
Main Menu designs for Nebulous, a hypothetical 3D survival action role-playing game for the Nintendo Switch console. The game concept is set in the near future and revolves around the player taking the role of a bounty hunter who travels across a fictional country to eliminate alien creatures that have emerged during the winter time. The key themes include isolation and the passage of time, which are represented by the winter motif, giving the feeling that areas are frozen in time.
Nebulous - Process & Design Development
For this project, I conducted wireframe testing with various people and gained valuable feedback. All participants had a preference for the title being in the center, as it immediately grabbed their attention and made it clear that it was the focus. Another aspect that many pointed out was that they found that the wireframes where all the items were close together improved readability, as they did not have to search the whole screen to know all their options. There was also a majority who preferred having the options read left to right in a horizontal manner, rather than a vertical top to bottom; some noting it was easier to read for them, though other participants expressed the opposite opinion as the top to bottom orientation reminded them of how devices such as phones have their text laid out as. Lastly, a desire for consistency was noted; for example, some people pointed out that they thought that having the controls in a vertical orientation instead of a horizontal orientation, like the options, was distracting to them.
To help design the main menu artwork, the Gestalt law of continuation was followed, with the title screen artwork created with the intention to frame and highlight the text. The icicles point downwards towards the title and options, and the branches create a semi-circle shape to emphasise the text further. On the left, the character’s eyes and scarf are directed towards the text as well so if the player’s eyes are drawn to the illustration, they will follow the gaze of the character by an invisible line that will lead them to the title and options. The lighting was chosen to make the character’s shadow fall and point towards the text, and emphasise that the text is the main focal point.
The initial title screen artwork was adjusted to improve the readability of the text. Due to the placement and the lack of contrast between the colours, the ‘New Game’ text blended in with the character and shadow, making it harder to read. To make the text clearer, I flipped the character and made the character less prominent on the screen, giving space for the text so they do not overlap over each other.
In the final designs, throughout all the screens, information such as the controls and sub-menu text was kept consistently in the same area. By keeping the controls and the same type of information in around the same place, this allows players to quickly locate the data they need.
To make the selectable options distinct from inaccessible options, a light font of the typeface was used and the opacity was lowered to show that they cannot be selected. A bold font was used to show what option the player is currently hovering over, and the currently set option in the 'Settings' menus. The title and sub-menu headings were given a bigger text size to emphasise their importance. The title and sub-menu headings’ text size was increased to show that they are the main information the player should recognise when in the respective screens, as they introduce what section the player is in and help them navigate through the rest of the screen.
All sub menus were given unique screens so players could easily identify when they were in a different menu and recognise what screen they are in through the artwork. For example, in the ‘Tutorial’ menu, a blade was used as the key artwork, while the ‘Help’ menu features snowdrop flowers. The blade is the main weapon of the player character, fitting with the survival genre and the combat-centric gameplay. Snowdrop flowers can be interpreted as a symbol of hope, as the ‘Help’ menu will hopefully assist the player in finding what they need in order to progress, and fit the winter theming as they bloom near the end of the season. Similarly to the character in the title screen, they both lean towards the text and draw the player’s eye towards it.
Blue was used as the main colour for the text and some background elements, matching the cold winter setting and theming of isolation. Another prominent colour is the white snow, which also has connotations of the cold and contrasts with the blue, emphasising the text on top of it.
.png)
Life Scripts
Card designs for Life Scripts, a narrative-driven resource management 2D analogue board game where players act as different characters that have various qualities which will impact their gameplay. Players must balance their resources while navigating through aboard that include spaces with situations that can negatively or positively impact them. Created for a 3 week game jam themed around exploring the experiences, pressures and choices of being childfree across different genders and cultural backgrounds.
Life Scripts - Process & Design Development
I created a basic paper prototype to test different layouts for the text and art. Through this prototype, I tested how readable the text would be, what the appropriate size would be for a card, and which orientation would be most comfortable to hold. I found that it was more convenient to hold multiple cards in a vertical orientation rather than a horizontal one. To decide on an appropriate size for the cards, I measured other cards from games I had in my possession and found that they tended to be a similar size, so I cut out the prototype to be of an identical proportion.
While working digitally during the next stage, I aligned this paper prototype with the digital design throughout the process to iterate on the text size and ensure that it was still readable from an appropriate distance.
I assembled multiple digital wireframes and iterated upon them numerous times. Two different variations of card layouts were made – one for the resource (mental health, freedom, social, aspirationsand financial) cards and another for the support, event and stigma cards. This was due to how the resource cards differed in their use and included less information than the other card category, sothere was more room for art. They also feature different background patterns and inversed colours to further differentiate the two categories of cards from each other.
The card type text between both layouts, alongside the effects and flavour text for the support, event and stigma cards, were maintained in the same consistent position throughout all layouts. This was done to maintain a consistent design language to help people build familiarity and memorise aspects of the design that they can use depending on what they need. Specifically, I hoped that it would help players quickly identify the information they needed to find between the different cards. Essential information for playing, such as the card type and effects, were boldened and outlined to further accentuate them from other text elements and the background. Iconography was added to support the text and visually represent the card type.
I did some concept art for the resource cards. I wanted the mental health art to centre around caring for the mind but thought that most of my concepts were too open and vague. Therefore, I settled for a metaphorical approach, showing the character nurturing their mind by comparing the brain to a plant that they must water to keep it healthy. I also struggled with the freedom artwork, as breaking out of chains or giving the character wings could be misinterpreted in ways that were not intended. As a result, I simply showed the character’s freedom through their pose, as they wave their arms out to exhibit the free space they have, fully unrestricted.
I decided to make the characters silhouetted so the players could project any character onto them. The silhouettes are monochromatic, with regular characters matching the colour of the card, while characters representing the people spreading this stigma are black and white. This is intended to create a contrast that amplifies the negativity stemming from the characters who shame the player characters for their decisions.
For the final card designs, I created a single example card each for the event, support and stigma cards, and completed the designs for the mental health and freedom resource cards.
Both the resource cards' art pop out from the boxed boundaries set in the layout. Specifically for the freedom resource card, I thought this conveyed a sense of achieving freedom as they leave the box that the other cards are captive in, and overall, made the characters feel more alive.
The mental health icon is a brain with a heart, symbolising the love and care that the character provides to their mind, while the freedom icon is a wing representing freedom. Support cards are pictured by a hand symbol, which is intended to represent someone waving their hand in greeting, but in hindsight, I think it could have been further iterated upon as it could be interpreted as a stop signal. The event cards have an exclamation mark, while the stigma cards are depicted with an eye, symbolising the judgment the characters feel when being judged by those who support the stigma around being childfree.
Resource card colours were selected based on what the colours portrayed. Red can indicate passion and liveliness, while blue may provide a sense of balance and recovery, which I thought matched the theming of the freedom and mental health resources respectively. The colours of the support, event and stigma cards are loosely based on traffic lights, which is intended to help players establish that there is a connection between them, and were also selected based on the possible perceptions of each colour. Red can indicate something being threatening, green may imply safety and peace, while yellow could be interpreted as optimistic or overwhelming.
Miscellaneous Work
bottom of page