Visual Design 101
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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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:
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.
Text: Taking inspiration from Dominion, Magic: The Gathering, King 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!