Homepage / Common Components /

XP Bar

Created by Jack Davies

13th June

XP bar(s) allow for a player to monitor their current skill progression.

Games that include several skill trees may use multiple bars or labels on a single bar to feedback to the user the progression being made as a result of the players’ actions.

3000/4500 Level 25 +50 Level 24
  • When to use

    • Games that include skill mechanics may want to feedback to the user the current status of the skill progression if it has an effect on gameplay mechanics.
    • Some games will not always show an XP bar, however, they may decide to show when a skill tree reaches a milestone or a significant increase has been made.
  • Solution

    • Often XP bar(s) are given a monochrome colour scheme, using only white or grey. This is to prevent primary focus being on an XP bar. Games, where XP is the fundamental focus for the player, a colour that is bright and vibrant, may be used to gain attention.
    • Icons are optional, most games that include XP bar(s) will use symbols to draw attention and label the skill being displayed.
    • It is highly recommended that XP bar(s) are given units of measurement. The measurement allows players to interpret their progression for the skill accurately.

Game Examples:

Tap on or hover over an example thumbnail to view the context of the XP Bar, if a screenshot exists.

  • World of Warcraft

  • Skyrim

  • League of Legends

  • Dying Light

Technical Details

XP bar(s) offer immediate feedback on when a player is correctly interacting with a skillset or objective which will improve the progression of skill or level.

The importance of an XP bar should be reflected in the implementation of the design if an XP bar has a primary focus in the game, consider including the XP bar at all times on screen. If there are multiple XP variables, it might be worth keeping XP bars for menu navigations.


Leave a Reply

Your email address will not be published. Required fields are marked *

Related Content

Saving Indicator

» Common Components

A visual indication that game progress is currently being saved and informs not to exit the game, or turn off the players gaming device.

Read more

Mini Map

» Common Components

To help orientate the player and help them successfully navigate the environment to points of interest and objectives.

Read more

Health Bar

» Combat Components

Health bars have the option to include a unit on which to measure their current health in relation to the maximum health available.

Read more