Short Exercise – Visual Design of Games

Cheese or Font

Elements of Cheese or Font

Core:
– names that represent either fonts or cheeses
– an input field for C (representing cheese) or F (representing font)
– timer counting how much time you have left to guess

Supportive:
– “enter c or f” instruction over the column with your guesses
– score out of 50
-percentage accuracy at the end of the quiz

Extraneous:
– funny comments next to your quiz score
– yellow cheese-themed colors
– humorous corrections when you guess incorrectly

 

Layout Ideas

Core Elements:

Huge Element:

One Color:

Experimentation with Type:

Proximity:

I used proximity and alignment in this last example to delineate between the cheese side and the font side, grouping the cheese icon and button to the left and grouping the font icon and button to the right. I used color to further drive this differentiation. Finally, I grouped all the the neutral icons, like the cheese/font name, the up/down buttons, timer, and the “or” aligned in the middle.

Beautiful Game Example: League of Legends

The first graphic design element League of Legends does well is color and contrast. The overall map is largely comprised of green and tan colors, giving the feeling of being in nature. Thus, the blue and red of the Nexus and towers on each opposing side really stand out against the greens and tans, highlighting what the teams should be targeting and fighting to destroy. Additionally, League of Legends uses black to obscure the areas on the map that are not visible to your team, including the jungle (neutral territory) and enemy territory. This creates high contrast that clarifies where unknown and enemy territory begins on the map. Furthermore, when a team member crosses into unknown or enemy territory, they are illuminated by a small ring of visibility that stands out against the rest of the black, signaling to the other team members this member’s movements.

Next, League of Legends utilizes the alignment and proximity principles. The player’s important information is kept in the bottom of the screen, such as the player’s item, XP and health bars, powers, and the map. All of these are placed closed together allowing a player to quickly scan the information as they play, but also out of the way of the general birdseye view where the action is taking place.

Finally, League of Legends effectively uses typography, using their signature blocky, gold font throughout the game. The font choice creates a sense of epic-ness as you fight with your team for the win.

About the author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.