Graphic Design for Game Design
On the choices we have to make: “Icons or Type?”, “All Caps or Not?”, and most importantly: “Cheese or Font?”
In Graphic Design for Game Design, Christina outlines a graphic design challenge for a game where the existing graphic design is….pretty cheesy! Our challenge is: How might leverage principles of graphic design to reimagine the Sporcle game “Cheese or Font?”?
Let’s see what we can do!
Step 1: I started out by identifying the core, supportive, and extraneous elements of the game:
- Core: the parts you need for gameplay: “Play Quiz” button, mechanism for inputting guesses (in this case, “f” or “c” into a text box), score OR some feedback re: correct/incorrect
- Supportive: things like hints and instructions: Title (“Can you name the cheeses and fonts?”), timer, “pause” button, “How to play” link
- Extraneous: things you could remove: Playcount, table, colors, quiz stats, average score, “Guess again, it’s a cheese!” (side note: you can’t really guess again…)+ other cheeky replies + cheese fun facts (i.e. “Malvern cheese is made from sheep’s milk”), “Next quiz” button, “Refresh” button, drop-down menu to change display of timer (default v. stopwatch), drop-down menu to change display of score (numerical v. percentage)
Step 2: Sketch out the core elements —You’ll see I chose to do away with the timer feature — I played until I was tired of it and not until the clock ended!
Step 3: Come up with at least six more ways to arrange the most important elements (different type, use of icons, proximity…gettin’ funky with it!).
My favorites are the top right (a war, a battle between “cheese” and “font”), the one below that (the font for “cheese” feels right), and the bottom middle one (the words “cheese” and “font” are replaced with a cheeseboard and font list, sort of inviting the person to sort the word to its right location). In each of these three, the “cheese” and “font” stand out in a way that makes it clear what the game is asking you to do…without written instructions.
And now, a beautiful game: Gris
So, now, now that we’ve revamped a (er…) not-so-lovely game, let’s look at a beautiful one. I wrote about my love for Gris in a recent post, but it really can’t be overstated how every moment of this game is screenshot-worthy:
The key element that makes Gris stand out visually is the intentional use of color and contrast in an initially greyscale world. The only “sharp” element is the character, Gris herself; otherwise, the soft sketch work plays nicely with the dreamy watercolor backdrops. Large objects are silhouettes, providing depth in an entirely two-dimensional game. There are no distracting buttons or icons. There is a lovely use of spacing and alignment — the screen is never too zoomed in on the character, allowing the player to constantly appreciate the whole scene. This sort of “zoom out” also makes the game a series of drawings, pieces of art that could stand on their own.