Skip to Content

5 Tips you can use to design better graphical layouts for your prototypes and game designs!

15 replies [Last post]
James Van Niekerk
James Van Niekerk's picture
Offline
Joined: 06/20/2017

http://www.minionsofmordak.com/5-tips-for-designing-better-layouts/

Here's an article I've written for game designers with 5 of my favourite graphic design tips that should (hopefully) help you create better layouts for your game designs & prototypes.

I'd love to hear your feedback, and if you're into this style of content. It really helps me know what to write next!
Thanks for reading friends.

joebergmann
joebergmann's picture
Offline
Joined: 12/29/2016
Thank you!

Excellent information! Thank you!

Joe

AlexanderXy
AlexanderXy's picture
Offline
Joined: 10/27/2017
As a graphic design student,

As a graphic design student, I must say that this is all relevant information that should be considered basic, but it's often ignored even in famous published games.

Graphic design is key to a good game-player interaction.

Very good work :)

X3M
X3M's picture
Offline
Joined: 10/28/2013
A lot of new designers might

A lot of new designers might wonder about the font in general. Times new roman. Courier new. Arial. Etc.

How about a top 3, 5 or 10 of the most common used fonts.
And a, "why?".

***

There is one question from me.
Titles or names are often placed in a box somewhere on the card.
Inborder to fill the box. The size differs a lot. Smallest size is 42 and the biggest is 72. What would you advice hete?

The same goes for the box with text. 22 to 32.

***

You have described the basics very well and understandable.

James Van Niekerk
James Van Niekerk's picture
Offline
Joined: 06/20/2017
Thanks X3M! I have written

Thanks X3M!

I have written this article about selecting good fonts. That might be a helpful start to finding some new and interesting fonts beyond your standards!
http://www.minionsofmordak.com/how-to-choose-amazing-fonts-pt1/

I've got plans to write my top 5 fonts for a few common genres we see in board games (IE sci fi / pirates / western). Feel free to subscribe to stay updated when I get that content posted!

***
To answer your question:
I think if you are dealing with game pieces that are dramatically different sizes, such as a deck of mini cards and large player matts, it's totally fine to break the rule and use different font sizes. Whatever feels right on the game piece. But from one mini-deck to another mini-deck, that's where being consistent with your font sizing is a good idea.

My general rule is, print it out at the size it should be. And if you feel it's reading clearly, and your eye is drawn to the most important information first, you're probably approaching a good place!
***

larienna
larienna's picture
Offline
Joined: 07/28/2008
It's basically only for text.

It's basically only for text. I would have loved to reveive more basic tip for the graphic design.

Also any graphic tip applicable to the design of Nine Patches.

FrankM
Offline
Joined: 01/27/2017
Moving a bit beyond text

larienna wrote:
It's basically only for text. I would have loved to reveive more basic tip for the graphic design.

Also any graphic tip applicable to the design of Nine Patches.

My approach to icons and graphic elements is strictly amateur (i.e., based on what seems clear to me), but I did go out of my way find some research on a topic that I knew I didn't know anything about: color.

A Colour Alphabet is the best thing I've found that's not behind a paywall. Figure 2 gives you a palette of 9 color-blind-robust colors that can serve as the basis of differentiating factions, resources, or whathaveyou that you simply cannot afford to have confused for one another.

Figure 4 gives you a larger palette of 27 distinct colors for more complex situations. In a sci-fi game I'm working on, the current draft calls for 12 identifying colors (factions plus resources with no overlap), though knowing it can't possibly be color-blind-robust I know that these colors need to be coupled with distinctive icons in a 13th color (namely, black).

The 12 colors are spaced as widely as I could manage on that palette of 27, taking from each column only the middle or the top-and-bottom.


But to expand a bit on the existing advice about text, once things get small enough even tiny print-alignment issues can make text unreadable. For this reason, I would recommend that small text be set in a single ink color rather than double-striking to produce a blend. For most situations, that means restricting oneself to a basic CMYK color.

Large text (headlines and logos) don't really have this problem.

Truly large-scale runs can dabble with small text in additional Pantone colors since they can load a fifth or sixth or seventh ink and single-strike the text (these additional inks are sometimes called "spot colors"). If you want to see this in action, look at the flaps on printed cereal boxes and the like, where they'll have test swatches of the inks used. Generally, you'd find CMYK (especially if there is a photo on the box) plus any background color that covers a huge area and sometimes a color or two from the logo.

