Evolution of Card Design (TCG) news - TerraForge

Greetings all!

As you may know or may not know, DLK Studios is presently working on developing a Digital MMORPG TCG. We have been in development for just shy of a year and are constantly making revisions and changes to our game. We wanted to share some of our experiences with the design of the general card layout.

Recently we have made a pretty large overhaul regarding the way information is conveyed through with our card display. We're happy to say that we're quite pleased with the way the new card display has turned out. Given these latest advancements, we thought we would share some of our experiences and words of wisdom (or there lack of) with you guys. So here it goes.

Synopsis
I really wish I still had the original card display that I had developed about 10 months ago. Man this thing was awful... seriously... looking back at it now, I'm not sure why I ever thought I could succeed in developing an appealing trading card game... anyways I stuck through it, and I'm quite happy with where we are today.

I'll start by talking about the display we had set on, and were planning on using for release, right up until yesterday. So without further delay, here is what a typical creature card in TerraForge looked like (right up until yesterday).

In my opinion, the card isn't awful... but it just covers too much of the image, information areas (such as attack, health, armor, and those gems on the top left) are just far too large and take away from the image. I suppose, my general feeling towards the card display is that it seems fit for a Flash game and not a standalone TCG (with hopes of being AAA). Anyways, what it boils down to, is ever since the creation of the template, I've never been super content with it, I always felt like it needed something more, and different. So, a couple of days ago I finally gathered the courage and inspiration to take another crack at this.

After much work, I was able to produce the layout below.

Aesthetically speaking, I feel there is no comparison between the two cards. The second is far superior to the first (I'd be curious to find out how many of you feel the same way). The information is generally more organized, it's structured, and it's "minimalistic". So that pretty much wraps up the update in terms of the development of our card display GUI.

Development Steps
I'll take some time to discuss the process (very high level overview) of how we go at planning and developing our card displays. Hopefully this may be useful to some people who are interested in developing their own TCGs or simply want to get some more info related to GUI development.

Step 1: Identify Necessary Information
In this step you basically need to identify everything that will be displayed on your card. All of the information that must be conveyed to the player. In our case this was, attack points, hit points, shield points, resource cost, card type, card name, and card abilities. Once you have identified all of these, you know what you have to play with. I know this seems obvious, but you'd be surprised as to how many people jump into these sorts of things without any planning.

Step 2: Identify Card Dimensions
Once again, this may seem obvious, and this step could potentially be done prior to Step 1, but this was just the course we decided to go with. You basically need to identify the dimensions or height:width ratio of your card (ratio is more appropriate, since dimensions really mean nothing in game space). For our card design we decided to go with a height:width ratio of 1.4:1. This was selected simply because they're nice numbers to work with, and are comparable with aesthetically proven card dimensions used in popular games such as Magic the Gathering and Hearthstone.

Step 3: Layout the Information on Your Card Space
Once you have your necessary information and dimensions identified, it's time to put them together. To start planning, I simply start by blocking areas of the card out with grayscale only. I choose not to use any colors at this point simply because it can distract you and sway judgement. The point of this step is just to lay out information. So below is an image example of how this process works.

Step 4: Aesthetic Finishing
Now the last step is likely the most time consuming. This is basically where you make the card look good! It's honestly impossible for me to tell you how to do that since it is dependent on so many factors. What's your game about? What kind of emotions are behind the cards/characters? What kind of information are you trying to convey? etc... At the end of the day this is all really a matter of artistic expression. One thing I can recommend is that you learn how to use a graphic editing software such as Photoshop of Gimp. There's plenty of ways to make things look awesome without ever actually being able to "draw" or "paint" per say. Anyways, I hope this sheds some light on our process and perhaps sparks some ideas out there in the community. Thanks for your interest and taking the time to read this.

Cheers!