• Sarah

Phase 4- Card design concept

Updated: May 5, 2019

Rubi has designed some very nice assets for the ingredient cards, they use beautiful fine lines but the black stroke makes them stand out. With these in mind I am going to come up with some ideas for card designs utilising these images.

Rubi's ingredient card asset- Wish of a Dandelion

Colour palette

We also have our colour palette that we designed in week 10. These colours were chosen because they're bright and I believe that they are attractive to children. The application of the colour will be practiced in my card designs to see what works well.

Card design research

I have started by looking into the user experience of the cards. As the child is engaged through visuals its important that the card appeals to them. I found a article about creating good user experiences for children which showed me 3 key elements(Children-first design: why UX for kids is a responsible matter) . These are bright, colourful and cheerful colours (already in place with our colour scheme), tangible graphics to help understand meaning and that the interface should create a mood. I then went onto look at children's card games that had these features. These included 'Creature Clash', 'King of Tokyo and the 'Beasts of Balance: Battles expansion pack'. I was particularly fond of King of Tokyo with their use of depth with the type. They used drop shadows to achieve this as well as having a varying layouts for the card titles. This keeps it interesting for the player. The 'Beasts of Balance: Battles expansion pack' cards were very interesting. They used gradient backgrounds, with various blocky shapes in the foreground with varying tones.

King of Tokyo

Beasts of Balance: Battles Expansion pack

Conceptual card design ideas

With these features and colour palette in mind I went on to create two design ideas. Both of them being influenced by the gradient use in the 'Beasts of Balance: Battles expansion pack'. I used a typeface that we had seen when looking for our logo typeface on these cards. They had similar slanting accents to some of the others we looked at and simply reinforced the wizardry theme. I wet on to create my first design idea from this. Rubi gave me a bunny asset with a fill to experiment with. I was trying to creating patterned backgrounds with gradients but I was using the wrong type of colours, they were too contrasting and just looked like a mess of gradients. At this point I also spoke to Rubi about having the assets without fill so there is a bit more design freedom with application of colour.

First card design concept

With the next assets Rubi sent me I tried a different approach. I thought about how I could applying varying tones to create a paintbrush style background. By layering the tones I found that there were some beautiful colour combinations appearing, which we think we appeal to the target audience. In these designs the idea is that the ingredient assets don't have a set place on the card, different cards have different pacing. This makes it more engaging for the children. As well as this I created a white border which we thought was a nice contrast to the dark thin stroke of the asset. I think this worked really well together.

Second card design concept

I decided to further this design by creating depth with the characters. I used two ways to do this, the first being a white outer glow and the second being the addition of stroke. Due to the transparent assets the outer glow softened the inner elements. It worked well pulling further focus to the element. The addition of stroke also pulled the focus. It made it stand out on the card as opposed to softening. As I liked both effects I decided to mix both of them which worked really well. I continued on and produced a selection of cards in various colours of the colour scheme.

Final card concepts

When I had finished creating the conceptual card designs, I decided to apply them to the NFC cards we had been using for the tech prototypes. This was my first time printing the designs and upon completion I noticed that the fine line work of the asset was extremely small. This is a major graphic design sin and I shouldn't let it happen again! Always print to see, as scale is super important and can completely change your design. On the subject of scale. the NFC cards that we have are very small and I cut the card designs to the same size as them. However I should look at anthropometrics next semester as this size might be appropriate for the 8-12-year-old. The small size also effects the text size, the text must be legible for the players yet have enough blank space away from the asset. Next semester I should experiment more with the backgrounds, type and scale to form a uniformed style for the ingredient cards.

Designs applied to NFC cards


The ingredient cards serve as the main object of gameplay. For this reason, they had to be incredibly visual, focusing on the image portrayal of the card name. This drew from looking at the Alchemical Tarot: Renewed 4th Edition cards. The centralised image in tarot cards has real impact which is something we wanted to achieve. The fine line drawings used on the tarot cards also aid this and influenced the ingredient card image assets. There is also the white border which frames the card contents, working well with the fine line illustrations with a fine stroke itself. However, as well as this, the data on the card needs to be displayed clearly and be predominant in the visual hierarchy, in order for the players to make decisions in gameplay. To give more space for the type element the cards have different alignments of the images.

Looking at other card games, the Beasts of Balance battle expansion cards provided great inspiration that directly appeals to our target market with its use of colour. It utilises the design trend of gradients in its backgrounds with bold colour statements in the foreground images. We utilised a similar range of colours, for gradients, with our colour palette, applying them to our background with brush strokes to highlight the card name’s purpose. This was applied in a watercolour effect, contrasting against the black lines of the illustration.

These cards and other research into children’s media, has shown us that games targeting this age group are opting for sans-serif typefaces as opposed to traditional print serifs. This is applied to our cards as we believe that it makes the cards less serious and appeals to our target audience best. The chosen typefaces were Expo Sans Pro in Bold Condensed for headings and Acumin Pro Extra Condensed for body type. The typeface for the headings has slanted accents which works as with our wizardry theme. It contrasts more traditional serif type associated with wizardry, whilst maintaining the theme.

These features were tested and applied to our test NFC cards where it was apparent that the size of the card (55mm x 86mm) was too small for its contents. By looking at other card games, such as Exploding Kittens and Top Trumps we think that a larger size card would be appropriate. The proposed size is 62mm x 100mm which gives enough room for blank space between illustration and type. Also, the fine line illustrations were slightly to fine to see. However, we wanted to maintain the fine nature. We experimented with stroke and found by applying an additional 0.5pt stroke, the illustrations were clear yet still appeared intricate, the desired effect. Future developments are going to be made in the background designs exploring both digital and physical artistic methods, as well as the creation of the full deck of cards.