Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I've made a few games which I've actually released into the wild. There's one particular issue I run into over and over, and that's the issue of the interface/theme of the game.

How can you make non-arbitrary, consistent decisions about the look-and-feel and interface of your game?

For example, in version one of my Silverlight chemistry-based game, I made a (bad?) decision to go witha natural, landscape-style look-and-feel, which resulted in this UI:

Valence 0.1, replete with grass, rocks, and sky.

Then in a later iteration, I got smarter and went with a more "machiney," grungy look-and-feel, which resulted in this (final UI):

Valence final version looks more machine-like and grungy

I will definitely say that my taste in UI improved through iteration. But it was a result of a lot of initially arbitrary decisions followed by a lot of tweaking.

Is there a better way to figure out how to theme your game?


To give a parallel in writing, when you're writing a fantasy/sci-fi novel, there are a lot of elements you need to describe. While you can arbitrarily invent objects/creatures/places/etc., you get a much more consistent world when you sit down for a few minutes and design the area, region, planet, or universe. Everything then fits together nicely, and you can ask yourself "how would this work in this universe?

Edit: It seems like I didn't explain this well. Let me simplify the question in the extreme: when I need to lay out a title screen (with background, fonts, skinned buttons) how do I decide how they should look? Green or blue? Grunge or not? Rounded or flat? Serif or sans-serif?

Take that question and explode it into your game as a whole. How do you figure out how things should look? What process do you use to make them consistent and non-arbitrary?

Look at the screenshots again. I could have stuck to grass/sky/rocks, but metal seemed more fitting to the idea of chemical reactions and atoms.

share|improve this question
    
I want to clarify that this question is not specific to a format or game or platform (except maybe 2D games); it's generic to any games you may build. –  ashes999 Oct 7 '11 at 13:43
8  
First, your edit happened three minutes after my comment. Second, you are still asking "How do I cultivate a good design sense?" There are many books, entire degree programs, and yes, even ux.stackexchange.com that can help you do that - but even a dozen paragraphs of answer here will not even get you started. –  user744 Oct 7 '11 at 14:11
1  
"In this mode! In this mode, you have..." –  Dan the Man Oct 7 '11 at 14:52
1  
@Nevermind: Except there's an entire UXSE devoted to such things already. –  user744 Oct 7 '11 at 17:04
5  
UI != Graphic Design. Both of your examples above have the same UI with different graphical themes. –  DampeS8N Oct 7 '11 at 19:28
show 7 more comments

7 Answers 7

up vote 13 down vote accepted

You seem to have conflicting styles.

Have a look at these UI's from Peggle, Ultima Underworld, Diablo 3, Starcraft 2, and Gran Turismo 5.

Notice how each UI is consistent within its theme.

Peggle

Peggle is pin-ball like in all its UI elements. Everything's a meter, a lever, a nozzle, a springboard.

Ultima underworld

Ultima Underworld has UI elements are iron/steel, potions, backpacks, maps. Adventure Time.

Diablo III

Similar to Ultima underworld (in fact appears to be based on UW)

Starcraft 2

Futuristic, sleek, simple, minimal (protoss)

Gran Turismo 5

Car interior

So you see, your first design is completely inconsistent and unthemed. What an open field have to do with your game? Same goes for the metal background. Try a lab bench for the game board, and a chem lab background, with flasks and vials and rubber gloves and petri dishes.

Dr Mario

Dr. Mario is very basically medical, bacteria, virus, medicine themed

Further the UI should have similarly-styled graphics to the game play elements. The chemical symbol balls are round and gently graded solid colors. The backgrounds/game board you chose have art styles that are completely dissimilar to the gameplay elements. The field is a vivid photograph. The metal is very detailed, while the chemical balls are smooth and relatively undetailed.

share|improve this answer
1  
great answer, bobo! –  Dan the Man Oct 9 '11 at 18:39
add comment

EDITED:

