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!).

Experimenting with arrangements, fonts, and spacing for “Cheese or Font?”

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:

A screenshot from the current level I’m on, where I’ve “unlocked” both red and green. Before unlocking any colors, the art was entirely greyscale, save for Gris’s bright blue hair — a perfect pop of color.

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.

--

--

--

The focus of CS 247G is an introduction to theory and practice of the design of games. We make games (digital, paper, or otherwise), do rapid iteration, and run user research studies appropriate to game design with the goal of improving and refining our design instincts.

Recommended from Medium

The Future of Skins Gambling

Raging the Game Flow — The Berserker frenzy mechanic in Torchlight 2

Could a virtual reality gym be in your future?

All-GAMEE Update — Season 2

GTA VI: Here is what we know so far

STARL Arena Grand Reveal Party!

How I Made a Game in One Month

Storytelling and Game Narrative

Game Narrative and storytelling through mobile device and atmospheric lighting

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Meenu Singh

Meenu Singh

Learning Experience Designer // still and always learning

More from Medium

Semantics of 3D Form

Top NYC Interior Designers On Instagram

How we landed a Cool Collaboration with Awesomic Design Agency

Healthy Fit:A virtual reality fitness application that allows users to work out and gain knowledge…