Hey, gang!

Full disclosure: I am not a graphic designer. I do not have the training, the knowledge, the finely honed skill, or the experience to call myself one. This is why Osprey Adrift’s team includes a professional and amazing graphic designer, Von Serrot. who’s taking the reins with all the visual stuff that I’m just not that good at.

That said, after several rounds of playtesting Osprey Adrift, I’ve had the opportunity to flex my graphic design muscles quite a bit. The game started (as most of my games do) as a bunch of scribbles on index cards. But over the course of its evolution, the need for something a bit more… visually appealing arose.

The purpose of this post is to give any graphically design challenged game designers some tips and tricks to at least put together a decent demo or prototype. So read on! And if you’ve got any tips of your own, sound off below!

Text

Text is perhaps the single most important piece of basic game design, because it lets players know how they’re supposed to play the game.

eye chart.jpg

1. Make sure your text is big enough! Even if you’re like me and you have a tendency to be overly verbose, you need to make sure whatever text you have is large enough for players to read. This sounds obvious, but you’d be surprised how easy it is to forget this. The game’s all in your head, so don’t take it for granted… other people will actually need to read it. It can be easy to ask yourself the question, “how can I fit all these words on this 3.5″ by 2.5″ card?” and immediately answer it with, “shrink the words!” Try to avoid this if possible. Instead, cut out unneeded words – it’ll improve your copy for the final game anyway. Also, when in doubt, view the file you’re creating at an ‘actual size’ resolution to check for how readable your font size is.

fonts.jpg

2. Choose the right font. A real graphic designer could give you an entire course on fonts. Serifs vs. sans serifs, kerning, line spacing, shape, flow, there are a lot of things to consider. However, my little tip as a non-designer to non-designers: Stick to one of the ‘basic’ fonts. Don’t try to choose something crazy, or you’ll either wind up with something that’s completely unreadable, or something that looks ridiculous. (Hey, even I know not to use Comic Sans in an un-ironic context.) Arial, Calibri, Helvetica, Times, Futura… these are all fine choices. And remember, unless you’re putting together a final version of your game, the main thing to remember with text is to make sure it’s legible.

Iconography

Icons or little logos are useful for standing in for concepts, mechanical features, or frequently repeated text. Creating a unified set of icons can add a lot to a game’s visual appeal.

icons 2.png

3. Use Iconography only when it’s needed. You can cut down on a lot of text by replacing it with icons. However, don’t go overboard. It’s difficult for players to remember three dozen icons, especially when each one is only used a handful of times. Look for instances of game mechanics that are repeated frequently, and think hard about whether or not you should create an icon. Err on the side of caution. Unless you’re designing a deckbuilding game or a CCG/LCG/etc, if a card has more than three icons on it, there may be too many.

weather icons.png

4. Your icons need to make sense. Use simple, easily recognizable images that actually represent the idea they’re meant to convey. Hearts for health, lightning bolts for electricity – it should be intuitive. Don’t use overly complex images that require the player to squint or scratch their head. I actually like to use the Webdings and Wingdings font sets – you can use the ‘character map’ on your computer to copy and paste these. It’s a whole lot easier than trying to find (or create your own) sets of icons that may need to be resized and/or not be cohesive overall.

icon mess.png

5. Put icons toward the edges. If they appear on cards, put icons in the corners, the tops, the bottom (in other words… the edges) of the overall design. You don’t want them to draw the eye. They’re there for reference only, not to be the central focus.

Colors

Color is an important element of your design. Do you go with something bright and happy, or a more dark and sombre color scheme? Which colors do you go with for backgrounds? For the other design elements?

colors.jpg

6. Limit your color scheme. Pick only a few colors for the overall design of your components. Pick a main color that conveys the feeling you’re trying to convey, and stick to that, plus only a couple other colors that are either similar or complementary.

hard to read.png

