References

Sketches

Even More Sketching

Final

Refined Sketches

UI Design

This project was my first foray into UI/UX design, and I learned a lot through the process. The final goal was to create an ability tree design for my game, with icons, animation, and written descriptions to match.

I gathered references for many different types of UI, with the intention of making sketches of all of them to explore which ones I wanted to make. I looked mostly at sci-fi and fantasy games, as they would have similar assets to the game I wanted to create.

The first decision I had to make was what type of UI to make, between a gameplay HUD, a loading screen, an inventory screen, or an ability tree. Since I had never tried icon design before, I decided to go with an ability tree as it would give me the chance to explore the subject.

After deciding which sketch to proceed with, I then refined the sketch further. The ability tree would be a series of icons projected in front of playable character’s silhouette, with different icons and structures depending on their abilities. After posing some questions to my classmates and reading their feedback, I moved on to the next step.

I continued my work by experimenting with different placements of assets and color palettes, as well as finalizing the designs of the ability tree icons.

With all of the feedback I’d gotten so far, I was able to finalize my UI design.