Ok, I've rewritten this, now that I understand the question better.

The reason I got confused is because you tried to give a parallel in writing, but the example you have is not parrallel at all. The design of a UI is a question of presentation. The content of a book is about the actual substance.

So, looking at UI design as a question of presentation, you have to think about what you want to present. I mean, of course you are trying to present your game, but what else? Do you want it to appear professional? Fun? Dark? Light?

As an example, I will look at the two images you posted, and tell you the impressions I get from them.

The first one, there are some obvious aspects of it we can look at. It is lighter than the second image, of course. Add that to the fact that you chose an image of a field with depth (as the field tilts away from the viewer) and the feeling is one that is much more expansive. It feels more free, it feels more light-hearted.

When you look at the second image it is, of course, much darker. It also has a background that is a flat image perpindicular to the line of sight of the viewer, taking away that sense of continuing depth the first image had. Add that the only real depth cues come from the shading on the diamond plating, and it brings that background image up very close to the camera. All these add together to give it a much darker, more claustrophobic feel to it.

So now, what can you do with the two themes? Well, the first theme is something that could be good if what you want to do is make it feel more casual. It gives a sort of sense like what the player is doing right now with the game pieces is not all that is going on in the world. The second image gives it more of a sense of urgency. The "known world" of the game is much smaller, and it puts more emphasis on what the player is doing.

share|improve this answer
    
Doesn't really answer my question. I have no problem designing the game, mechanics, story, background, etc. but smaller issues like theme, choice of colour-scheme, fonts, style, etc. (even after double majoring in CS and design). I really have no guidelines of "why X and not Y" in terms of overall look and feel. That's what I'm after. I've edited my question to clarify and simplify. –  ashes999 Oct 7 '11 at 14:04
    
Ok, I rewrote my post accordingly –  DeM0nFiRe Oct 7 '11 at 14:43
    
Great answer, but doesn't answer my question -- how to unify theme and figure out what to do for little details like knowing which background to use. Chemistry game was just an example. –  ashes999 Oct 7 '11 at 14:55
2  
The answer still applies. The first thing you have to do is decide what you are trying to present. Why X and not Y is because X is better at presenting Z. You have to decide what Z is, then you can learn why X fits better than Y. You are asking us about deciding individual parts. You can't decide individual parts until you've decided the whole. –  DeM0nFiRe Oct 7 '11 at 14:57
    
this should be your answer :) –  ashes999 Oct 7 '11 at 15:11
show 1 more comment

Is this really about 'making it pretty'? That's a subjective thing, and I happen to think the first screenshot looks better than the second.

Picking a theme is not rocket science really - you know the key content or purpose of your game, and can keep that in the front of your mind when choosing every other aspect to go with it.

share|improve this answer
    
See my edits about picking blue vs. green. It's not just the theme, I can handle theme; it's the arbitrary decisions that get me, like colour scheme. –  ashes999 Oct 7 '11 at 14:18
4  
I think you're looking for programmer-style answers to artist-style questions. :) I don't think they'll think on such a low level as "blue vs green" when picking a colour scheme. Instead they'll pick a whole scheme of complementary colours, based partly on personal preference and perhaps on adherence to the game's theme, if that theme intrinsically suggests a colour scheme. –  Kylotan Oct 7 '11 at 14:28
    
I don't care about blue vs. green. I care about "Here's how you decide on blue vs. green: ..." –  ashes999 Oct 7 '11 at 14:55
1  
And my point is that they don't decide between blue or green. They're usually working on a higher level to that, picking entire schemes based on an aesthetic, rather than making individual decisions on the detail. That's my experience of artists, anyway. –  Kylotan Oct 8 '11 at 11:41
add comment

Short answer: There is no short answer.

Design is a huge field, with tons of books, articles, and as mentioned, libraries that cover this question. Colour-scheme, fonts, styles, layout, use of whitespace, negative spaces, textures, colours and their meanings in different cultures, why comic sans is evil and should never be used. There's courses, books, blogs, research papers, and websites dedicate to these sort of things. There's not going to be a simple answer to this, since the question is asking a lot.

