Project Deliverables
-Rework the Pause Menu to better reflect game’s art style and add an Accessibility tab within the Pause Menu.
Project Deliverables
-Rework the Pause Menu to better reflect game’s art style and add an Accessibility tab within the Pause Menu.
What is Nightingale?
Nightingale is a Victorian-era survival crafting game where players explore the mysterious Fae Realms, battling enemies, gathering resources, and building estates — playable solo or with friends.
What is Nightingale?
Nightingale is a Victorian-era survival crafting game where players explore the mysterious Fae Realms, battling enemies, gathering resources, and building estates — playable solo or with friends.
Reason for Redesign: Pause Menu
During my playtime, I noticed that the Character Creation Process was the only menu with UI that reflected the games design inspiration. While several of the menus could use an update to represent the art style, I focused on the Pause Menu as it lacked the most in showing the art style. The Character Creation screens and PDF artbook served as a guide in my design process.
Reason for Redesign: Pause Menu
During my playtime, I noticed that the Character Creation Process was the only menu with UI that reflected the games design inspiration. While several of the menus could use an update to represent the art style, I focused on the Pause Menu as it lacked the most in showing the art style. The Character Creation screens and PDF artbook served as a guide in my design process.
This image shows so much personality establishing the game's brand identity.
This image shows so much personality establishing the game's brand identity.
While this pause menu has good readability, the unique component's details are difficult to see such as the arrows on the slider or the border around the Audio Settings section.
While this pause menu has good readability, the unique component's details are difficult to see such as the arrows on the slider or the border around the Audio Settings section.
These images gave a solid direction for the Pause Menu redesign. Images were sourced from the digital artbook and loading screen respectively.
Design Spotlight: Designing a Divider
Here are a few more design elements that I thought would give me a good starting point to begin designing.
Nightingale Prototype
Prototype: Nightingale Pause Menu
Design Breakdown
A core focus for this case study was to keep consistency with the shape language, color palette, and textures that are established.
The images below show vector exploration and component construction for a divider. The divider's style came from Nightingale's imagery of twisting metal shown earlier in the case study.
The vector shapes used for the divider were separated at points of contact. Gradients were applied to the separated shapes and color order in the gradients were organized on how light would act based on the shape. Colors were chosen from palettes in-game and adjusted for the desired outcome.
An important detail to note is establishing a light source and adjusting the gradients applied to the shapes. The shapes are grouped together and each group has multiple gradients ranging in complexity.
Design Spotlight: Designing a Divider
Before and After
The highlight redesign was inspired by a magnifying glass highlight used on the tabs from the Character Creation Screen. A glow was added to create emphasis on selections.
The slider also received a similar redesign to the rest of the menu's components
Project Challenges
A huge challenge to this case study was deciding on an existing color palette in the game that keep text legible over an illustrated background.
Final Thoughts and Future Plans
Did this fix the problem?: I would say yes, but in the process, I created another problem of making the information illegible due to value selection.
What would I do differently: Use a color checker and focus on colors that fall within the game's color palette, but have high contrast with each other.
Design Spotlight: Designing a Divider
Click for a visual breakdown of the divider.
Design Breakdown
A core focus for this case study was to keep consistency with the shape language, color palette, and textures that are established.
The images below show vector exploration and component construction for a divider. The divider's style came from Nightingale's imagery of twisting metal shown earlier in the case study.
The vector shapes used for the divider were separated at points of contact. Gradients were applied to the separated shapes and color order in the gradients were organized on how light would act based on the shape. Colors were chosen from palettes in-game and adjusted for the desired outcome.
An important detail to note is establishing a light source and adjusting the gradients applied to the shapes. The shapes are grouped together and each group has multiple gradients ranging in complexity.
Prototype: Nightingale Pause Menu
Before and After
The highlight redesign was inspired by a magnifying glass highlight used on the tabs from the Character Creation Screen. A glow was added to create emphasis on selections.
The slider also received a similar redesign to the rest of the menu's components
Final Thoughts and Future Plans
Project challenges: A huge challenge to this case study was deciding on an existing color palette in the game that keep text legible over an illustrated background.
Did this fix the problem?: No, while the styling of the Pause Menu was strengthen, I weakened legibility with my color selection.
What would I do differently: Use a color checker and focus on colors that fall within the game's color palette, but have high contrast with each other.