As we began exploring what the new look and feel of the League client should be, we wanted to create a visual style that felt like a fantasy game, but avoided the normal fantasy game UI cliches. Parchment and other distressed elements that littered the client in the past look dated relatively quickly, and we wanted to build a flexible visual language that had the ability to scale over multiple features and mediums in the future. In addition to that concern, we wanted to unlock a visual style that didn’t require a dedicated visual artist (or more than one) to be on a team to create a layout. With how fast League grows and iterates, we wanted to avoid some of the problems of the past where resource bottlenecking prevented potentially valuable new features from staying on the shelf for too long and becoming stale.

How it manifested into Hextech

At the same time as our visual exploration phase, the foundations team was working to better define Piltover. They had begun to create some initial directions and concept art, including some showing a technology they dubbed “Hextech.” Thematically, Hextech served as a way of democratizing magic to those who didn’t have those abilities naturally. Items like Jayce’s hammer, Heimerdinger’s gadgets, and Vi’s gloves are all examples of Hextech in action within the game.

This concept of a magic powered machine really fascinated us, and we began to wonder: “What is the client itself was like a Hextech tool that the players could use to interact with the magical world of the game?” This served as the stake in the ground that we built the user interface around, and began to develop some of the basic foundational shapes and colors of this visual language from it.

The language of Hextech metal

To make sure we fully vetted this look and feel out as a scalable visual solution, we wanted to boil it down to its absolute core and build from there. As we continued to work with the Foundations team through their concept art for Hextech and Piltover, we reduced the overall shape language of the technology down to THREE CORE SHAPES:

THE SQUARE
STRUCTURE
Used to establish stability to elements and reinforce our grid

THE DIAMOND
PROGRESSIVE
An accent piece used to help guide the eye towards key information

THE CIRCLE
FOCUS
Built to draw focus towards primary items that require a reaction

Now that the core pillars of the Hextech design language have been established, we can get to the juicy part—how it appears throughout the updated League client. As you’ll begin to read through, you’ll notice that each element of these design elements play a crucial part towards solving specific problems.

The Interface Layer

Whether it’s for major features or ancillary information, the use of metal linework lives on the top layer of the client, and acts as a framing element to support and draw focus towards key pieces of information.

The Interactive Layer

Adjoining the interface layer of the client are the key methods in which a player would interact with the client. These layers of the user interface have been distilled down to three core areas of interactions: Gameplay, Secondary & Utility.

Gameplay Buttons

The use of blue “Hextech Magic” buttons appear sparingly throughout the client, and are reserved purely for actions that where the player will be interacting with actions relating to the game itself.

Secondary buttons

Gold buttons that appear throughout the client work to provide interactions in and out of secondary information. Navigating through a carousel, closing out of a modal window, and purchasing items all have a similar look and style to them.

Utility Interface

Buttons and interface items on the utility level serve the purpose of providing or distilling information for the player. Sorting, filtering, and tooltips all fall into this layer of interface interaction.

While this visual design style will be shown prevalently throughout the updated League client, it’s important to note that the look of League of Legends does not stop there. Some levels of Hextech have already started seeding their way into the world through a number of different mediums. Here are a couple examples: