Warhammer Online UI

Visual design details on Warhammer Online

Albert Holaso

UI specifications for the game loading screen.

Created the UI specifications and final art for the base set of UI controls including buttons, dropdowns, checkboxes, tooltips, popup windows, and scrollbars.

Created the UI specifications and final art for user action buttons.

Initial screen for the Character selection process. NOTE: The version in the game is a severely pared down implementation of my original design.

Created the UI specifications and final art for the informational windows.

Transitions for the Character selection process. NOTE: The version in the game is a severely pared down implementation of my original design.

Choosing a race brings the user to a race career breakdown grouping.

Career screen for the Character selection process. NOTE: The version in the game is a severely pared down implementation of my original design.

Selected career puts the base character on a pedestal. NOTE: The version in the game is a severely pared down implementation of my original design.

Secondary options to choose gender are positioned close to the career selection area.

Designed the character customization to be as non-intrusive as possible.

Used the toggle (spinner) UI component for maximum real estate savings. This was inspired by the Madden settings screen.

Designed the zoom in/out controls BUT this is not where I laid them out in the original designs. This was the art director’s call.

Through many iterations and meetings, we concurred on putting the main HUD elements along the borders to keep the main view area from being obstructed.

Stylistically I went with a minimalist approach but with metal detailing.

System controls and meta controls such as the character equipment, skills, and inventory.

Self summary view. This is also the area for target opponents and teammates overview.

Chat system. Inspired by World of Warcraft.(Though I attempted to create a more dockable system.)

Map system. Also includes RvR and Main Map access.

Quest summary area.

Action Hot Bar to control character special actions.

The overall layout was designed with combat efficiency in mind.

Details of the Map filtering system.

UI specifications for delivering location based information including font type and size.

UI specifications for 3D world assets such as these indicator icons over npc bodies.

UI and layout style guide for the tooltip which may display in a variety of context sensitive configurations such as Tip only, Tip with instructions, Tip with controls.

Complete visual design and UI style guide (fonts, interface controls, content, and layout) for parchment graphics which included the Tome of Knowledge and Maps.

Complete visual design and UI style guide (fonts, interface controls, content, and layout) for quest dialogues.

UI specifications for transitional messaging.Different types of messages are specified byFont type, coloring, size, and depth priority.

Target health indicatorExperience (xp) display

Current quest display.

Reticles for self, friendly target, and fighting target in the 3D world.

Complete visual design and UI style guide for the “paper doll” system…where players can configure their character and view stats.

Another view of tooltip with a different configuration.

Filtering system

List view.

Complete visual design and UI style guide for the skill progression window. Skills are grouped by career paths and may be filtered.

Nuance note: I visually designed the scrollbar to look like filigree ornamentation when there is no content to scroll.

I did not design this particular window but I left enough of a style guide that another designer and software engineers were able to construct a system with standard components.

Display of team. Member portraits are right clickable for more action options.

Cool down display.

More details of various Tome of Knowledge layouts.






UI animation.

More details of various Map system graphics, layout, and controls.




Loading screen that mimics Tome of Knowledge for thematic seamlessness while providing players with contextual information.

I did not design this particular window but I left enough of a style guide that another designer and software engineers were able to construct a system with standard components.

Merchant buying and selling screen allows transfers of items from backpacks easily.At the request of producers, I also incorporated a Buy Back system like World of Warcraft.

Instanced RvR Scenario invitation popup.

RvR campaign display stats.

RvR (Realm vs. Realm) leaderboard visual design and final art for RvR scenario instances battle aftermath.