The Visual Language of Hextech
Introduction
A new look for League of Legends for years to come
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.
Overview
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 towards the faction and this element of technology they dubbed as "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 example 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.
Elements
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 3 core shapes:
The core shapes of Hextech:
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
How they all come together
The combination and intersection of these shapes together in the Hextech visual language works to bring an ornate decorative framing to key areas of attention. As you see the use of Hextech metal throughout the League client and other, you can see how each shape plays upon each other to draw the eye towards a focal point.
The language of Hextech magic
Hextech magic acts as an intelligent partner as you navigate through various screens of the client, guiding you and highlighting crucial pieces of the experience. Primary buttons and important gameplay UI elements are charged with this signature magic element, and serves to draw the player’s attention towards key interactions. While this element shows up in many different ways, such as timers, activity indicators and progress bars - it always follows a few core tenants:
Core Tenants:
Viscous
Hextech magic tends to stick around and has some weight to it, falling somewhere in between water and smoke.
Directional
Always moving towards a particular direction, the intelligent aspect of the magic is geared towards guiding people.
Value
The highest values should be used to attract the player’s attention, saving brighter executions for pivotal moments in the experience.
In the client
The Whole Picture
How this look flows through the client
Now that the core pillars of the Hextech design laguage 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 3 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 follow 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.
The look of League moving forward
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:
