How to design cards in digital and printed card games?

When creating a card game, whether printed or digital, each developer thinks not only about the principle of operation of his cards, but also about the design. At first glance, it may seem that “A card is a card both in digital form and on paper.” However, the design of these cards differs depending on the format of the game.

I have extensive experience playing digital card games (Gwent, Legends of Runeterra, PvZ: Heroes, Card Thief, etc.), and slightly less experience playing board games (Unmatched, UNO, Durak, Red 7).
I have created two board games and one digital card game. You can see my works below: DANGER ZONE 2.0, SWINGBALL, Gunt.

In the process of working on these games, I never found a concentrated guide on this topic. Not about “How to create a board game”, not “How to make a card game” – but specifically work on the design of the card.

There are videos that talk about this quite a bit, but:

1. They contain water in the form of a personal story about the creation of the game, which is more interesting to the channel's viewers than to the game designers;

2. More mention is made of the production part of development (preparation for printing, “how to make a CCG on Unity”) than the design part.

And most importantly: I have never seen videos about difference development of digital and printed card games, and what to look out for in each industry.

In general, there is little information about card game development in the Russian-speaking segment. It is either scattered, vague, or full of water.

In this article we will look at how to design maps in general; And separately we will look at how to design digital maps, and how to design printed ones.

Let's start with the general…

Design rules,

…which must be taken into account when reading all the following points:

Not too bright, otherwise your eyes will get tired.

Not too monochromatic, otherwise the information will not be readable.

For simplicity, you can go to Adobe Color, Accessibility and check the contrast there.

Text that barely fits on the map; one icon right next to another – it really cheapens the design of your map.

On the same Adobe Color or Coolors You can choose a color palette to suit your needs. It can be useful for the design of the entire card game, as well as for individual cards, types, classes or factions

Gwent and its color schemes for each faction

After receiving the minimum base, we will move on to…

Action plan

..and some tips on card design:

1. What information should be on the card?

Make a list of everything meaningful that should be on your map.
Eg:

“My card should indicate:

2. What should these elements look like on your map?

• Block of text /

• Emblem /

• Symbol in text, character set /

• may Frame Color /

• or Little circle in the corner.

Remember:
It is easier for a person to perceive visual information than written information.
Avoid text formatting if possible. Or replace some of the text with symbols.

Another rule:

