This is a simulation of a simple interface that deals with playing cards. It explores functions such as adding a card from the deck, removing a card from the hand, viewing your full hand, and error messages.
To explore different types of interactions for a simple interface, using only a limited number of buttons and screen space.
Main Frames
I experimented a lot with Figma for this project. I spent much of time working through variables and animations to experiment with the bounds of Figma. While there were many attempts that worked out in my favor, there were an equal number of failures. Nonetheless, it was extremely fun to learn.
The inspiration behind my card designs were from a game/story I am in the process of making that revolves around Grimm Fairy Tales. I wanted to keep a consistent theme of ambiguous characters while limiting myself to sharp, triangular shapes and only two colors per card.
There are a seemingly endless number of ways to portray and execute different interactions, even with ones as simple as "Add", "Delete", and "View All". I experimented with a couple different iterations for deleting, including hovering, swiping to the left, and swiping the card up. I ended up landing on a long-press. This allows the user time to cancel a destructive event, and is reminiscent of deleting applications on a user's phone.
Looking back at this project, I would change a couple of things. First, the time it takes for the destructive event to occur is too long. I would change up the animation to be quicker but still stay in the theme of "burning the card". Another thing about the delete function I would change is how to actually delete the card. In this version, the user has to move their thumb from the "hold-down" position to actually delete the card. I would probably change the interaction to be a swipe up, once the user has entered the pulsing "delete-mode".