Card Design v.1 – Research & Prototyping

First Thoughts: Visualisation of Concepts

21st January:



Digital Concept



Playing with Template Design:


Visualisation (Style, Colour, Format, Typography):


Visualising my initial concept:

My initial drawing stuck with me throughout this process of visualisation, I much prefer its’ composition as it gives a decent focus on both the artwork of the card and also important gameplay features, such as: attacks, health and other special abilities.


I am in two minds at this point, comparing both styles of cards I like. I feel influenced by Pokemon’s card design – they use a more constrictive boxing to encapsulate the artwork for their ‘common’ rarity cards and then in their rarer cards they remove this boxing giving greater focus to the artwork and less on the other details – the visual difference makes the rarer cards more collectable and interesting as they are a unique and rare addition to any given set of cards. Due to my focus on collectability, this feature seems apealing as a means to generate an attitude and desire for collection by the players – this will need further testing.


Current design choices explained


Attacks & Moves are displayed in the bottom left in a small curved box, so far this has been a semi-aesthetic decision based on compositon and the ergonomics of hand placement upon the card. Compared to the examples given below – which primarily center these features within the bottom section of the card – I have created additional space for illustration as I want this to be a significant proportion of the design at this current time. I may decide to follow traditional placement of these feature if I find that the size of this section limits the visibility of its’ contents – especially when printed in its’ proper dimensions (not yet decided upon).

I may want to expand this section if the description for these moves cannot be easily understood by players -due to the size limitation – as I do not want to limit the functionality of the cards for aesthetic reason only.

The Name & Card Statistics section is placed opposite the attacks section, this area displays important information, such as: the starting health and stamina of the character, it’s current affiliation and any special attributes it may attain. Because this area contains information that requires little to no explanation it can be reduced in size and kept at a visual minimal. IF I find that this orientation is not sufficient then it will be altered to be more ergonomic for players.

The traditional consensous for these features is that they lay directly above the artwork as in some cases they are the first attributes to be considered for play.

Sometimes, like in the case of Hearthstone, these statistical features fill any additional space left after all other important information is placed. The card cost is placed in the upper left most corner as it is a significant strategic consideration for players.

I will need to decide (upon prototyping and testing of the product) what hierarchy my information takes in order to place it appropriately for play.

Art Placement is the most prominent feature of the design of the card, I have done this to improve the cards aesthetic value – this in turn will hopefully influence the cards overall financial value, emotional value and therefore its’ collectability and influence.

Borders – the borders keep all of the above information within a reasonable space. The bold lines of the border – when placed in a physical space – seperates the card and its’ properties from other game components through the principles of grouping (otherwise known in art as Gestalt). Humans naturally percieve objects to belong to seperate or similar groups based on their size, shape, colour and proximity with eachother in space (Interaction Design Foundation, n/a) – this principle is important for design as it allows players to easily recognise different game components (such as: character cards from item cards) and seperate the components into proper groups; allowing for appropriate play to take place (User Testing Blog, n/a)

Comparative Analysis

side by side


Interaction Design Foundation. (n/a). Gestalt Principles. [online]. Available at: [Accessed 21st Jan, 2019].

User Testing Blog. (n/a). Examples of the proximity principle. [online] Available at: [Accessed 21st Jan, 2019].


2 thoughts on “Card Design v.1 – Research & Prototyping

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s