Finding The Right Card Layout

Designing cards for your game is a battle on two fronts: The art and the layout. Both have an equally important impact on how players interact with and enjoy the experience you’ve created.

For Western Tropic, I've found an incredibly talented illustrator to help create characters, landscapes, box art and more, but I've tasked myself with owning the layout of the game's cards. As I continue to tinker with what the final cards look like, I wanted to provide some insight into my process. 

Inspired by a recent episode of The Board Game Design Lab podcast featuring Nolan Nasser, I wanted to focus my own art direction by studying existing designs and forcing myself to describe what I like or don't like. Since I'm designing a tabletop game, the obvious approach would be to use other games as reference material, but I've instead opted to go with a slightly different approach. 

A Visual History of Graphic Design is a gorgeous (and very heavy) book I recently acquired to serve as an impressive addition to my coffee table collection. It will also work well as a weapon in case burglars break into my house. It's a collection that looks primarily at posters produced between 1890 to 1959, and since posters are very much like giant playing cards, it's given me a very appropriate selection of examples to analyze. Since my game's cards are essentially modeled off standard 52-card decks, it's very important that they have a distinct and premium look that gives future players a reason to buy my deck and not just use one of their own (although the game is very intentionally being designed to be playable with a standard deck too). 

A few quick callouts...

  • I'm not a professional designer. Take all of this with a grain of salt.
  • I'm not going to use fancy-schmancy design language because I don't really know it and I'm writing this post for other non-designers like me.
  • Try to ignore the artwork in the examples below. This post is about arrangement, readability and conveying information and emotion.

Balancing text and visuals

Many game cards try to isolate text and visuals to avoid issues with readability. Magic: The Gathering is a well-known example of this approach. On the flip side, standard playing cards typically can have symbols, letters and images live in harmony since the ratio of words to pictures is low. In the two examples below, you have a pair of similarly themed posters carefully using white-space (doesn't need to literally be white) with a prominent image. 

Josef Müller-Brockmann - 1954

Josef Müller-Brockmann - 1954

Hisui Sugiura - 1920s

Hisui Sugiura - 1920s

In both pieces, the artists were able to avoid sectioning off text because they weren't dealing with paragraphs of information. They were even able to place some text on top of the image while maintaining readability. This was accomplished by placing text over parts of the visual that had minimal color variances or textures. The Sugiura piece (right) does a slightly better job than the Müller-Brockmann (left). 

For Western Tropic, players will be seated around the game's cards and in many cases will be viewing text upside-down. Since I'm not looking to create mirrored cards (like typical playing cards) I'm carefully considering the size of text/symbols and how they interact with the illustrations taking up most of the real-estate on each card.

Borders and Lines

Getting into the weeds a bit more, you can use unique lines and separations to compliment the story being told by the artwork itself, in addition to the functional element of ensuring you're keeping information easy to consume.  

Wiktor Langener - 1937

Wiktor Langener - 1937

Henri Privat-Livemont - 1897

Henri Privat-Livemont - 1897

Francisco de Cidón - 1902

Francisco de Cidón - 1902

A.M. Cassandre - 1929

A.M. Cassandre - 1929

Top Left: Instead of using traditional clean lines for a border, the artist complimented the organic feel of the painting with brush strokes around the edges.  This approach could help give a card dimension without having to use shadows around the perimeter. Placing text on top of this loose border (though somewhat messy) adds further depth.

Top Right: Our brains are wired for pattern recognition. In this case, the actual illustration (the man's coat) is used to complete the rectangular border of the poster. The white space created by his clothing also separates the busier part of the artwork from the text. Obviously, this technique won't work for every kind of artwork, but for games that use simple/solid shapes and colors, this is a nice way to balance the space and make words or symbols pop. 

Bottom Left: Advertising used to be a lot more pretty! This piece promoting corsets back in 1897 uses lots of lines but by pairing them with curves and cutouts, the overall design still has a very organic feel. Much like the product actually being featured, the art has lots of rigidity, but you really only notice the overall softness. For games that need to convey a lot of information, this style does a nice job of maintaining readability with a very busy design.

Bottom Right: Lastly, this example shows how words/text can also serve as lines. The top of the card doesn't have an actual line drawn around the edges, but the varying colors and shapes of letters make your brain fill one in, and it compliments the hard lines in the illustration quite well. This technique is one to be careful with when it comes to potential players who are color-blind. In this case, the black and grey may be a little too similar and blend together for certain people. You can reference this handy guide to colorblind-friendly design.

Layers

Cards are obviously static two-dimensional objects. Unlike video games like Hearthstone where cards can feature animations, tabletop cards can convey more character through the unique use of layers.

Alphonse Mucha - 1902

Alphonse Mucha - 1902

Constant Duval - 1914

Constant Duval - 1914

Edward Penfield - 1907

Edward Penfield - 1907

Left: In this example, the text and illustration are largely separated, but by breaking free of her container, the woman appears to have more dimension. For games that leverage mostly 2D artwork, having letters in front of and behind objects can easily give the cards a 3D feel.

Center: Here the illustration and the space for text should be in two different layers, but by having the art encroach on the dark area reserved for text, a very interesting 3D effect is created. The subtle touches of the branches growing from outside the landscape, and the ground underneath the person mess with your head in a good way. For games that need space for blocks of text, this is a nice technique for avoiding the text and art feeling to isolated from each other.

Right: When it comes to using common words or symbols, you can increase the size of letters by hiding some of them behind your art. Obviously this approach assumes enough of the word is exposed so people can fill-in the missing leters in their minds. 


What's Right For You?

Finding examples of great card layouts is easy, the hardest part is choosing which styles make the most sense for your game, and will make your artwork shine. As someone who was and continues to second-guess the "best" layout for my upcoming game, the act of describing specific design features has really helped me filter through the types of designs I want to reference as  I continue to refine Western Tropic. Below is work-in-progress artwork that I still need apply a layout to.

jungle bounty.jpg
jungle under.jpg

For those of you going through the same type of exercise right now, I recommend asking some of these questions as you mine through Pinterest, books, game stores and more:

  1. Does this design have something that feels uncommon? What is it?
  2. What is your least favorite part and why?
  3. How would you fix that? 
  4. Is there a type of person who this design might not work for?
  5. Does the layout and design work together or is it disconnected?
  6. In what order are you reading text? Do you think that was intentional?
  7. Could you read this fairly easily from different angles?
Len KendallComment