555 Seymour Gallery

Tribute to Jaison Cianelli

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

Design Process:

• 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?

Development Process:

• 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.

Styles

Extra steps to make the game more user-friendly & performant.

Notification Bar

I decided to implement a subtle notification bar feature, notifying the player when...

• Reward: The player finds a match
• Warnings: There're 10 and 5 turns left

This is how I did it:

See the Pen Notification bar by lam-tiffany (@lam-tiffany) on CodePen.

Disabling Clicking Activity

It is crucial that the game does not perform match-checking (or from player's perspective, the player's card-clicking activity is refuted) when:

• player clicks on the same card twice
• player clicks on a card that is already matched
• player clicks on the 3rd card but the following procedures for previous 2 cards is not complete:
  1. Update no. of turns and/or matches for previous turn
  2. Display reward/ warning notifications for previous turn (if applicable)

This is how I did it:

See the Pen Disable Clicking by lam-tiffany (@lam-tiffany) on CodePen.