That said: Frankly, your best option is to hire a designer to help you out. If that is out of your budget, make friends with a designer to help. If that's not possible, you might have to go it alone for a while.

So a few tips. For colour schemes, use something like a Colour Scheme Designer. Spend some time learning about how colours work together, and generally, try to only pick a few colours, don't go overboard. The limit should be about 3 colours.

For fonts, well, there's whole articles and papers of research (here's one about serif vs sans serif). Again, the general rule is to pick, at most, two fonts. A good choice is to pick a font that is not the default, but still looks nice. If it's an option, Helvetica is a pretty nice, but there's plenty of other good ones out there.

For style and/or theme, this one is even harder to answer. I think the biggest tip here is to be consistent with your style. Don't try to blend nature with scifi, or sketchy line art with his res 3d poly models. This mostly means finding one artist to do ALL the art, or doing it yourself (in the case of large companies, this is why there's an art lead). Theme is something you'll have to play with, unless you have a set theme in mind before you begin. Honestly, it might change as time goes on and you have more of the game done. Chances are pretty good that theme will change over the course of development, in fact.

Overall, while design can be taught, some people just... aren't that good at it (much like programming). This is where having a design friend to help comes in handy.

share|improve this answer
    
+1 for not blending styles. I actually took design courses as part of my double-major, but that still doesn't help me choose why blue vs. green vs. red vs. ... –  ashes999 Oct 7 '11 at 15:12
    
DeM0nFiRe's answer does a good job covering how to select a theme. Theme, meanwhile, is important to overall design, and will help you decide why blue vs. green vs. red vs. bright pink. It's worth checking out articles/books about colour theory, rules, etc. Here's an article about colour rules found via google: writedesignonline.com/resources/design/rules/color.html –  thedaian Oct 7 '11 at 15:25
1  
In general, colour choice (and everything else related to design) takes practice and time. It helps to have input from other people, too, since they can usually tell you if a combination works or doesn't (though only someone with an eye for design will be able to tell you why) –  thedaian Oct 7 '11 at 15:27
    
Yeah, I think it's definitely important to stress that you don't suddenly one day wake up and learn design. It's something you learn through experience. –  DeM0nFiRe Oct 7 '11 at 15:35
    
"some people just... aren't that good at it".. That's very true. I consider myself an exceptionally good programmer, but I really fail at designing and although I gradually get better at it the progress is extremely slow. This has always bothered me a lot because it doesn't let me be "independent", except for things like server development (which is actually my favorite area, but I digress). –  Andreas Bonini Oct 7 '11 at 21:06
add comment

