Visual Design of Games

PART 1: Exercises

1. Core elements
   - The Font/Cheese (e.g. “Helvetica”)
   - The Font/Cheese selection
   - Feedback (Whether the player got it right or wrong)
2. Sketch

3. Size

The font/cheese section was made large. The buttons and the feedback can be made smaller.

4. Color

The font/cheese section was made red to contrast with the rest of the text. (I would have made the feed back grey, but do not have the tools.)

4. Typography

Cursive-ish fonts

Serif fonts

Bold and All caps.

5. Proximity

In order to make the font/cheese stand out, I grouped the rest of the elements together.

PART 2: Analysis of a game

NieR: Automata (The menu system)

NieR: Automata’s story follows android characters. The game’s design reflects the story by using very minimalistic and function oriented visuals, with the menu being the standout example.

Color and Contrast: This menu only uses shades of grey, beige, and browns as well as red as the accent color. The minimalistic color palette allows any red text to sticks out from the grey text. It also uses dark strips to contrast the generally light background, which is used to show highlighted text and bulletpoints.

Size: Notice that the “Intel” text is significantly larger than the rest, which makes it easy for the player to tell which tab they are in.

Typography & Lettering: To fit the minimalistic aesthetic, the menu uses only one sans-serif font (or multiple similar fonts). To create hierarchy, it uses uses a mix of thin/bold, mixed case/all caps lettering. For example, the tabs are typed in all caps. The header of the screen use bold text, and the info uses thin small text.

Grouping: This menu groups its information according to its menu hierarchy. The tabs (the highest hierarchy) are all clustered on the top. The different messages are grouped on the left. The detailed information is put almost on the center, where players tend to focuss their attention. Navigation helpers are put at the bottom, where it will not interfere with players who know what they are doing.

P.S. For more information on the design, Please checkout the official designer’s blog: https://www.platinumgames.com/official-blog/article/9624