Warhammer Online UI Design

2. UI specifications for the game
loading screen.

3. Created the UI specifications and final art for
the base set of UI controls including
buttons, dropdowns, checkboxes, tooltips, pop
up windows, and scrollbars.
Created the UI
specifications and final
art for user action
buttons.

4. 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.

5. 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.

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

7. 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.

8. Designed the character customization to
be as non-intrusive as possible.
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.
Used the toggle (spinner) UI component for
maximum real estate savings. This was
inspired by the Madden settings screen.

9. 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.

10. The overall layout was
designed with combat
efficiency in mind.
Self summary view.
This is also the area
for target opponents
and teammates
overview.
System controls and meta controls such as the
character equipment, skills, and inventory.
Map system. Also includes RvR
and Main Map access.
Quest summary area.
Chat system. Inspired by World of Warcraft.
(Though I attempted to create a more
dockable system.)
Action Hot Bar to
control character
special actions.

11. Details of the Map filtering system.

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

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

14. 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.

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

16. UI specifications for transitional messaging.
Different types of messages are specified by
Font type, coloring, size, and depth priority.
Complete visual design and UI style guide
(fonts, interface controls, content, and layout)
for quest dialogues.

17. Target health indicator
Experience (xp) display
Current quest display.

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

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

20. Another view of tooltip with a
different configuration.

21. Filtering system
List view.

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

23. 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.

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

25. Cool down display.

26. More details of various
Tome of Knowledge
layouts.

27. More details of various
Tome of Knowledge
layouts.

28. More details of various
Tome of Knowledge
layouts.

29. More details of various
Tome of Knowledge
layouts.

30. More details of various
Tome of Knowledge
layouts.

31. More details of various
Tome of Knowledge
layouts.

32. UI animation.

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

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

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

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

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

38. 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.

39. 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.

40. Instanced RvR Scenario
invitation popup.

41. RvR campaign display stats.

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