5 UI Mistakes I Made Designing My First Card Game (and the Principles That Fixed Them)
When I first started designing the cards for Dolven: Runes Gambit, I assumed it would be straightforward.
We already had a digital version. The mechanics were designed, the cards existed, and everything worked on screen. I thought all I needed to do was translate that into a physical format, add some explanatory text, and call it done.
How hard could it be?
At first glance, the cards looked great. They had detail, flavour, and all the information I thought players needed. But the moment I put them in front of people or even looked at them with fresh eyes…something felt off.
Early play tests saw players hesitating. They scanned the cards longer than they should have. They asked questions they shouldn’t need to ask. Important values were missed. Effects had to be re-read. That’s when it clicked. I had been naive to think a digital card game would translate directly into a physical one. On screen, the game does a lot of the work for you. It highlights, calculates, and guides the player. A physical card does none of that. The UI has to do all the workinstantly, and without explanation.
And I had made all the classic mistakes:
Too much text (and too small text)
No visual hierarchy
Important information buried
Too many decorative elements
I was designing cards to be looked at, not understood. So I started over. Stripping things back. Rebuilding. Testing. Failing again. Then tightening further. We reworked the cards several times, and through that process I learned a simple but hard truth:
If a player has to read your card to understand it, you failed.
This post breaks down the principles I learned while redesigning the UI for Dolven: Runes Gambit—how I moved from cluttered, confusing cards to something players can understand at a glance. One of the biggest mistakes I made early on was treating every piece of information as equally important. The result was cluttered layouts, small text, and no clear visual hierarchy. When you looked at the card, it wasn’t obvious where your eye should go first. I had to stop trying to make everything stand out and start making the right things stand out. That became the real challenge and it’s what ultimately took the cards from prototype… to a finished product.
1. The First Glance Principle
When a player looks at a card for the first time, their brain asks three questions:
What is this?
Is it good or bad for me?
What do I do with it?
Your UI needs to answer all three at a glance. In Dolven, that meant:
The card type is immediately recognizable (Character, Spell, Treasure, Fate.)
The power/value stands out without searching
The effect or role is readable at a glance and not buried in text
If a player has to scan the whole card to understand it, the hierarchy is wrong. So I iterated the cards a number of times and I’ll show you the various iterations as we go.
This is one of the first prototypes designed. At a glance, the card looks clean but struggles with clarity and focus. There is no real visual hierarchy which makes everything competes for attention instead of guiding the player’s eye. Key elements like the effect, values, and icons aren’t immediately understandable, which slows down decision-making. The iconography is also unclear and some hard to see, making it difficult to interpret what certain numbers or symbols represent without prior knowledge. Its also too ornate. Ornate is pretty but not practical.
Altogether, the design fails the “first glance” test: it takes too long to understand what the card does and why it matters.
(Can you see the Intelligence icon in this card? No? Me either?)
2. The Visual Hierarchy Principle
Not all information is equal and that needs to be reflected in your UI. I’m talking about ‘priority’ of information here.
In Dolven, players need to know the card type first, is it a spell or a character card. Then it’s rune value/power, how strong is the card. Then its archetype, is it a strength, dexterity or intelligence card. Secondly, an understanding of the effect of the card should be seen. Finally the supporting details of the flavor text, lore and any fine print. It took me a while to get that right.
Below is an example of how I flunked the UI principles big time. From a UI clarity standpoint, there are some pretty fundamental issues with the two Azzurion cards pictured below.
The Core Problem: No Clear Reading Path!
The card mechanics is buried in decorative UI and descriptive text, forcing players to read and interpret.
How I fixed Azzurion
In the most recent version here, the above clutter is stripped away and replaced with a clear visual hierarchy and system language: “On Win” immediately signals the trigger, followed by a concise, structured effect (“Deal 1 damage… Ignores defense”). Key information is no longer buried it’s now surfaced.
The result is a card that doesn’t need to be read line-by-line; it can be understood at a glance. Players will appreciate that.
3. Design for Recognition, Not Reading
Players don’t read cards mid-game. I should know this because I play card games and I never ‘really’ read the cards, I scan.
Most people recognize patterns so instead of relying heavily on text, we look for:
Icons
Color coding
Consistent placement
After a few matches, players shouldn’t need to read, they should be able to know what it means with a glance. That’s the goal.
4. Short is Sweet
Every extra element on a card costs the player mental energy. So, I had to really ask “Does this help the player make a decision right now?”
If the answer was no, it got cut or reduced. That meant:
Shortening effect text
Removing redundant labels
Avoiding decorative clutter that competes with gameplay info
The Gildrene cards below show a slow progresion toward a cleaner UI that bring clarity and understanding without too much brain power.
I means, larger larger writing, less writing, succinct descriptions and it must hold your key elements in an order that is logical ie, card type , power/value and effect or role is readable instantly. This make perfect sense because when we play games, we often need to make quick decisions. The UI will either break your flow or make your flow.
5. Consistency Principle
Consistency is the principle that the same thing should always look, read, and behave the same way across every card. There was a reason why my cards were not consistent. This was partly because I started creating each card individually. Yes dumb, I know know, but when I first started I wasn’t a trained designer, I had never made a card game before so naturally, I didn’t know how to go about it structurally.
Consistency is easy when you realise that there is this amazing thing called a ‘template’ and you can actually reuse it over and over again. It took me a while to realise that, and when I did, it made the whole consistency principle so much easier. Sometimes I wish I would just read the manual before I start, but Alas, I am a creature of habit.
Using templates really helped turn my UI into a language…. it also saves a lot of time. One template that can be modified will keep you consistent.
Designing the UI for Dolven: Runes Gambit has been an ongoing process over the past three years. Through countless playtests with a wide range of players, one simple truth became clear:
Players don’t care how clever your system is, they care how quickly they can understand it.
If there’s one goal to keep in mind, it’s this: make explanation unnecessary.
When your cards communicate instantly, players feel smart. When they don’t, players feel frustrated. And frustration is the fastest way to lose a player.
The between clarity and confusion is what keeps people engaged, learning, and coming back to play again.
These five principles became the foundation for redesigning Dolven: Runes Gambit. But they’re only part of the story.
In the next article, I’ll walk through the final evolution of the cards showing how these ideas came together in the finished designs, and how small, deliberate changes transformed the game from a ‘functional’ prototype into a cohesive, playable system.