Fictional Card Game Tutorial
For this project I had a more in-depth look into Design and Flow of a digital card game, taking notes from Hearthstone, Elder Scrolls Legends and Netrunner.
A slightly more interactive prototype can be found here: https://xd.adobe.com/view/838fb555-e14b-417b-baaf-2091c878d4a8?fullscreen
The idea is that the game should be slim and portable enough to be played by everyone with only a few required assets (Coins, Deck, Scroll).
Huge shoutout to HiNi and Petter Gunnarson for providing artwork for the cards!
Scroll down for breakdowns.
Introduction screen with some context.
Text placement aligned with card stats.
Coins are the main representative of what you can do. Your Faction token face up means you're the one in action. With the tails up (appropiately drawn as an eye) means that you're spectating your opponent.
Assets and fonts used to construct the project. The bold fantasy-esque Henriette font worked well for names. Acumin Pro Condensed allowed for more text, it was boldened in order to read cards better at a distance.
The "flow" of the game. I looked into deck-placement of real card games, usually placed near your dominant hand (right). But I felt the left part of the screen was unused. To get a better feel of "starting a new turn" I placed the draw and info there.
The many slides explaining the steps, I chose to present the ones that I felt mattered the most and presented each space well.
Setting up the prototype, UX-style with transition choices in Adobe XD.
Link to prototype: https://xd.adobe.com/view/838fb555-e14b-417b-baaf-2091c878d4a8?fullscreen