• The more often a player uses a particular piece of information, the better it should be visible on the map.
  Take a closer look at the Unmatched cards (or Red 7 if your card doesn't have many elements).

  

  The most important elements are on the left side of the card and take up a lot of space. Less important ones are either on the right (Reinforcement in the circle on the right) or are written in small print in the very bottom corner of the card (Belonging to the character; Number of cards in the deck)

3. Size and shape of the map

These topics are often intertwined with each other, so we will discuss them in one point.
A few rules for making the right choice:

Large cards are difficult to hold in your hand in large quantities (7-10).

Therefore, the size of the card should be as large as possible so that the images and text can be read better – but of such a size that the cards fit comfortably in the hand.
When reducing the size of the map, remember the design rule – free space between objects.

• You can use one of the standard card sizes: 41×63 mm, 44×68, 56×87, 59×92 or 63.5×89. Or take the size from a card of a game you already know.

• (printed) Smoothed corners

  If you leave the corners straight, the player will cut themselves on them, which will greatly spoil the experience of the product.

• (digital) “PKM – More details”

  In a digital game, you can hide less necessary information in a separate window that will open after a certain action by the player.

  For example, in Gwent: The Witcher Card Game, the map initially only contains

  – the image of the card, the card points and, if available, the number of armor and various kinds of effects.

  

  After hovering the cursor over the card, a window appears on the right, which indicates the name, class of the card and ability.

  

  And when you right-click on the full screen, the map is shown and on the right is a window of information – The number of Provisions appears on the map (the strength of the card, taken into account when collecting the deck, and is not displayed in battle because it is not needed), in a new window, in addition to the parameters from the small window, a setting description of the character on the map appears, and on the right, a help window appears with an explanation of all the keywords mentioned in the card's ability.

  

  This way, you can indicate all the necessary information without overloading the map interface and the game as a whole.

• In the printed version, this will either not be possible,

  

  ..or you will have to indicate the abilities of the cards in the rules of the game.

  

  Or, if it's a setting description and other optional information, make an almanac or art book.

4. Arrangement of elements, search and analysis of references

Now that you have a full understanding of how your card should look like, you can look for games with a similar number of elements and take note of successful solutions in each of them that can be useful to you for your card game.

We look at each element on the map of the selected game and answer the questions:

• Why did the designer place this object here? What advantages does it give;

• What are the downsides to this or could it be in your game? due to different rules or the style of the game itself;

• Where else could this element be placed and would it look as good? to avoid plagiarism.

For example, for your own DANGER ZONE 2.0 I based my designs on Gwent, MTG, Inscryption, Unmatched and Throne of Cubes cards;
For SWINGBALL: UNO, Red 7 and custom Poker decks;
And for Gunt — UNO, Red 7 and Gwent.

With printed cards, the elements in the lower right corner are not visible in the hand, since this part is occupied by the thumb.

Place only unimportant information there that the player will rarely refer to (Description of the card in MTG)

• 10% of people on earth are left-handed. Therefore, it is also undesirable to place elements in the lower left corner, although it is less critical. The ideal option

• In the hand, most cards only have the upper left corner visible because the cards overlap each other.
  Therefore, place the numerical values, card type/class and other information that the player looks at first there (UNO, Fool, Red 7, Gwent)

First final version

Once you have decided on the first final option, you need to do:

1. Rough draft with pencils on paper (won't work well for a digital game, as you won't be able to “unfold information” when performing an action)

2. Make a schematic concept on the computer (Adobe Illustrator, or even Paint) and print the cards on a printer.

3. Make a schematic concept in Miro and test it there.
   (For a printed game, keep in mind the rules of convenience (card size, lower right corner) as you won't be able to check these qualities here)

• It's convenient to test the game with another person at a distance

• Saving money and time on card production

• A great option for future digital game creators if you don't know how to program/work in an engine yet.

4. Engine prototype (Unity, Unreal Engine, Game Maker, etc.)

• Ability to “expand” map information, change size, create new windows;

• Change elements on the map after external influences (receiving damage, applying an effect, changing status, etc.)

6. Cycle of tests and adjustments

• Testing
  Better with a friend – preferably one who is attentive to detail, provides constructive criticism; ideally, with a knowledge base of design and/or game design.

• You notice shortcomings
  Check the points described above – is taken into account in the design of my card? After the game, be sure to ask the tester(s) what they especially liked or, on the contrary, did not like:

  • How does it look in appearance, does it look beautiful?

  • It is also functional, is it convenient to find the necessary information.

After you've identified the problem, ask if there are any ideas for solving it. Even if you already have options, adding ideas from testers, your future community, and choosing the best option from the general selection will allow you to apply the best solution. This will make your map design even more convenient and beautiful than those who don't know how to work in a team.

• Try out different options until you find one that's good/great/or perfect.
  Depends on your ambitions, perfectionism, and free time coupled with skills/experience.

• If you have reached this stage, tried everything available, and the problem is not solved, repeat the cycle.

  In this case, it is recommended to find another tester who can give a fresh look at the problem.

  • Try testing with several testers at the same time – then each tester's thoughts will help others develop their own.
    This way the chances of finding the best solution increase greatly 🙂

Summary

We have gone through step by step what needs to be done to create a beautiful, and most importantly, convenient design for your cards. You have received a list of tips: from the general theory of design to the design of the cards themselves. Also, separate rules and recommendations were given for printed and digital products separately, thanks to which after implementing the game in one edition, you will be able to implement it in another.

Now you have a clear pipeline that you can follow to create your own card game and avoid the negative feedback from your players that those who don't have this knowledge get.