Thoughts on UI/UX and presentation for Flip Hair Sally

posted in: art, Dev Blog, tutorials | 0

I’ve done this so many times. Creating UI, carefully thinking about UX, sketching ideas on presentations, and coming up with many (many) reworks… Every time it’s a slightly different experience and I love every single step of the process. This project was no exception. Thanks to my talented teammates, I was inspired throughout the process.

 

References

We knew we wanted to do something “dark” (& cute). When goldsheep showed me the early concept of the bunny running through the darkness (which actually our coder Sean had made as his very first animation!), I immediately thought of 2 things: Japanese Kage-e (or shadow art) and the end credit sequence of “Lemony Snicket’s Series of Unfortunate Events”.

 

Japanese Kage-e (Shadow Art)

CA330049 3347895662_a1c33b9c28

I love how the mid-ground elements are dark and the colours in the foreground pop.

 

 

Lemony Snicket’s Series of Unfortunate Events

lemony_hd_p2_comp_1__0_01_22_16_ LemonySnicket(still02)

The layers of shadows are great reference. And the overall dark mood!

 

 

UI/UX

  • I aimed for something simple yet bold. It was very easy after seeing the sketch of the cute little big-head Sally by goldsheep. Our UI is primarily in white for legibility over the dark background, with the accent on Sally’s hair colours (magenta & cyan), and I threw in some green on top of that. The font is clean and easy to read.
  • Because it’s a simple game, the HUD is very simple, too. As Sally keeps running and the environment keeps scrolling, you can’t really manage to read or keep track of too much stuff.
  • Nobody wants to read things pre-game. We just want to play! I tried using images/icons more for the tutorial page.