Developer Diary: Card Design and Format

Posted on Updated on

1What follows is a not so concise summary of our card design up to this point. Please note that the Apples card is in the process of having the image itself revamped. The Posterizing filter left some unsightly colors and pronounced gradient lines on the card image that will be altered in the final version. The focus of this designer diary is to discuss the changes the layout, frame, and text have underwent in the development of Crop Cycle’s cards.

When it comes to designing cards, many games follow a template commonly associated with Magic: The Gathering. The format separates text from the image and focuses on highlighting the text with an opaque box.

Found at: http://images.comiccollectorlive.com/covers/db8/db8d5d5f-e7be-4da6-875f-324ea1e95493.jpg
Found at: http://images.comiccollectorlive.com/covers/db8/db8d5d5f-e7be-4da6-875f-324ea1e95493.jpg

The reason for the popularity of this format is that it works; textboxes ensures the text remains clear and distinct. The textbox can be entirely separate from the image or as a translucent textbox as pictured in the Shadowrun card below. In both cases, the effect is that your rules are highlighted and legible on the playing card.

Found at: http://www.phdgames.com/wp-content/uploads/2014/07/Obstacle.jpg
Found at: http://www.phdgames.com/wp-content/uploads/2014/07/Obstacle.jpg

For the earliest design of the Crop Cycle cards, this layout was what we intended. As you can see from the image below, the initial Crop Cycle card followed the template of the Magic card, with important information included at the top as we as the bottom half of the card while the image was intended to be placed in the middle.

Crop Cycle during the pre-art days!
Crop Cycle during the pre-art days!

The trouble with this format is that it reduces the real-estate on the card for the image itself. Regardless of whether the textbox is entirely separate from the image or placed in a translucent textbox over the image, the result is reduced space on the card for the image.

At this point, my digital designer and I sat down and began to brainstorm alternative design solutions. An important aspect of Crop Cycle is showcasing agriculture, with the vast majority of the photos taken locally throughout our home province of Manitoba. Though I understand the effectiveness of textboxes and accept that Magic is able to make their images work through design decisions given the space constraints of their card format, I wanted to focus on showing as much of the picture as possible.

Several weeks of research, debate, and caffeine consumption later, we came up with a full-card layout.

Note the difficult to distinguish symbol on the left side of the card.
Note the difficult to distinguish symbol on the left side of the card.

As you can see, the first version of the cards presented a number of challenges. After looking it, we noticed some pretty hefty design problems. The use of season symbols to indicate when to play the crop cards were a good way to reduce text, but failed to stand out against the background. Furthermore, the text was far to small and the lacked any sort of effects to differentiate them from the picture.

Clearly we had plenty of work to do.

Now the symbol on the left is much more visible.
Now the symbol on the left is much more visible.

The 3rd rendition of the cards was a definite improvement. Through the use of a drop-shadow and a black border around the letters, we were able to enhance the title and help it to stand out against the background.

Furthermore, we added a border around the symbols as well as a bevel and a drop-shadow to differentiate it from the image. Given that the season symbol stated when a player could use the card, it was critical that the image stood out.

At this point, we shared the card design with our fellow gamers and the broader public through social media and design forums. Feedback was overwhelming and mixed. The elephant in the room was that we had no textboxes, but while some complained about the lack of textboxes, others appreciated the minimalist design of the cards. Both sides, however, encouraged us to make the text more visible.

From the feedback, we took 4 critical lessons.

  1. The white card text needed to stand out more
  2. The planting season symbols still were a bit difficult to differentiate from the cards
  3. The text and symbols were to spread out across the card and should be collected either near the bottom or the top
  4. The green and blue borders, while relevant to the game in differentiating card types, were a bit on the dull side and could use a texture to liven them up

We clearly had more work to do!

test 2The result of all this feedback was an elegant text design that we are proud of. The lack of a textbox does create a trade-off in readability, but we were able to minimize this through the effective use of drop-shadows, a thick text border and a total of 3 shade gradients. These gradients were individualized in intensity and location to each cards based on the amount of text.

We also made the choice to group all relevant information along the bottom of the card, with card’s title providing the only counterbalance at the top.

