crop cycle

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:
Found at:

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:
Found at:

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.

Not relying on Memory: The Importance of an Indicator Card

Posted on Updated on

A core aspect of Crop Cycle is the use of the four seasons: spring, summer, fall and winter (for all you gamers that don’t go outside…ever). Certain cards can only be played or harvested for points in certain seasons, so managing your cards in relation to the rotation of the seasons is a major factor to win Crop Cycle. After all players have taken a turn and played their cards, the game moves to the next season; forcing players to make hard decisions on whether to keep a hand that is more useful in later seasons or discard their hand and draw (hopefully) more immediately useful cards.

In the first draft of the game, there was no indicator of what season the game was in. Early attempts at memorization led to widespread confusion and it became clear that an indicator of the season was necessary.

Obviously trusting in my own memory was delusional at best. What I needed was some sort of indicator. I quickly created a simple reference card that indicated the four seasons in text. The season the game was on was indicated with a green bead I picked up from Dollarama.

Early prototype of the Seasons Card
Early prototype of the Seasons Card
The Desk where all the magic happens
The Desk where all the magic happens

The solution was elegant and efficient as players were easily able to see what season the game was in. The text-based indicator of the season also complimented the initial prototype versions of the cards, which also used text to indicate which season to play and harvest cards.

Early prototype of a crop card. Believe it or not, this is the second version!
Early prototype of a crop card. Believe it or not, this is the second version!

As I continued to playtest Crop Cycle, the feedback I received on using a card as an indicator for the seasons was positive. Suggestions for improvement began to pop up however, once I printed the second card prototypes, which now included symbols instead of text to represent the seasons.

Early rendition of card with image. Readability was a major concern.
Early rendition of card with image. Readability was a major problem.

Subsequent prototype version only further developed the use of symbols for seasons.

Updated prototype from October 2014.

Once I replaced the season’s text with symbols, I began receiving feedback on the Seasons indicator card. The most obvious suggestion was that I should change the Seasons card from text to symbols, a suggestion I agreed with. The solution was a final Seasons card that looked like this.

The Seasons Card
The Seasons Card

The same colour scheme and symbols for the seasons are used in the indicator card as the rest of the deck. The card was clean and simplistic.

From our playtesters, feedback was mixed. Some thought it was a simple and elegant solution, but others suggested a number of ways that we could further develop a method of indicating the Seasons.

One such way was to use 4 separate cards, each with the symbol for one season on it. Players would place the current season on the top of the pile and continuously cycle through the cards as the game progressed. Having a separate card for each season would draw players’ attention to the current season more readily than one card divided into 4 seasons, but the idea had two drawbacks.

  1. It cost more to produce 4 cards instead of 1
  2. It could easily lead to confusion over the current season if the cards ever got placed in the wrong order

Taken together, the concerns outweighed the benefits and I decided to stick with a single indicator card for the seasons.

Another suggestion was to use a spinner wheel to indicate the season. This would provide a distraction from the use of cards and could lead to some interesting graphical design opportunities. My artist was excited to create something in the same vain as Magic The Gathering’s Colour Wheel.

Image found at:
Image found at:

Unfortunately, several problems quickly arose around the idea of using a spinner.

  1. It cost more than an indicator card. A lot more! This dissuaded the use of a spinner, particularly when combined with the fact that…
  2. It looked cheap. No matter how we designed it, spinner wheels always ended up looking cheap. Even established companies had trouble making their indicator wheels not look cheap, as the plastic arrow had a tendency to bend or spin loosely on the connecting pin.

Like the 4 card solution, spinner wheels cons outweighed the pros and the idea was discarded in favour of a single indicator card. I appreciated all the suggestions I received from playtesters, but this was one case where I had to disagree with the feedback and stick with my vision of using a single indicator card. The final solution uses the aforementioned Seasons card and a harvest point token (also used to indicate the number of harvest points a player has) to indicate the current season. The solution is elegant and affordable, requiring no additional parts while maintaining the graphical theme of season symbols across all the cards.