Key Info
Genres: Visual Novel, Horror, Romance, Chat-sim
Development Cycle: 8 Weeks
Engine: Ren'py / Platform: PC
Roles: UI Designer, UI Artist, Web Dev & QA
CORE RESPONSIBILITIES
UI Art
I worked to create a variety of UI elements to fit a core "synthwave, but darker" theme for this chat-sim focused visual novel. Working alongside the programmers to implement these assets and elements as intended to the Ren'py project using python, and ensuring we had assets to support and enhance the player experience, such as an objective marker for in-game.
Style Guide
Typography & Colours
I also utilised the web colour contrast checker on each of our suggested colour pallets, ensuring that we met Level AAA for our text elements to ensure better accessibility.
Text (Small & Large)
Text 2 (Small & Large)
UI Elements Only
Text (Small & Large)
Each element of text meets the AAA contrast for it's usecase, with large text above 24px being used for the buttons & small text being utilised through menus and in-game for elements like action buttons, text choices & tooltips, etc.
UI Elements
(Buttons, Containers, Iconography)
Early Wireframes for Chat & Call screens:
Web Dev
I worked on the itch page using CSS to create a bespoke and fitting game page for the project, from the page's layout and inline header assets to a custom cursor, and various custom animations on the banner, buttons and screenshots.
​
The header image on hover has a looping animation designed to resemble a camera with it's focus changing, which swaps the sprites out from the static header to their 'yandere' expressions as the camera focuses in. The screenshots have a chaotic shaking on hover, and the inline headers have a glitching effect which shows on hover. While the game page's buttons also have a different chaotic bounce around on hover that does not loop.
These animations were all created entirely with CSS. Any layout adjustments needed to adhere to the overall sectioning of the standard itch page layout to avoid things breaking on site updates, so were left to simple adjustments like offsetting the rotation on the screenshots from one another to give a slight unease to them.
