Ask Riot

Ask a question about League or Riot, and we’ll try to answer it. Answers go live every other Thursday at 1:30 pm (PT)

What do you want to know?

Something went wrong. Try asking again.

Thank you for submitting a question!

Next Article
Art

The Visual Language of Hextech

How League’s fantasy tech informs our artistic design.

Hextech Concept Art

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.

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

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.

Lobby Banner Design

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:

Social Panel Queue Timer

Core tenets

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.

Ready Check Timer

How this look flows through the client

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.

Champion Mastery

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.

Play Button and Client Navigation

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.

Skin Selection UI

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.

Champion Information Tooltip

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:

Various examples using Hextech Visual Language
Next Article

Making the Ultimate Lux Login