Visual Design 101

Basic_Cauldron

So, graphic design.

I've been very happy with Wozzle. It is consistently testing very well locally and blindly, in numbers ranging from 2-5 players. Whenever a game really starts hitting its stride, I get the urge to really notch up its visuals. I love art in games, and though I'm not an illustrator or graphic designer, I strive to improve and learn at the latter as it has a big impact on my games.

This post is about my efforts to improve the visuals of Wozzle and make it a nicer prototype. I'm going to walk you step by step through what I did in the hopes it helps others in their own games. Basically, this is less about Wozzle and hopefully more about tips that perhaps you fellow amateurs can leverage.

Concept: Like all design, you need a vision at the outset. You need to understand your canvas and the information you're trying to convey. Make sure you fully understand the use-case for the element and drive all of your efforts towards making it work in its natural environment.

At a high level, my goals for the Spells were:

  • Give the text plenty of room.
  • Make the text easy to read, especially if the cards are in the center of the table.
  • Have playfulness in the visual treatment, but don't overwhelm the functional text.
  • Keep the cards relatively printer friendly.

In Wozzle, the spell cards have a bit of text on them. They are placed in the middle table, much like a board would be, and are used by all players. This means they need to have a large font so they can be easily read.

Because these cards are never held in any players' hands, I knew that I could use a landscape format. Landscape (horizontal) works really well when you have lots of text that you want to give a larger font size. When you have a lot of big text in portrait, it can be an unnatural experience. The player must go to the next line every few words.

As for visuals, I wanted to have a little whimsy on the cards. I want them to feel a little like they belong in a world of wizards and magic. For my typeface, I chose Ringbearer. I'm not very good at typefaces. Basically, I'm able to detect whether it's legible or not and if it seems somewhat thematic. Ringbearer is, obviously, from Lord of the Rings. I feel it's easy to read and seems to fit the vibe. It's a good placeholder for now, at the least.

When I search for a typeface, I go straight to Google and see what emerges. There are so many typeface repositories -- get outside your Windows Office comfort zone and try one.

Framing: Once I knew the high level concept, I began working on my first card. I wanted to try a few things and get a feel for what was possible in the space. Note: I use Photoshop, so I'll speak generically about what I did so you don't need to have Photoshop per se.

A_Numeras

  1. Title: I picked an average length Spell name and put it in the top left corner. There was plenty of space, even at a 24 point font size. I stuck with plain black, but then lowered the layer's opacity to give it that slight grey feel. I then added a drop shadow and tweaked the opacity there as well. This helped the text jump out a little without being oisy.
  2. Body Text: I used an average length spell action text and began moving it around the center. I made sure I had enough room for the text even at 18 point font.
  3. Background: I Googled parchment and sampled a few pieces. I settled on one that was simple and provided a little texture. I set this to my background layer. I stretched it a little, but not too much. At some point you lose the sharpness. One thing I want to add is a frame, but I don't have Illustrator and I don't really know how to do this. For now, I'm going without.
  4. Flourish: I wanted a flourish, so I Googled around the premise of "fantasy frame" and "fantasy graphic" until I found a piece I liked. That's what you see in the bottom right corner. I reduced its fill to subdue it and let it act more as an accent than something to dominate your eye space.
  5. Spell type: I wanted a way to denote Basic versus Advanced spells (bottom left corner). I liked the simple Book icon from Game-Icons.net and used it for the Basic. I then chopped up another icon to add some pizzazz for the Advanced version. These are in the bottom left corner. Their importance is low, so I gave them a low priority on the card. For the Advanced Spell, I increased the opacity of the book, rotated it slightly, and subdued the little wings so the Book stood out. I also gave the book a light stroke.
  6. Ante: I needed to find a place for the Ante symbol, which is a mechanic on some cards. It's very important and needs to be easily seen. I originally put it just to the right of the title, but one of my testers noted it should be flush right so it has a consistent place on every card. Good idea. You don't want players to have to relearn the layout on a per card basis, even if it's a slight tweak. That just adds up over time. For the Ante, I took the mana symbol (the center), but put a frame around it. You're supposed to put a Mana token on the card. My hope was that the frame drew the player's attention and helped him target the placement.
  7. Art: I want each card to have a nice illustration, something to drive home the feel of what you're doing. But, the text doesn't leave a lot of room for such things. Not if I'm unwilling to sacrifice the big, fat, 18 point font (which I'm not). The idea that came to me was using a watermark style treatment. Put the illustration front and center, but subdue it in the background. I'm really pleased with this subtle addition. I dropped the opacity to 30% and just put them in the center. They are quite faint and as such, I'm allowed to keep them reasonably big. One thing I had to keep in mind as I chose and placed images was to make sure they didn't collide with the specific text.

