This topic is in response to a comment from 54rush:
“Something I really wish I did better was create themes. For example, your theme is obviously robot/future themed. I was wondering if you had any ideas for what I could do to my game, My Army Is Better, in terms of graphics and conveying information more smoothly? Might be a stupid question, but I simply create regular rectangle buttons whereas yours are associated to a specific theme.”
That is definitely not a stupid question. When it comes to a project like Robo Blue, I find that I spend more time figuring out the theme/look/graphics/user interface design than I do on the actual coding. I’m afraid I don’t have a step-by-step method for tackling these aspects of a project but I’m happy to pass along some of the things I’ve learned.
- Try to come up with one or two key concepts that define the feel of the overall project. The current look of Robo Blue is based on the concepts of “sci-fi” and “mechanical.” This has ended up being a rather different look than my initial versions with the concepts “blueprints” and “control board.”
- Once you have your key concept, consider what graphic elements come to mind when you think of it. For me, this usually means starting with clichés or stereotypes. Regardless of whether or not they are accurate, they usually exist because many people associate them with a given concept. For example, I used the image of a gear several times in Robo Blue to emphasize the “mechanical” concept. It starts on the main page with the button for the Options screen but quickly shows up again as the item of interest on each level, as a core element in the design of the robot, and in the short-lived blue echoes left behind by the robot when it hits an action icon. I’m going to hazard there aren’t a huge number of gears sitting about most spaceships – steampunk versions aside – but it gave the feel I was looking for.
- If you are having trouble coming up with ideas as to how to graphically suggest your key concept, try Googling for images with your concept as the search term. Are there any components that show up repeatedly? Try adding “art” as an additional search term; it can help refine the search to what other people think describes the concept. Searching for “sci-fi” and “sci-fi interface” I see many images with blue or blue-gray color combinations, glowing blues, random small writing, and light flares. You’ll find all of those in Robo Blue.
- Never underestimate the importance of finding the right font. There are several websites you can use to rummage through fonts. Two I’ve used are:
- https://www.fonts.com/ Search using your theme topic for a variety of fonts that might be what you are looking for.
- http://www.identifont.com/ Used to figure out the font you’ve seen if you don’t know the name, but if you have a feel for what you’d like the font to look like you can try working through “Fonts by Appearance” to see what suggestions come up. It can also search “Fonts by Similarity” if you have a font that is almost, but not quite, what you want.
- Be consistent in the color and style of your graphics. I used a variety of illustration styles when putting together Mutton Hunt simply because I was experimenting a bit with different looks and didn’t get around to really cleaning it up. I find that variety jarring when I play because various components don’t look like they go together. If you use a very different color, do so with a purpose. It’s a good way to draw attention to something you want the player to focus on.
- Think about how your theme can make the game more fun. How can it be used to emphasize actions being taken or the damage associated with a hit? Is it fun to watch?
Designing your user interface is a whole topic in and of itself, but here are a few thoughts: - Decide whether you are going to use words or icons. Be consistent in your choice.
- If you have a button that is repeated across screens, keep it the same and try to keep it in the same spot each time.
- Use graphics to group components of the interface if applicable.
- Try laying out the buttons and information in a prototype and have people play test it. Try it out yourself after leaving the project alone a few days. Is it easy to find what you want?
So to finally get around to applying these to 54rush’s game, My Army Is Better, I’ll offer the following:
- What’s your key concept? If it’s “armies,” what time period or genre do you have in mind? Judging by the types of weapons I’m going to assume modern day but you might have other ideas. That said, when I think “modern army,” my first thoughts are a) army green wooden crates with stenciled writing, b) shiny/black metal equipment, c) and woodland camouflage. (Keep in mind that I have no military background so this is going right back to the concept of stereotypes…)
- One idea for a much more graphical interface would be to set out the various daily options across an image of the city / army compound. Recruiting and Training could be grouped near the central complex, Customize Army might be at the supply depot, Help the People is out in the city, and Go to War Early is outside the city walls. Maybe tap the clock to end the day instead of Speed up Time? (Is there a game play reason other than Productive Time that would make the option of speeding up only one hour at a time more useful than just ending the day?) I’m not sure where Upgrades and Skills would go. So there’s that. It may not but a good idea, but it’s an idea...
- I like that the time remaining in the day is shown prominently but the analogue clock doesn’t fit with my expectations based on a “modern army” theme. Maybe switch it to digital, complete with the digital clock font?
That’s my two cents. I’m quite certain there are excellent articles out there that discuss these topics from the perspective of someone who deals with them professionally. If you know of any good ones – or if you’d like to share the way you tackle these issues in your projects – please add to the discussion here! Thanks.