CastleBand - UX & UI Design
CastleBand is an action roleplaying game starring a punk rock band trapped in a fantasy world dominated by pop music. Accounting for different screen sizes, the limitations of using a controllers, and managing the amount of amount of information on screen made bringing traditional ARPG controls and UI to a console was difficult. Striking the right balance between maintaining the punk rock aesthetic while not sacrificing usability was a constant concern and my solution was to lean into the bold colors and imagery of punk album covers and band posters to bring attention to the most important elements on the screen.
SKILLS: concepting, sketching, wireframes, art design, interaction design, and icon design
SKETCHES
During the conceptualization phase, I didn’t focus on art because I knew that would be a distraction and hurt production later. Instead, I focused on shapes, zoning the elements, and creating balance in the UI. I solved the conceptual problem of bringing a Diablo style ARPG to console by comparing creative new solutions against existent designs and common standards in the genre.
Wireframes
Low Fidelity
High Fidelity
Health Bar Animation
During wireframing, my focus was on creating balance in the UI, minimizing the space taken up by the UI, and starting to flesh out the common interactions. It’s important to start flicking all the switches at this stage, focusing on key areas like the health and mana bars, status effects, and actions, and the quest list. Working on the wireframes I was able to begin finding questions that would come up later in production, solving for them at an early stage when it is both cheaper and faster to iterate.
UI ART
HUD with Game Prototype
HUD with missing health
HUD Asset Pack
It was so exciting to finally incorporate punk rock, pop art, and a little bit of Dia De Los Muertos into the designs. I started by pulling together a common color palette, taking references from album covers, band posters, and artwork for Dia De Los Muertos. The skulls screaming the health and mana bars are my favorite! Keeping in mind the lessons learned during wireframing, I brought together our aesthetic and kept the UI easy to parse at a glance using a bright but limited color palette which highlighted the most important elements above things that could be ignored during combat.