ITP Blog

My journey in making things

Visual Language – Principles of Visual Communication

For the first week’s assignment I chose to focus on one of my all time favorite mobile games ‘Monument Valley’.

giphy

The game’s captivating 2D-3D M.C Escher inspired impossible geometries, very subtle color palettes and challenging levels make it a very engaging game and one thats very beautiful to look at too. With that being said, let’s dive right to it.

  • The Cover:

monument-valley-game-house-cards-how-play-get-new-levels-free-beginners-guide

At it’s core the banner showcases some of the game’s most important features including it’s color palettes, the main character, typography and a hint about the game’s use of 2D-3D isometric* design through the character who is standing on a ramp. At first sight it might seem detached from the mountain’s perspective but makes a lot more sense after playing the game and familiarizing with it’s visual language.

* Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. It is an axonometric projection in which the three coordinate axes appear equally foreshortened and the angle between any two of them is 120 degrees. – Wikipedia

  • The Grid:

grid

The banner’s grid is based on three four main elements:

  1. Text – The game’s name portrayed in a very big font size that consumes about 2 1/5’s of the grid vertically and fills a substantial amount (70-90%) horizontally.
  2. Mountains – The mountains start with the word ‘Valley’ summing to about 4 1/5’s of the grid vertically and full width horizontally. They form a very centric approach with their symmetric alignment causing the eye to focus on the smallest piece in the banner.
  3. Character & Ramp The character on the ramp rises to about 2 1/5’s of the grid vertically from the bottom and placed exactly in the middle horizontally.
  4. Sky – The twilight skies are in essence the text’s background, therefore they consume the upper 2 1/5’s of the grid vertically and stretch at full width horizontally.
  • The Typography:

After examining the typography used in the banner with ‘WhatTheFont’ I found two font types that resemble the font used in the banner:

  1. XXII Sinoz DSP Thin

    screen-shot-2016-09-17-at-12-52-39

  2. P22 Underground Pro Demi

screen-shot-2016-09-17-at-12-52-54

With that being said it seems the character width on the banner is a bit more stretched and some character have these triangle add ons on each side (e.g ‘M’, ‘N’ and ‘U’).

  • The Colors:

The banner (and in the same respect the game) uses a pastel, organic and very subtle color scheme and palettes. This alongside the game’s use of isometric and flat 2D-3D monuments offer a very unique visual experience that blurs the line between 2D and 3D, yet still feel very natural.

screen-shot-2016-09-17-at-12-58-17
Analysis of the banner’s color scheme
  • The Use of Space:

The banner uses a very symmetric and centralized focal point. Moreover the use of the character’s color (essentially a B&W silhouette), pushes viewers to focus on the center rather than on the edges of the image. In contrast, the use of gradients throughout the back elements (i.e mountains and the sky), helps smooth the transitions between them and also makes the importance hierarchy in the banner more visible – Text & Character in the front, Mountains & Skies in the back. By highlighting the placement you get a really good sense of the composition.

space

 

Hi I am Or, I am a director, developer and artist. My current interest in research is sound interaction, computer vision & immersive media development.

Leave a Reply

Your email address will not be published. Required fields are marked *