Icons within the Cards: Taking inspiration from Dominion, I wanted to add a few really key icons to the body text to help the player's grasp the concepts more quickly. My rule was that I needed to use the term more than a few times and it needed to be something easily represented with an icon. Here is a quick shot of the icons I use for this purpose:

IconBar

Some of these icons you've already seen in the examples above. The left two represent cards (with the number in the center) and Community cards. The hat, of course, represents Wizard, i.e. player. I use the term Wizard exclusively in lieu of player in the rules. Next to Ante, you can see the icons for Wisdom (points) and Mana (coins).

Will this solution work? I'm not sure, but I'm hopeful. It uses a bit less text than writing everything manually and it's quick to read certain concepts, even from across the table. I imagine it may need some iteration, but I'm confident this is indicative of the final direction.

Here are a few more complicated Spells.

A_WizardlyPlans

A_Abundance

A_TruthingSpellText: Taking inspiration from Dominion, Magic: The GatheringKing of Tokyo, I resolved myself to use very consistent text language. Doing this very early really helped constrain my ideas in a good, meaningful way. It also allowed me to use the icon system described above. Plus, it helps with accessibility.

Conclusion: Was this post useful at all? Any questions? Anything else you'd like me to talk about?

Thanks for reading!

Comments

Once again, great post Grant! Thank you for this short and simple tutorial.

I am curious to know why you want to add a frame to the cards. Personally, I prefer card designs without frames and yours seem to work out pretty well that way. Do you have something in particular in mind or it's just for the sake of it?

Cheers,
Tiago

Seems like it would be nice. Having some sort of visual frame to encase the title in the top left, or basic icons in the bottom left or top right. I'm not an expert, so it's mostly something I think would be nice.

How do you get them printed and get the game pieces all set up and packaged to sell? I'm not even close to that yet but it's still a concern.

Are you asking about production and manufacturing? That's a whole other issue!

Nice post! I liked the way you went straight to the point while being very informative!

PS: just a small correction: in "Flourish", it's in the bottom right corner and not in the left as you wrote ;)

Telmo

Ugh, I'm an idiot. Thanks for the heads up.

Wow. That's a prototype and a half! Props to you!

I too love adding prettiness to games.

A part of me sometimes worries that I go too far while prototyping. Good art is a great boon to games, and this art is awesome. Do you ever feel that by making a game look too good you obscure flaws in the gameplay by adding a halo effect around the design?

I typically don't begin any art or graphic design beyond PURELY FUNCTIONAL until I know the concept is fun. Wozzle has been tested quite a bit locally (me and my friends, people I find in person), but also a bit elsewhere by people playing my PNP. I've also had the rules read and evaluated quite a bit by numerous people. The game is by no means finished, but I'm confident that it's a fun game and it's worth pursuing. Good art can't hide a bad game. My circle of friends, also designers, will rip it up no matter how pretty it is. But, good design can enhance a good game and get people more interested.

I was at a point, testing, where the wall of text on a white background was insufficient. I needed to begin testing the game in a setting that is more indicative of what it'll finally look like. By re-designing the cards and applying a nice art layer, I'm able to see if the game is more fun and works better like this.

Does that make sense? The Summary is: Gameplay and mechanics first. Make sure you have something fun. Then, begin adding layers to enhance this fun and strengthen the game.

Yes. That makes perfect sense!

A decent way of operating, which I shall try to emulate - with me, the issue will be trying not to get too excited and start on the artwork too early.