larienna
larienna's picture
Offline
Joined: 07/28/2008
About colors, there is a

About colors, there is a software on linux called "Agave" where you specify a base color and it gives you matching colors according to various patterns. Very useful for color blind people.

harmon89
harmon89's picture
Offline
Joined: 01/13/2016
Another thing to keep in mind

Another thing to keep in mind for card layout is how will the player be holding the card in their hand and is the most important information going to be visible to the player without them having to fan out their cards too much?

questccg
questccg's picture
Offline
Joined: 04/16/2011
That's pretty neat!

larienna wrote:
About colors, there is a software on linux called "Agave" where you specify a base color and it gives you matching colors according to various patterns. Very useful for color blind people.

Wow "Agave" is awesome ... I wish there was a Microsoft Windows Build for the application. Could be really useful. Googling turn up some non-relevant applications... which had nothing to do with color selection.

Googling also found other matches to color picker application but nothing like "Agave" more like "Color Picker", etc. Darn... I don't have Linux on my laptop and I'm not about to install Slackware again just to get "Agave"!

Update: I found this WEBSITE called "Paletton" which used to be called "Color Scheme Designer". Here is the link:

http://www.paletton.com

It looks pretty cool for designing palettes of colors and you can vary the contrast, brightness, angles, tones, etc. Seems pretty cool. So IF you don't have Linux you can always try "Paletton"...

Cheers!

I actually found "Color Scheme Designer" at this link:

http://colorschemedesigner.com/csd-3.5/

This one is similar but has some other features "Paletton" doesn't have. You can probably work with BOTH to get the color palette you are looking for or to design cooler looking content...

larienna
larienna's picture
Offline
Joined: 07/28/2008
Well the project is open

Well the project is open source, I am sure somebody could compile it for windows, unless the requirements are too much linux libraries dependent.

I could not find where the source code is stored. Else, if you are really desperate, you can put linux on an usb key and boot any computer with the key. Then install agave on the key and run it.

It's an overkill, but it's doable.

James Van Niekerk
James Van Niekerk's picture
Offline
Joined: 06/20/2017
harmon89 wrote:Another thing

harmon89 wrote:
Another thing to keep in mind for card layout is how will the player be holding the card in their hand and is the most important information going to be visible to the player without them having to fan out their cards too much?

Very good points! Especially if you've got a hand of cards in your game you need to reference constantly.

James Van Niekerk
James Van Niekerk's picture
Offline
Joined: 06/20/2017
larienna wrote:It's basically

larienna wrote:
It's basically only for text. I would have loved to reveive more basic tip for the graphic design.

Also any graphic tip applicable to the design of Nine Patches.

This article was just about fonts, yes, but its good to know what else people are interested in learning about! This is an ongoing blog, so I'll be writing more topics. Perhaps an upcoming one can be about icon / patch design.

To weigh in on the colour discussion, here's another tool to suggest:
https://color.adobe.com/create/color-wheel/

Its a web-based program from adobe, but its pretty great. You can just drag around your main colour and then it can pick a bunch of secondary ones based on different styles you choose. It tends to pick pleasing arrangements pretty much all the time. And if you're stuck, they also have an explore tab, where you can see popular colour choices.

larienna
larienna's picture
Offline
Joined: 07/28/2008
Thanks for the color palette,

Thanks for the color palette, it's very similar to agave.

I had a page about graphic design on my website, it was very basic stuff from my experience, but it could give some ideas for your blog. I'll try to find the link.

Else, I am now more interested in how to design nine patches since this is what is used by android video games to make it resizable to any screen size.

Ali Ludlow
Ali Ludlow's picture
Offline
Joined: 10/18/2017
great info

Thanks for sharing!!

Ali Ludlow
Ali Ludlow's picture
Offline
Joined: 10/18/2017
another site

larienna wrote:
About colors, there is a software on linux called "Agave" where you specify a base color and it gives you matching colors according to various patterns. Very useful for color blind people.

That's awesome!!

We found a site that generates colors schemes, it helped us decide on one for our game....it's called Coolors.co

Ali & Britt

Syndicate content


forum | by Dr. Radut