(I'm gonna come at this from a color theory perspective)

I think that your question isn't about how to make an attractive GUI, I think you're really pointing at is "How do I choose the experience I want to give my players?"

And this is mostly a psychological answer. You mention choosing blue or green or red, and it's not really about the colors, it's about the emotions the colors make you feel when you see them.

If you have a game that is red(the background is a chade of red, the player is wearing red or uses a red game piece, the fonts all are a readable shade of red) how do you think you would feel if you played this game? And it doesn't even matter what the game is.

You'd feel like the game was either very angry or some sort of Valentines Day game.

This is where the decision making process comes in. If you want your player to feel like they are conducting a science experiment in your chemisty game, perhaps making everything clean and simple. Maybe something that emphasises the color white.

If you want your player to feel like they are doing some sort of manufacturing job, where they feel like they are getting down and dirty with the science, then maybe your second picture, or emphasizing the colors yellow and black together.

If you want your player to feel as tho they are at one with the chemistry, like it's an extension of themselves and all living things, then your first picture could be a good start. An emphasis on light blues and light greens and natural tones like brown.

It really does come down to the raw emotion that you expect your player to feel.

share|improve this answer
add comment

One thing nobody else seems to have mentioned so far: ask some of the people who are going to play the game for their feedback. UI designers spend a great deal of time showing designs to users and finding out what's right or wrong with them, whether they're designing a game, a word processor or a flight deck.

share|improve this answer
add comment

One thing I'm starting to realize is very important: proper use of contrast.

Look at that first picture. It's contrasty all over the place! The sky is bright, the horizon is dark, then the far grass is bright, then the bottom is dark. The tiled background wildly varies between extremely bright and extremely dark. All of this is non-information. Visual clutter. The actual important parts - the circles - are drowned out by all the contrast changes.

Now look at the second picture. The background is dark and relatively monotone. There's a bright border around the entire playing field. The tiled background is mostly dark, with thin white lines in important locations. Suddenly you can actually see the puzzle, because it's one of the most contrasty things around.

Personally, I would still tweak it a bit - I'd make the playing field look grungier as well. Those white lines to show grid divisions are important, but the human brain is really good at extrapolating straight features, and those could be a lot darker and even broken up a bit.

The big thing that jars me out of that UI is the bottom bar. It's bright, it's in your face, and it's hard to read the text. That last bit is important - the reason it's hard to read the text is, again, because of contrast. We read text partially by looking for the edge of letters, but the letters blend in unfortunately well with parts of the bottom bar.

What I would do: Rejigger the bottom bar to fit well with the main background, in terms of contrast. Make a lighter border between it and the main background to get across the fact that it's separate. Then get rid of most of the text. "Diamond" can become an actual diamond. "Atoms left" can become a pictorial view of a few atoms. "Time left" can become an hourglass or a wristwatch or a pocketwatch. "Next" can go away entirely - you say "you have to play through to see which atoms you get", but that's an annoying game mechanic. Turn it into a stack of atoms on the right, sitting on a beat-up conveyor belt, with a little visual machinery clue for which the next one in the line is. Tada! Puzzle improved, interface improved, everything looks less cluttered.

If you do need to use text, there's two ways to guarantee contrast. First, put your text on something which is, itself, low-contrast. If it's got a dark background, use light text. If it's got a light background, use dark text. If you can't do that (and sometimes you just can't), don't hesitate to use the outer glow effect. It's a great way to provide the right border contrast no matter what your text is on.

When you're playing with interfaces, open up an image editor, swap it to monochrome, and try two things: blur, and edge detect. When your UI is monchrome blurred, your vision should automatically gravitate to the important areas. When it's on edge-detect, the important areas should be highlighted. Examples:

First, blurred Second, blurred

Compare these two. The first one is nearly unreadable - sure, some of the gems are visible, but many of them aren't. On the second one, the grid stands out instantly, as does the dialog box. While there's only one gem on the board, you can instantly see where it is.

First, edge Second, edge

The first one massively emphasizes the grid edges. Some of the gems are nearly invisible. The second emphasizes those still (and more than I personally would), but it also emphasizes the border of the puzzle very strongly, and the gem is significantly more (though still not perfectly) visible.

This method isn't a panacea by any means, but it can help you track down things that should be fixed. Just keep in mind that human vision is based around edges and contrast, and design your UI to be readable by humans.

share|improve this answer
1  
Nice example. Contrast is one consideration, sharpness another. One more that I see a lot is saturation - it's common for background elements to be desaturated relative to foreground elements (just as in real life, due to atmospheric effects), and this helps focus the eye on what is relevant. –  Kylotan Oct 8 '11 at 15:45
    
I wish I could give this one more than a +1. Not only does greyscale with these filters make problems that an average user may have instantly more obvious, but can also make it easier to see problems for those with impaired vision or colour blindness - it is always good to check that your UI can be read in greyscale as a red tile next to a green tile may look immediately obvious to you or I, but if they were the same in greyscale they may merge together for our duochromatic friends. –  theheadofabroom Oct 19 '11 at 15:46
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.