This is a visual attempt at making new skill bar layouts, highlighting elements in each profession skill bar UI which may change. I don't know how to properly design a UI, so this is a programmer-ish shot at each UI structure (sorry if it looks horrendous!).

Skill bars

Skill bars display skills currently available for your character. The skill bar varies depending on a number of conditions:

  • Profession — These define the icons and UI above weapon skills, and range greatly. Profession mechanic skills are discussed in the next sections.
  • Elite specialization — Elite specialization may change the skill bar icons and/or positioning, as well as adding new elements. These are discussed within profession mechanic skills in the next sections.
  • Weapon(s) slotted — Weapon skill icons are comprised of four icons. If a two-handed weapon is being wielded, the skills are simply laid out one after another. If there's a combination of main-hand and off-hand, there's a slight gap between skills 3 and 4, as a way to distinguish which skills belong to the mainhand weapon, and which ones belong to the offhand weapon. Having this gap is very important to immediatly recognize the weapon choice.

Elementalist Tick green.png

User Valento skillbar draft elementalist.png

The elementalist is a very simple profession. The specific mechanic skills are simply F1-F4 attunement skills, which are laid out above the first 3 weapon skills. These icons are slightly smaller than weapon skills'. The icons don't change when Tempest is chosen.

Engineer Tick green.png

User Valento skillbar draft engineer.png

Engineer mechanic skills are much like the elementalist's, the exception is an additional F5 button for Elite's tool belt skill. The icons don't change when Scrapper is chosen.

Guardian Tick green.png

User Valento skillbar draft guardian.png

Guardian mechanic skills are also like the elementalist's, the exception is that guardians only have F1-F3, representing their virtues. The icons don't change when Dragonhunter is chosen.

Necromancer Tick green.png

User Valento skillbar draft necromancer.png

The necromancer only has a F1 mechanic skills that activates Shroud mode. To the left there's the life force bar, needed to enter the Shroud mode and depleted over time. The icons and the bar don't change when Reaper is chosen.

Revenant Tick green.png

User Valento skillbar draft revenant.png

The revenant mechanics UI is a bit more complex. First, there are two slots for legends that can be slotted and these are swapped with F1. There's a bar that represents the current amount of energy (whose percentage is also displayed in the upper icon), and how is the revenant currently managing their energy upkeep. The base energy regeneration rate is 5. Left arrows mean the revenant is losing energy over time (one skill that requires 10 upkeep means 5-10= -5 regeneration rate). Right arrows mean the revenant is regenerating energy over time (one skill that requires 2 upkeep means 5-2= 3 regeneration rate). The Herald spec additionally displays a F2 button above the regeneration percentage display UI.

Mesmer Tick green.png

User Valento skillbar draft mesmer.png

The mesmer has F1-F4 with three small circles above representing the number of active illusions. The chronomancer has an additional F5 slot to the rightmost position. Although an extra slot is added for the chronomancer, the small circles are still aligned with F1-F4.

Ranger Tick green.png

To preface this one, I must say I like visual representations. The ranger has F1-F4 representing: pet attack action, pet special skill, pet return, and pet swapping. Druid has an additional F5 skill which is Celestial Avatar. I strive to make it so that tools are very close to in-game UIs. In order to make a somewhat comprehensive and helpful ranger mechanic skills bar, I've come up with two ideas:

Option A
User Valento skillbar draft ranger.png
  • I will omit F3 and F4 actions (not much to say, they don't add anything to builds). I will display F2 (pet-specific) skill below each pet option portrait.
  • I will also display the F5 skill (Celestial Avatar) horizontally aligned to the right, and vertically aligned with weapon skill #5.
Option B
User Valento skillbar draft ranger optionB.png
  • I will still omit F3 and F4 actions, but will display pet portraits one on top of another followed by their 4 skills (3 pet family skills, and 1 pet-specific skill).
  • F5 skill will be displayed the same way.
Option C
User Valento skillbar draft ranger optionC.png
  • Simply display pet portraits with their specific skill (player-controllable) after them, the rest stay the same.

This UI should help to rapidly recognize the build intentions, and hopefully will feel "clean".