1
2
3
4
5
6
7
8
9
10
11
12
13
Multiple UI designs I created in an effort to emulate Blizzard’s Overwatch design style, including custom character ability and weapon icons, 3D stylized endorsement icons, and various other HUD elements. All assets created in Photoshop and Illustrator.
A take on a potential change to Overwatch’s endorsement system icons. Although the current icons are successful, these medals were designed in an attempt to match the current level/rank borders, which feature a metal/gemstone theme. Designed in Illustrator and Photoshop.
A mockup of the endorsement medals, seen to the upper right of the character badges. The first 5 medals are my custom icons, while the 6th is the original Overwatch version.
Mockup ability screen for J3ky11 and Hyd3, a custom Overwatch character who uses their ultimate ability to transform between a melee tank and a ranged damage dealer. Icons created in Illustrator, with the mock-up created in Photoshop.
J3kyll and Hyd3’s death icons.
J3kyll and Hyd3’s weapon icons.
A closer view of the custom icons.
A mock-up of a redesigned HUD for Overwatch. Included in this HUD are recolored health and ammo bars, animated health and ammo bars to show damage received and typical ammo counter states (including firing, reloading, empty, and overheating), hand-animated FX for damage taken and reloading, and an overheat meter with accompanying FX. All hand-drawn FX were in an attempt to match the style of Overwatch’s 2D-style FX. Designed in Illustrator, with animations done in Photoshop and After Effects.
In-game mockup of what a centered HUD would look like. The centered HUD was designed to decrease player eye strain, organizing all of the essential information into a centralized location. Also designed with increasingly larger monitor sizes in mind, so that information wouldn’t be segregated into corners.
On-screen HUD FX for character’s being frozen by Mei. Done in an attempt to increase readability and give players more of an opportunity to react to freeze damage. FX animated in After Effects.
High-res render of the on-screen freeze FX.
Hand-drawn FX to alert players when their ultimate is charged and ready to use. Done in an attempt to match current Overwatch 2D FX. FX animated in Photoshop.
On-screen FX for death or loss of round/game. Done in part to increase readability of spectating, where grayscale FX can make it quicker to see if a player died during a chaotic situation. FX animated in Photoshop, composited in After Effects.