7. Contrast the color of your text with the background it appears on.  White text looks best on dark backgrounds. Black text looks good on very light backgrounds. Avoid text that’s a color other than white or black (see #8 below). And, avoid putting text over a background image that’s not a consistent color; it might be beneficial to throw a ‘banner’ layer in-between the background image and the text to give it a flat surface on which to appear.

black text.jpg

8. Use true black for text. Stick to either white or black for all of your text. And, despite what digital marketing trends may tell you, avoid using that sort of ‘off-black’ gray text color. When it comes to printed media, black should be black. Make sure the text is true black.

RGB vs CMYK.jpg

9. Know the difference between RGB and CMYK. Color is coded a number of different ways. Generally speaking, when it comes to digital media, colors are created with a different combination of Red (R), Green (G), and Blue (B) light. Computers use a number from 0 to 255 on each of these three scales to create every color possible. On the other hand, in printed media, colors are created with a different combination of Cyan (C), Magenta (M), Yellow (Y), and Black (K). It’s not super important to know the codes for colors; however, you should at least understand how to convert a digital file (RGB) to a printer-friendly color format (CMYK) if you’re going to print it out.

Borders

When you’re printing out cards, it’s important to know when and how to use borders around the edges.

marked cards.jpg

10. Use common borders on the back of cards. Because decks of cards are–usually–meant to have a common back so the faces are kept secret until flipped over, it’s important to make sure the backs are identical. When cards are printed and cut, there is always a small amount of drift caused by the cutting equipment. While professional printing operations minimize the drift so it’s almost unnoticeable, you should still do everything in your power to keep mechanical drift from essentially creating ‘marked’ cards. Unless the image for your card backs have a solid color all the way around the edges, you should add a border. This will keep the players’ eyes trained to see the entire image and not notice when there are inconsistencies.

dirty card border.jpg

11. Use black borders instead of white, if possible. This is really more of a preference issue. White borders on cards tend to get dirty very quickly. While it’s true that black borders can fade or chip, if the cards are of significant quality, then this won’t be much of an issue. It’s better to have a slightly faded border on a well-used card than to have a border that’s turned brown and yellow from years of dirty fingers touching it.

Textures and Lines

textures.jpg

12. Use textures to create a mood. There’s nothing wrong with having flat backgrounds on printed components, especially if it’s just for playtesting purposes. However, if you can find or create a decent textured background, then it’ll go a long way toward creating a mood when players play the game. Think about what time period/theme/feeling the game is meant to convey, and go with that. Got a pirate theme? Old wood and parchment can add to the experience of pirates on a ship. Got a game set in the distant future where metallic cyborgs and androids are common? Polished metal and smooth surfaces might add to the overall aesthetic of your game.

wood texture.jpg

13. Textures should be consistent. If you do decide to use textured backgrounds, make sure they’re not varied so much within the same background image that it becomes distracting. The background should be just that: a background. It shouldn’t be the central subject of your component.

line weights.gif

14. Give lines enough weight. The lines that you put around boxes of text, images, etc. should be thick enough so they adequately separate the various sections of your design. Thin, single-pixel lines just look distracting and don’t do a good enough job of blocking off the areas of your components.

Tools

design software.jpg

15. Use what you have. At some point, you’ll want to get professional design software (such as the Adobe Creative Suite: Photoshop, InDesign, Illustrator, etc.). This’ll allow you to view any artwork that artists create, if you’re working with professional artists on a project. More importantly, it’ll allow you to make minor edits to things like text, should you need to down the road. However, when you’re just starting out, don’t spend a bunch of money on fancy design software. Use what you have. Though not technically a design program, I often use MS Visio to throw together quick card and image layouts. It came with my computer, so it wasn’t an extra cost. And, it has quite a few features that make it fine for someone who’s just designing for prototype purposes. There are also quite a few decent free design programs out there.

 

Well, I hope some of what I shared is helpful to you! If you’ve got any tips of your own, share them below! Until next time, gang. Keep it plucky,
Nick

Leave a Reply