HOLLOW KNIGHT: INTERFACE DESIGN ANALYSIS

Action-adventure, Interface Design, Logotype, Plataform  2 Comments

Cover image from Hyperhype

To talk about a game that mixes fantastic hand-drawn art, a huge cast of cute but creepy characters, classic-scrolling action, and fantastic traditional 2D frame-by-frame animation is to talk about “Hollow Knight”.

“Hollow Knight” is a metroidvania action-adventure game that allows the player to explore twisted caverns, ancient cities, and deadly wastes. Additionally, it is possible to battle tainted creatures, befriend bizarre bugs, and solve ancient mysteries in the heart of a kingdom. Taking inspiration from older platform games, Team Cherry developed and published it in 2017.

Despite the tenderness caused by its characters, the atmosphere of the game is aims to provoke that feeling of melancholy, loneliness and mystery because the story has as its protagonist a nameless warrior uncertain of his identity or origin and who explores an almost deserted kingdom, where an inhabitant is rarely found.

To achieve the above, the game takes advantage of the music, the monotonous dark palette and especially the settings that seem to be inspired by Gothic architecture since there are sweeping windows, pointed or ogival arches and piers and columns that support them.

It should be noted that Gothic architecture is characteristic of the castles of Europe from the 12th century AD, which began to be used in stories to develop the feeling of fear and terror. This is how the literary genre called Gothic was born. In general terms, this genre can be defined as writing that employs dark and picturesque settings, surprising and melodramatic narrative devices, and an atmosphere of exoticism, mystery, fear and dread. All of the above is precisely what “Hollow Knight” is intended to reflect, and that is why the components of Gothic architecture are used in its settings.

The sweeping windows and ogival archers in “Hollow Knight” that are inspired by Gothic architecture.
Images from Riot Pixels, STEAM, CloudFall Studios and RAWG respectively

Taking this into account, the logo and the interface design could not leave this style aside, so it was decided that they contain gothic ornaments, but with some particularities to maintain the idea of bugs and the aesthetic of handmade. So, let’s talk a little bit about this.

HAND-DRAWN SPIRALS AND WAVES

The main feature of this game is the clean, simple and like hand-drawn design. Therefore, this is also reflected in the logo and in the interfaces, such as dialog boxes and menus, as they use hand-drawn abstractions of ornaments seen in gothic architecture.

The predominant influence on the logo and interface components are the decorations seen on the gables of some French buildings, where the lines are curved with spiral endings, some giving the impression of waves.

The abstraction of a gable is taken as a decorative element in the “Hollow Knight” logo and interfaces.
Wooden gable (Marketplace, Abbeville) [1]
The abstraction of some gothic building ornaments to use as decoration in the “Hollow Knight” logo and interfaces.
Ornaments (1, 3: stone spandrels, Winchester Cathedral; 2, 4: wooden ornaments, Henry VII Chapel, Westminster Abbey) [1]

By having this pattern, it can be employed multiple times by changing the size, direction, and angle to create new designs that can be applied in different ways. For example, in the logo, it is used horizontally changing sizes and with the spiral endings going up or down to achieve an elegant frame for the title.

Handmade embellishments inspired by gothic architecture are used in almost all the decorative part of the logo.
Logo from FANDOM

The same happens in the decoration of dialog boxes, menus, instructions and even in the names of towns and areas where different angles are noted.

Ornaments at the top and bottom of the dialog boxes.
Embellishments at the top and bottom of the instructions.
Ornaments utilized at different angles in the name of the areas.

ELEGANT ARROWS

An essential icon for this video game is the arrow, since it serves to communicate to the player the continuation of a dialogue or to point to the objects with which one can interact. The inspiration for these arrows came from the stone finials of some cathedrals.

Arrows obtained by abstracting the stone finials of some gothic cathedrals.
 Stone finials (Cathedral) [1]
Ornaments in oak panels of some Gothic manors from which an abstraction is made and an arrow is obtained.
Oak panels (Beddington Manor House, Surrey) [1]

BUGS EVERYWHERE!

A detail that can be considered one of the most curious is the inclusion of the protagonists of this video game, that is, the bugs, in the design of the logo and the interfaces.

Analyzing all the elements that work as adornment that accompany those already explained, most of them are like abstractions of shells. This is probably because a common representation of an insect is a drawing of a beetle. The reason for the above is that these are bugs of the Coleoptera order that has around 400,000 described species, being the largest of all orders, constituting almost 40% of the described insects and 25% of all known animal life-forms. That’s why the shells are the first thing one think of when hearing “insect” and why this one, with and without wings, appears in many parts of the game.

Insect shells with and without wings in some designs.

Although the shells are not the only thing that can be seen in insect form. In fact, in shops, the head of the store manager is used as a decoration.

The top part of the window of the shop has an abstraction of Iselda.
Screenshot from Polygon
Iselda from FANDOM
This window has as decoration the face of Charm Lover Salubra
Screenshot from Riot Pixels
Iselda from FANDOM

This analysis helps to demonstrate how a clean and simple design can result in an all-round beautiful video game like “Hollow Knight”.

Also, something beautiful about this video game is the handling of contrasts since it combines insects and a gothic aesthetic to create an atmosphere that is depressing and creepy as well as relaxing and cute. This shows how the creators did a great job.

Well, I hope you liked this post and write in the comments section what you think of the design of this game. Until then, see you in my next post!  

REFERENCES

[1] A. C. Pugin, Pugin’s Gothic Ornament: The Classic Sourcebook of Decorative Motifs with 100 Plates. 2012.

BIBLIOGRAPHY

Nilda Chan~npy I'm a Graphic Designer in love with Otomes and JRPG. I like the interface design area and that's why I really like to talk about this theme. You can win me over with a good videogame Illustration book and a good capuccino.

2 thoughts on “HOLLOW KNIGHT: INTERFACE DESIGN ANALYSIS”

  1. Before reading this post I saw these aspects of the UI curves and the logo just as an aspect of elegance and handwriting to reinforce a good part of the graphic design of this game that was made by hand drawing. But as you showed us, there are also many references to gothic art that perfectly fit the tone of the game, showing how conscious the choices made for this game were. Another great analysis, keep going with more of them!

    Like

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s