Download - Warhammer Online UI
![Page 1: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/1.jpg)
Visual design details on Warhammer Online
Albert Holaso
![Page 2: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/2.jpg)
UI specifications for the game loading screen.
![Page 3: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/3.jpg)
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.
![Page 4: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/4.jpg)
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.
![Page 5: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/5.jpg)
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.
![Page 6: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/6.jpg)
Career screen for the Character selection process. NOTE: The version in the game is a severely pared down implementation of my original design.
![Page 7: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/7.jpg)
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.
![Page 8: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/8.jpg)
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.
![Page 9: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/9.jpg)
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.
![Page 10: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/10.jpg)
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.
![Page 11: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/11.jpg)
Details of the Map filtering system.
![Page 12: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/12.jpg)
UI specifications for delivering location based information including font type and size.
![Page 13: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/13.jpg)
UI specifications for 3D world assets such as these indicator icons over npc bodies.
![Page 14: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/14.jpg)
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.
![Page 15: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/15.jpg)
Complete visual design and UI style guide (fonts, interface controls, content, and layout) for parchment graphics which included the Tome of Knowledge and Maps.
![Page 16: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/16.jpg)
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.
![Page 17: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/17.jpg)
Target health indicatorExperience (xp) display
Current quest display.
![Page 18: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/18.jpg)
Reticles for self, friendly target, and fighting target in the 3D world.
![Page 19: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/19.jpg)
Complete visual design and UI style guide for the “paper doll” system…where players can configure their character and view stats.
![Page 20: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/20.jpg)
Another view of tooltip with a different configuration.
![Page 21: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/21.jpg)
Filtering system
List view.
![Page 22: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/22.jpg)
Complete visual design and UI style guide for the skill progression window. Skills are grouped by career paths and may be filtered.
![Page 23: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/23.jpg)
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.
![Page 24: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/24.jpg)
Display of team. Member portraits are right clickable for more action options.
![Page 25: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/25.jpg)
Cool down display.
![Page 26: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/26.jpg)
More details of various Tome of Knowledge layouts.
![Page 27: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/27.jpg)
More details of various Tome of Knowledge layouts.
![Page 28: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/28.jpg)
More details of various Tome of Knowledge layouts.
![Page 29: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/29.jpg)
More details of various Tome of Knowledge layouts.
![Page 30: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/30.jpg)
More details of various Tome of Knowledge layouts.
![Page 31: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/31.jpg)
More details of various Tome of Knowledge layouts.
![Page 32: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/32.jpg)
UI animation.
![Page 33: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/33.jpg)
More details of various Map system graphics, layout, and controls.
![Page 34: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/34.jpg)
More details of various Map system graphics, layout, and controls.
![Page 35: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/35.jpg)
More details of various Map system graphics, layout, and controls.
![Page 36: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/36.jpg)
More details of various Map system graphics, layout, and controls.
![Page 37: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/37.jpg)
Loading screen that mimics Tome of Knowledge for thematic seamlessness while providing players with contextual information.
![Page 38: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/38.jpg)
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.
![Page 39: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/39.jpg)
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.
![Page 40: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/40.jpg)
Instanced RvR Scenario invitation popup.
![Page 41: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/41.jpg)
RvR campaign display stats.
![Page 42: Warhammer Online UI](https://reader037.vdocuments.site/reader037/viewer/2022102717/55b3c975bb61ebd1548b478d/html5/thumbnails/42.jpg)
RvR (Realm vs. Realm) leaderboard visual design and final art for RvR scenario instances battle aftermath.