Icons, menu design, and animated UI elements created for the University of Utah student game, Neon Kicks. Icons and menu designs created in Illustrator and Photoshop, and animated UI elements created in After Effects.
As Neon Kicks progressed as a project, different methods of tracking tasks and issues were explored. I utilized Hack’n’Plan and Jira throughout development to organize the various group’s responsibilities, then switched to Google Sheets towards the end of development (as team members were more likely to update Google Sheets than others).
Various logo explorations. Top left corner was the final chosen design.
neon kicks portfolio
Neon Kicks logo, animated in After Effects.
A single icon design and the iterations it went through along the process of usability and accessibility tests.
Menu design, motion graphic work, and map design done for a University of Utah student game, The Commons. All work done in Photoshop, Illustrator, and After Effects.
Motion graphics and UI design for an indie video game project.
Responsive Map and Ability UI
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.
overwatch ammo final
Video format of the HUD mock-up.
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.
A variety of graphic design pieces. All pieces shown were created using Illustrator and InDesign.