Nov 03 | 2017

5 Tips for Designing Better Layouts

This is by no means an exhaustive list, but these 5 things are often my first pass of feedback when looking at somebody’s design (including my own!). Hopefully you can make use of this list to avoid some of the common pitfalls that make me a sad designer! –>

#1 – Font Margins

A mistake I always see people make is to have their text uncomfortably close to the edges of a backer. Text needs to breathe. It always looks best when it has a very comfortable air around it from all of its surroundings.

You also need to be aware of how a component is cut to make sure you are providing enough wiggle room around it’s edges so your important content doesn’t get cut off during manufacturing. *It should be noted that this is an inner margin (like a safe-zone for content) to account for imperfect cropping, this is additional to the bleed space you already need to provide at the edges of your artwork.
(Image from of Panda Manufacturing)

#2 – Line Height

Coupled with the above, I usually like to boost the line height a little above the auto-setting on my paragraphs. It has to do with creating a nice comfortable, breathable, legible formatting for your text, and it just looks better.

If you find yourself breaking these two rules so that you can fit your text onto a card, consider whether your card is more complex than it should be. I adhered pretty rigidly to a character count when designing my game because I really wanted to avoid wall-of-text cards you have to read several times before using. For me, if the card couldn’t make sense within the limited characters, it got simplified.

#3 – Font Size

If your font-size is less than 10 point, be aware that you’re approaching legibility concerns and make sure that you have test-printed the piece to ensure you are more than comfortable with reading it. As a general rule, I wouldn’t go smaller than 8 point font, but 8pt is often perfectly legible. From font-to-font, the definition of a point size can vary, and some fonts just don’t read well at small sizes, so putting it to the print test is always a good idea.

#4 – Hierarchy of Information & Fonts

I think about hierarchy a lot when I’m laying out a page or card or component, and choosing my fonts. What do I mean by hierarchy? Well it’s the order in which a viewer will pass their eyes over my content. If you look at the page, or card you are designing with squinted eyes, what jumps out first? Then second? And so on.

In terms of game design, if the players constantly need to see a Monster’s health during play, you’ll want the hierarchy of the card to lead their eye to that information first and foremost, it might even mean that the Monster’s title is smaller if its less functionally significant to the player!

The main tools I use on my fonts for emphasizing hierarchy are:

I most commonly use 3 styles for most of my layouts

• A Headline
• A Subhead
• A Body (and sometimes Inline-Titles)

At the start of a project I will set up each of these heading styles using dummy text (which we designers call Lorum Ipsum) on a sample layout like the one below. I’ll apply my display fonts and body fonts to these styles and tweak their size / weight and colour until I squint my eyes and feel I am seeing the correct hierarchy.

#5 – A Cohesive Whole

Fonts are a very important way of establishing a cohesive product which ultimately amounts to a well branded game. A good way to maintain this feeling is to be consistent with your Headline / Subhead / Body Fonts. Though on different sized cards you may have to change the sizes so they fit, try not to be arbitrary about it. Think a bit about how else you have used titles in your game.

For Example:

• “On headlines in my rulebook I used all caps, perhaps I should use all caps on my card titles as well?”
• OR: “On these cards, my headline was 30 pt. Is there a good reason why it isn’t also 30 point on this other separate deck of cards?”

Closing Thought

Well I hope I haven’t lost you, this was more difficult to write than I thought. I’d love to hear your feedback on the article, if you liked it, and any of your questions.

Feel free to message me, I’d love to see what you’re working.
Definitely share your thoughts in comments below, and thanks for reading!

For more tips on selecting great typefaces, check out this article.