Visual Design of Games
“Cheese or Font” and The Voting Game
1. Identify all the elements of Cheese or Font. Label them as core, supportive or extraneous. Core is the parts you need for gameplay, supportive is things like hints and instructions, and extraneous are things you could remove.
Core Elements:
Name of Cheese or Font in question
C or F buttons
Timer
Score
Supportive Elements:
Title
Color coding of right/wrong answers
Column view of all answers
Extraneous Elements:
Instructions (Title seems sufficient lol)
Prev/Next Buttons
Replay Button
Comments on Failure (Can be quite snarky)
Give Up Button
Pause Timer Button
Average Score statistics
Like/Share Buttons
2. Do a quick, small sketch of the game on a small piece of paper. Only use core elements. Small matters, because it constrains your ability to get fiddly. Standard 3x3 or 3x4 is good. If you must draw on an ipad, don’t zoom. Suck it up and stay small.
3. Make one element in a NEW thumbnail sketch HUGE. What else do you want to change? What can get smaller?
I chose to make the cheese and font buttons huge. I put myself in the shoes of a competitive player who is really trying to get the highest score possible in the minimum amount of time. It would be much easier to go faster if the buttons were larger so you can focus on knowing whether the given word is a cheese or font instead of focusing on trying to get your mouse over the right button. Larger buttons, faster speed, higher accuracy. In making the cheese and font buttons larger, I made everything else including the timer and score smaller. These give the user necessary feedback, but they can focus on these as their own discretion. My mission here is clear though: more attention on the buttons.
4. Try taking ONE color and using it in your thumbnail sketch along with black. You can also use gray and white, if you have the tools.
In this sketch, I did a super simple design that used and orangish yellow as an accent. The name of the cheese/font would be colored orange to draw attention. The buttons would be colored the same orange to signal that the user should interact with them in some way. I played around a teensy tiny bit with proximity too, adding a line between the main game and the user feedback elements (timer and score). Things above the line are where the user gives input and the things below the line are where the user receives output.
5. Make thumbnail drawings that use type. Make it less about choosing a font and more about size, positioning and contrast.
In this first iteration on font, I chose a tall skinny san serif font. I feel like this would give the game an elegant touch and it would contrast the small, plain fonts used for the timer and score. I’m competitive, so I want to draw all the user’s focus to the game, that is, the words flashing on the screen and the buttons. It’s like in swimming… you don’t turn your head to see how the person in the lane next to you is doing in the middle of the race. Casual players can look at the stuff below the line, but serious players should focus on the top half.
In this sketch, I used the same font for the word in question. However, I changed the buttons to include text instead of pictures. I used a san serif font for the “Cheese” (I’m imagining something sort of Comic Sans) and a cursive font for the “Font”. I wanted to add the contrast between the two buttons and I thought this might be an interesting way to do that. I’m a little hesitant with this sketch though because it’s using 4 or so different fonts, which I think could be too many.
In this sketch, I blew up the size of the font/cheese and make it colorful with shading. I wanted to create a vertical alignment that just poses the single most important question. Also, I realized that most of my design choices were focusing on drawing attention away from the timer and scoreboard, so I just tried removing those elements altogether. Perhap the time and score would be displayed once at the very end, or perhaps it was a poor choice removing them altogether (but hey, that’s what iteration is for!).
6. Explore proximity in your design. What should be grouped? What is different, and thus should be separated from gameplay?
In this sketch, I decided to play around with the alignment of the objects and I added an orangish yellow color to the buttons. Again, I wanted to draw attention to those buttons, but this time I used color to do this instead of size. There are some potential pros and cons of putting the buttons on opposite sides of the screen though. Potential pro: it creates a distinction between a cheese and a font, which makes sense given the theme of the game. Potential cons: it might be better to put the buttons next to each other (the proximity might build an intuition that they are associated, that is, both buttons).
Pick a game you think is beautiful, take a screenshot and explain what graphic design principle(s) they used to make it great.
I think The Voting Game is a (super fun) game that does a great job leveraging graphic design elements. The most prominent design element would be contrast. The Question Cards use that nice black card with white text combo like we’ve seen in other party card games like Cards Against Humanity. Additionally each player has an Identity Card that uses one color. The Voting Cards that each player holds in their hand are the direct opposite of the Identity Cards in terms of color and whitespace, which makes for really nice contrast and cohesiveness at the same time. The text on the question cards uses a grid system. Overall the game has a very successful execution of the minimalist aesthetic, making great use of color, contrast, and composition as necessary.
