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

Mini Map

» Common Components

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

Read more

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

Saving Screen

» Common Components

Saving allows for players to create saves of gameplay states. Games that include checkpoints may only allow saves to be made at checkpoints.

Read more