A card matching game in a fictional art gallery setting, featuring my favourite works of the talented abstract painter Jaison Cianelli .
What You'll Read About
What was my design strategy?
What are the 3 requirements my background image needs to fulfill?
What tool(s) did I use to create the perfect background image for the game?
How did I make & display the Notification bar differently under different situations?
How did I disable clicking activity while two cards are already opened but the second card is still flipping?
A Zero-Distraction Art Gallery scene to Complements the Artworks
Creating White Space
The biggest design concern I had with this project - each of Jaison's works radiates a vastly different vibe very powerfully. I knew, without some careful design, it'll be easy for all of them to clash together in such a small desktop screen space, creating a feeling that shouts 'whoa, that's too much' to my audiences. I'm here to show respect to the artist, so that's the last feeling I want to produce for my audiences.
My strategies to overcome this - a clean canvas, minimize size of artworks, and increase margins between them. The key is to create a good amount of white, breathing space. And that's what many art museums do too, right?
The Art Gallery Scene
A bright, solid colour background would be the simplest way to solve the 'white space' problem, but I wanted my game to make sense. The hunting process for my background image was much harder than I thought, because it needs to fulfill these 3 requirements:
Without any help of words, player needs to recognize that it is an art gallery - can't be an image of most contemporary art galleries which only have a white wall.
Clear canvas, i.e. no distractions: no weird angles, no windows, doors or people involved, and the floor is preferrably non-shiny/ non-reflective of original artworks.
It is a free resource and its resolution is large enough to fill up a standard desktop screen.
Eventually, I found this perfect image that meets all my requirements. I used Content Aware Fill tool from Adobe Photoshop to get rid of the blackboard, and created my own mockup in Adobe XD.
Extra steps to make the game more user-friendly & performant.
I decided to implement a subtle notification bar feature, notifying the player when...