All designers at one time or another will experience issues with the structure of their design. Although more standard in web design, an underrated tool that solves these issues for many is the grid. Using a grid not only enforces consistency, but in the evolving world of technology many users will need a design that’s pleasing to the eye and compatible across multiple screen sizes.

Successful Use of Grids

A fun and practical example of grids can be found in User Interface (UI) design in video games. In Zelda Breath of the Wild, it’s immediately noticeable that the inventory menu is on a modular grid. The tab icons are centered over the inventory, every item is an equidistance apart, and the description of each item is uniform and aligned with the text. This is a successful way of organizing the player’s information and easy to scan for information. An interesting design choice is the fade effect on the inventory and item description. There is a lot to look at on the screen, the fade effect minimizes what the player is seeing and makes it look less strict. Each element flows into each other and allows the player to read each description without taking away from Link’s appearance.

Although this is a great example of the use of grids, in terms of User Experience (UX) the inventory response is not the quickest. It makes for a rigid gameplay experience and can be frustrating for some, but that’s a conversation for another day.

Breaking The Grid

http://https://www.youtube.com/watch?v=VqJnmphV9R8

Persona 5’s UI is inspiring for unconforming with the traditional grid rules and maintaining fluidity, which nails UI/UX design easily. The interface takes a lot of inspiration from fanzines of the punk scene in the 1980’s with the use of large, bold letters in high contrast to another color. The overall composition of each is balanced well in terms of color, pattern, and space. Part of the reason why the interface works so well visually is due to the high stylization in only three colors: black, white, and red. These colors offer the highest contrast in relation to each other and mimic the story of the game with the characters in and out of two worlds (black and white) and how those worlds sometimes overlap (red).

While grids are generally helpful for structure and layout, at the end of the day they are just guides. Persona’s UI design takes a lot of liberties with their grid and makes sense since the design matches the rebellious tone of the story. This design is proving that stepping outside of the grid can be a successful, intentional stylistic choice. It’s successful because it’s visually interesting but balanced and does not interfere too much where the player needs to be looking. The designers of the Persona games have always matched their UI with the themes of each game, which is why their UI breaks the rules just as their characters do the same in game.

Unsuccessful Grid Design

When it comes to clunky interfaces, many if not all avid video game players will agree: MMO’s are notorious for being the worst interfaces to look at. Take the heads-up display (HUD) from World of Warcraft for example. There are multiple rows and columns of spell slots, spell effects, chat box, quest logs, and even enemy health bars all in the way. These layouts are typically just too much as it overwhelms the user detracting from gameplay. And while there is use of modular grid for the spell slots, the display is not working together to be aesthetically pleasing.

These designs tend to be unsuccessful as they clutter the viewing space where gameplay is taking place. When designing the HUD, it’s important to use simple icons and subtle color themes as not to distract the player’s view. It can be a difficult task for designers balancing HUD aspects on the screen, but that’s where design choices come in. Designers for MMO’s need to make these difficult decisions to adopt different ways of displaying this information. Whether creating different menus or offering multiple ways to control the amount of seen info. But overall, the design should flow along with gameplay if it needs to be on the screen.