Finally, we added a texture resembling a grain bag (in keeping with the agricultural theme) to the border of the cards. We felt this broke up the singular colour of the border without distracting players from the main image itself.

We next turned our attention to finding a way to replace the Harvest text and season with a design that parallels our planting season symbols.

8Early experiments with scythe proved busy and misaligned with the proportions of the Fall symbol. We did like that the Fall “Harvest” text was removed however, allowing for additional space for the card’s image and creating consistency with the use of symbols on when to play the card.

9Our next rendition used a spade as alternative to the scythe and we found the symbol was much more effective. The proportions of the spade were similar to the Fall icon and the tool looked much more defined then the scythe.

The concern then became whether the spade should be proportionally larger or smaller then the Fall symbol. While a larger Fall symbol made the details more visible, we were unhappy with the misalignment of the spade to the Fall symbol created my the difference in size.

10In the above rendition, we decided to compress the Fall symbol and align it with the top of the spade symbol. While there is a slight size mismatch, we found that the alignment made it read easier. This was the initial card design we took to the first Crop Cycle Kickstarter.

12 13

Since the first Kickstarter, we have further refined the cards to address two additional flaws.

  1. Playtesters had difficulty identifying the harvest symbols of opponent’s crops. To remedy this, we increased the size of both symbols, with a size-mismatch remaining and helping the player to differentiate between the two symbols.
  2. Players that were color blind found they were able to differentiate between the planting and harvesting symbols, but struggled to tell the difference the Crop and Utility cards (since renamed Event Cards) due to color being the only difference in the card frames. To remedy this, we added a subtle texture of Leaves and Gears to the Crop and Event cards respectively. Further playtests confirmed that many color-blind player were easily able to differentiate the cards based on their frames

At this point, we are comfortable with the layout of the cards. Final tweak include potentially altering the the spade to something more mechanical such as a Combine or Tractor.

As mentioned at the top of the article, the image of the Apples itself is being redone as well and I will update this article once the image itself has been finished being edited.

Advertisements

2 thoughts on “Developer Diary: Card Design and Format

    Cam said:
    May 26, 2015 at 5:23 am

    Interesting read! I’m not familiar with the rules of crop cycle but if the game involves having a hand of cards I would expect it is better to include symbols at the top rather than the bottom of the cards. People tend to hold a hand of cards at the bottom, potentially covering the information at the bottom with their hand. Furthermore, as seen in the image at the top of this article, hands of cards tend to get spread out at the top more than the bottom, meaning more of the card tops is visible than the bottom. Also, if the cards are played onto the table in front of players, information at the top of cards could be more central on the table than information at the bottom of the cards, making it easier for players to glance over at another player’s cards and see the relevant information on them.

    These are just thoughts and obviously since I am not familiar with crop cycle may be completely irrelevant. Nevertheless, I enjoyed reading the article! The concept of trying to maximise the role of the artwork without compromising function is an interesting one and it seems like you’ve done quite well in achieving this!

    Like

      Trevor Lehmann responded:
      June 2, 2015 at 12:37 pm

      Hello Cam,

      I apologize for the monumentally late nature of this response (the kickstarter has a way of making things get lost in the shuffle).

      Placing the symbols at the top of the card instead of the bottom has been an issue I have been grappling with for some time. The basic concern is that if the planting seasons are moved to the top, we have a situation where an imbalance is created in the amount of content on the card.

      As it stands the large font of the card’s title take up an equivalent amount of space as the symbols at the bottom (including the harvest symbol). When we move the planting symbol to the top, we now have a situation where the majority of the content is loaded at the top and their is very little at the bottom of the card.

      The problem is further compounded because we use a series of shading gradients on the bottom of the card to help the text stand out. If the seasons were moved to the top, the most open space on the card art would be subtly darkened.

      I do think your suggestions are solid as I certainly know that how people hold their cards can create a conflict with the seasons location. We previously tried placing them on the side, but people fanned their cards and often blocked the seasons.

      I will be speak with my artist however, as I am sure their is a tweak that can address your concerns. I really appreciate the feedback and I think that having the symbols at the top would certainly go a long way in make the cards more readable for other players!

      Thanks for sharing and all the best!

      Like

Have a suggestion, comment, or other non-spam comment, leave it here!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s